For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Ensure that user interface components have clear names, roles, and states.
Supports assistive technologies in communicating content and functionality accurately.
Using HTML elements incorrectly and not providing an ARIA role for them.
Automated tools can catch some of the problems with this criterion.
You can get warnings like this: "This select element does not have a value/name available to an accessibility API." Now, what does this mean exactly?
<select>
, this means adding a selected attribute to an <option>
element. If you have an "all" option, you can mark that option as selected when the page is first shown to the user.Design visible labels for elements so the developer can avoid using ARIA attributes for the name information. Visible labels help all users while ARIA attributes help only screen reader users.
Many errors that arise for this criterion as well as criterion 1.3.1 can be fixed by using visible and correctly created labels (<label>
).