<input class="give-text-input" name="give-amount"> doesn't have a label

[mathetos]

A11Y Report Notes

http://b8d.3e8.myftpupload.com/donations/basic-form-with-custom-amount-enabled/
Basic Form with Custom Amount Enabled

• Error / priority 89%
• Form element has no label
• (line: 130, 5)

<input class="give-text-input" id="give-amount" name="give-amount" type="tel" placeholder="" value="20.00" required="" autocomplete="off">

Provide a label for all controls. This allows all users to understand the type of information expected in the field.

Possible Solutions

• Can we add a hidden label?
• Are there other methods for labelling the input without having the actual text spit out above the field that also suits the WCAG 2.0 Requirements?

Need Jordan's input on this one.

[mathetos]

@TheGeniusWM We REALLY don't want a visible label on this input. Would this input be accessible if we added a hidden label?

[TheGeniusWM]

A hidden label for any input is a valid fix, as long as each label is unique. As long as the assisstive technology device can recognize it, the label does not actually need to be visible.
It is recommended that every form input have a unique label.