← Alle Regeln

ARIA

ARIA-Attribute müssen zur Rolle passen

• Regel: aria-allowed-attr
• Schweregrad: Kritisch
• WCAG-Stufe A

Warum das wichtig ist

Ein Attribut, das die Rolle nicht unterstützt, wird von manchen Hilfsmitteln ignoriert und vom Rest falsch gedeutet. Das Bedienelement meldet dann einen Zustand, in dem es gar nicht ist.

So beheben Sie es

1. Prüfen Sie, welche aria-*-Attribute die Rolle des Elements zulässt, und entfernen Sie die übrigen.
2. Wird der benötigte Zustand nicht unterstützt, ist meist die Rolle falsch — nehmen Sie die Rolle, zu der dieser Zustand gehört.
3. Am einfachsten ist ein natives Element (button, input, select): Es bringt die richtigen Zustände von sich aus mit.

Im Markup

<div role="button" aria-checked="true">Bold</div>

<div role="button" aria-pressed="true">Bold</div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

• 4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu aria-allowed-attr (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.