- Always use a
label. Use a hidden
label, or a
aria-labelattribute when a visible text label is not needed.
- Associate form labels with controls.
- Never replace
- Always specify the correct input type (e.g.
idvalues that associate the label with its form control. Because
idattribute values must be unique on each page, a form control can only have one associated
- Whenever possible use the
autocompleteARIA attribute to help users (especially users with cognitive disabilities) fill out the form:
aria-autocomplete=true(see additional resources for Legacy ARIA 1.0 Combobox with Both List and Inline Autocomplete and Editable Combobox with Both List and Inline Autocomplete.
- On required fields, use the
requiredattribute. It causes screen readers to announce “required” and also triggers the browser to warn the user with a visual tooltip if the user leaves the field blank. Screen readers also announce the tooltip content, when it appears.
- When performing form validation, apply the
aria-invalid="true"attribute to a form control. It will cause screen readers to announce “invalid” when that control gets in focus.
aria-labelledbyto overcome the 1:1 limitations of label.
aria-describedby(in addition to a label) to associate descriptive text to the form control.
- Make sure the form is keyboard accessible: all input fields need to be focusable. The tab sequence needs to be logical and intuitive.
- Alert the user of any validation errors in an apparent and accessible manner. Provide informative feedback messages.
- Allow the user to easily access the form controls that need to be modified.
- Allow resubmission and revalidation of the form information.
Was this page helpful?
Thanks for your feedback!