Autocomplete

Accessibility

• Always use a label. Use a hidden label, or a title or aria-label attribute when a visible text label is not needed.
• Associate form labels with controls.
• Never replace label with placeholder text.
• Always specify the correct input type (e.g. date, email, tel, number)
• Match for and id values that associate the label with its form control. Because id attribute values must be unique on each page, a form control can only have one associated label.
• Whenever possible use the autocomplete ARIA 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 required attribute. 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.
• Use aria-labelledby to overcome the 1:1 limitations of label.
• Use 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.
• Do not rely on JavaScript alone for form submission, validation, and error recovery.
• 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.

Further Reading

• Editable Combobox With List Autocomplete Example Pattern - ARIA Authoring Practices Guide