Form code is implemented correctly

Design Notes

Design decisions are not relevant.

Developer Notes

Implement form labels and error messages correctly

Each form field should have an associated <label> element. The label for attribute value and input ID need to match exactly otherwise the label will not be exposed to assistive technology correctly. <label for="…"> ...</label> <input id="…" type="text">

Error messages and additional information should be automatically announced to non-sighted users so that they are aware their input is invalid. Use 'aria-describedby' to associate the error message / additional information with each form element.

Information and tools

• Developer Mozilla: Basic Form Hints
• WebAIM: Usable and Accessible Form Validation and Error Recovery
• WebAIM: Creating Accessible Forms

Testing Notes

Form controls are properly labeled, and error messages are available by the relevant input

To test the label has been coded correctly, you can usually click on the label and the field should be focused by the browser.

Check for issues in automated tools or manually inspect the code.

Impact range: High

Test type: Semi-automated (many mark-up issues with <label> elements and error message text can be identified automatically)

Tool:

• ARC Toolkit (Forms)

WCAG Reference: Understanding Success Criterion 1.3.1 Info and Relationships