4.1.2Stufe A4.1 Compatible

Name, Rolle, Wert

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.

W3C-Spezifikation ansehen ↗axe: button-name

Was es bedeutet

Name, Rolle, Wert verstehen (englisch) | Name, Rolle, Wert erfüllen (englisch) (Stufe A) Für alle Bestandteile der Benutzerschnittstelle (einschließlich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschließlich assistierender Techniken . Hinweis Dieses Erfolgskriterium ist hauptsächlich für Webautoren gedacht, die ihre eigenen Bestandteile der Benutzerschnittstelle entwickeln oder skripten. Standard-HTML-Steuerelemente erfüllen zum Beispiel bereits dieses Erfolgskriterium, wenn sie entsprechend der Spezifikation benutzt werden.

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>

So erkennt A11yRisk dieses Kriterium

A11yRisk erkennt dieses Kriterium automatisch.

Website auf diesen Verstoß prüfen →

4.1.3StatusmeldungenAA