Interacting with websites often relies on forms: Search forms, contact forms, like buttons.
Why Is This Important?
Interacting with forms is the basic way to send information to servers on the web. This includes applications like shopping cards, contact forms, and surveys. Form elements are:
- one- and multiline text boxes
- password fields
- email fields
- date/time inputs
- search fields
- select boxes
- radio buttons
Checking for Basic WCAG Requirements
Check that every form element has a visible label.
Make sure that the form element is associated with an accessible name, a programatically associated label. This can happen in several ways:
Assigning the form field with a label element using the
idattributes, for example:
<input id="email" type="email">
Note that the
idattributes must be the same, including capitalization.
idattributes must be unique on the page.
Wrapping the form field with the label:
Email <input type="email">
aria-labelledbyto point from the form element to another element that is used as the label:
<input aria-labelledby="label" type="email">
aria-labelto give the form field an accessible name:
<input aria-label="Email" type="email">
Make sure that all labels and instructions are associated with one of the above techniques. Alternatively,
aria-describedbycan be used to associate other information to the form field:
<input id="date" aria-describedby="dateformat" type="text">
<div id="dateformat">Date Format is: YYYY-MM-DD</div>
- Use a visible label and use that label also for the programmatically associated accessible name to avoid that those two diverge.
- Wherever you can (everywhere 😉) use the
<label>element and its
forattribute to assign the accessible name.
- Text fields should have the visible label either above or left to the form element (in left-to-right languages).
- Checkboxes and radio buttons should have the visible label on the right of the form element (in left-to-right languages).
Tools & Bookmarklet
- Paul J. Adam’s Forms Bookmarklet displays labels and descriptions so that it is easy to scan the page for issues.
WCAG 2 Requirements
- 3.3.2 Labels or Instructions, Understanding Document
- 1.3.1 Info and Relationships, Understanding Document