Nom, rôle et valeur
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.
Ce que cela signifie
Comprendre Nom, rôle et valeur (en anglais) | Comment satisfaire à Nom, rôle et valeur (en anglais) (Niveau A) Pour tout composant d’interface utilisateur (comprenant mais n’étant pas limité aux éléments de formulaire, liens et composants générés par des scripts), le nom et le rôle peuvent être déterminés par un programme informatique ; les états, les propriétés et les valeurs qui peuvent être paramétrés par l’utilisateur peuvent être définis par programmation ; et la notification des changements de ces éléments est disponible aux agents utilisateurs , incluant les technologies d’assistance . Note Ce critère de succès s’adresse d’abord aux auteurs qui développent ou programment leurs propres composants d’interface utilisateur. Toutefois, les contrôles HTML standards se conforment déjà à ce critère de succès lorsqu’ils sont utilisés conformément à la spécification.
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>Comment A11yRisk détecte cela
A11yRisk détecte ce critère automatiquement.
Analyser votre site pour cette violation →