← Alle WCAG 2.1 criteria
4.1.2Niveau A4.1 Compatible

Naam, rol, waarde

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.

Wat het betekent

Naam, rol, waarde begrijpen | Hoe te voldoen aan Naam, rol, waarde (Niveau A) Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents , met inbegrip van hulptechnologieën . Noot Dit succescriterium is primair voor webauteurs die hun eigen componenten van de gebruikersinterface ontwikkelen of scripten. Standaard bedieningselementen in HTML bijvoorbeeld voldoen al aan dit succescriterium als ze gebruikt worden volgens specificatie.

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>

Hoe A11yRisk dit detecteert

A11yRisk detecteert dit criterium automatisch.

Scan uw site op deze overtreding