Name, Role, Value
For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically determined; and notification of changes is available to user agents, including assistive technologies.
What it means
The intent of this success criterion is to ensure that Assistive Technologies (AT) can gather appropriate information about, activate (or set) and keep up to date on the status of user interface controls in the content. When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification the conditions of this provision will be met. (See examples of Success Criterion 4.1.2 Name, Role, Value below) If custom controls are created, however, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important and appropriate information to assistive technologies and allow themselves to be controlled by assistive technologies. What roles and states are appropriate to convey to assistive technology will depend on what the control represents. Specifics about such information are defined by other specifications, such as WAI-ARIA , or the relevant platform standards. Another factor to consider is whether there is sufficient accessibility support with assistive technologies to convey the information as specified.
Failing example
<!-- Fails: icon button with no accessible name -->
<button onclick="closeDialog()">
<svg aria-hidden="true"><!-- X icon --></svg>
</button>
<!-- Fails: custom toggle with no ARIA role or state -->
<div class="toggle active" onclick="toggle(this)"></div>How to fix it
<!-- Pass: icon button with aria-label -->
<button onclick="closeDialog()" aria-label="Close dialog">
<svg aria-hidden="true"><!-- X icon --></svg>
</button>
<!-- Pass: custom toggle with role and state -->
<div role="switch" aria-checked="true" tabindex="0"
onclick="toggle(this)"
onkeydown="if(event.key===' ')toggle(this)">
Notifications
</div>How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →