A: Verwendete ARIA-Attribute müssen gültigen Werten entsprechen (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass alle ARIA Attribute zulässige Werte verwenden.

Das bedeutet

Es werden falsche Token, ungültige Datentypen oder Werte außerhalb des zulässigen Bereichs gesetzt. Beispiele: aria-pressed="yes" statt true|false|mixed, aria-current="active" statt erlaubter Token, aria-valuenow außerhalb von aria-valuemin und aria-valuemax, oder aria-labelledby verweist auf nicht vorhandene IDs.

Auswirkung

Assistive Technologien interpretieren Zustände und Beziehungen falsch oder gar nicht. Das erschwert Orientierung und Bedienung für Nutzerinnen und Nutzer und führt zu Verstößen gegen die WCAG.

Empfehlung

• Erlaubte Token pro Attribut verwenden:

  • aria-pressed: true false mixed

  • aria-expanded: true false

  • aria-selected: true false

  • aria-sort: none ascending descending other

  • aria-current: page step location date time true false

  • aria-haspopup: menu listbox tree grid dialog true false

• Booleans und Token immer kleingeschrieben.

• Zahlen korrekt typisieren und prüfen: aria-level ganzzahlig ≥ 1; aria-valuenow innerhalb aria-valuemin und aria-valuemax.

• ID Referenzen müssen existieren und per Leerzeichen getrennt sein (aria-labelledby="id1 id2").

• Nur sinnvolle Texte für aria-label und aria-roledescription verwenden.

• Überflüssige oder falsche Werte entfernen.

Beispiel

Problematisch

<button aria-pressed="yes"></button>
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="120"></div>
<nav aria-current="active">Start</nav>
<button aria-labelledby="fehlend">Menü</button>
<input role="slider" aria-valuemin="ten" aria-valuenow="5">

Besser

<button aria-pressed="true">Play</button>
 
<div role="slider"
     aria-label="Lautstärke"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"></div>
 
<nav aria-current="page">Start</nav>
 
<span id="menu-label" class="sr-only">Menü</span>
<button aria-labelledby="menu-label"></button>
 
<input role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="5">