Accessibility
- Always use a
label
. Use a hiddenlabel
, or atitle
oraria-label
attribute when a visible text label is not needed. - Associate form labels with controls.
- Never replace
label
withplaceholder
text. - Always specify the correct input type (e.g.
date
,email
,tel
,number
) - Match
for
andid
values that associate the label with its form control. Becauseid
attribute values must be unique on each page, a form control can only have one associatedlabel
. - Whenever possible use
autocomplete
to help users (especially users with cognitive disabilities) fill out the form. - On required fields, use the
required
attribute. It will cause screen readers to announce “required” and also triggers the browser to warn the user with a visual tooltip if the user leaves the filed blank. Screen readers also announce the tooltip content with it appears. - When performing form validation, apply the
aria-invalid="true"
attribute to a form control. It will cause the screen reader to announce “invalid” when that control gets the focus. - Use
aria-labelledby
to overcome the 1:1 limitations oflabel
. - Use
aria-describedby
(in addition to alabel
) 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.
Was this page helpful?
Thanks for your feedback!