For all user interface components (e.g. forms, links, scripts, controls, etc.), the name and role of those components is coded in. Also, any states, properties, and values set by the user can be programmatically updated so browsers and assistive technologies are aware of and reflect changes.
This success criterion applies specifically for custom components such as ones a developer has created or from third party vendors.
What to do?
- Make name, role, state, and value of all components determinable
- Use ARIA labels when HTML labels are not available
- Check any code that is not HTML to make sure it is accessible
- Any custom code (plugins, widgets, scripts) that is from a third party needs to be vetted for accessibility
A name can be a label or the assigned text to an element.
A role is whatever a component is stated to be; what the component is. For example, a component can be assigned a role of button, drop down list, progress bar, etc. and that role will be relayed to a screen reader.
Value is whatever the input is for a component. For example, value might be the slider value selected or the selection of yes or no. Not all components will have a value.
State is the current status of a component. For example, state might be whether a checkbox is checked or whether a component is collapsed or expanded.
Resources
- Understanding role, name, and value (YouTube – 1 min 2 secs)
- ARIA basics
- iFrame explanation and examples
- Understanding 4.1.2
Plain English Explanation
When you deviate from HTML in your website’s code, you need to make sure whatever custom or third party code you’ve added remains accessible to assistive technologies. This mostly comes down to the name, role, state, and/or value of page components being able to be determined from the code.
To maintain accessibility for custom or third party components, you’ll need to incorporate ARIA labels and possibly iFrames. ARIA will take a while to understand but if your website has dynamic components, you’ll need to learn how to incorporate it into your code. The ARIA basics link above provides a great introduction into ARIA. With iFrames, you’re embedding content to a page from external sources. Think of YouTube videos and advertising scripts you past into your site.