Wann ARIA hilft und wann es schadet

So funktioniert es

ARIA (Accessible Rich Internet Applications) ist ein Standard des W3C. Er ergänzt HTML um Attribute, die nur Hilfsmittel wie Screenreader auswerten; am Aussehen und Verhalten im Browser ändern sie nichts.

• role sagt, was ein Element ist, etwa role="dialog" oder role="tablist".
• aria-*-Eigenschaften beschreiben Zustand und Namen, etwa aria-expanded="true" für ein offenes Menü oder aria-label für einen Namen.
• aria-hidden="true" blendet ein Element und alles darin für Screenreader aus.

Die erste Regel von ARIA lautet: Wo es ein HTML-Element mit der richtigen Bedeutung gibt, nimm das Element. Ein button ist besser als ein div role="button", ein nav besser als role="navigation". ARIA verspricht nur eine Bedeutung; Tastaturbedienung und Verhalten musst du selbst bauen.

WCAG 2.2 verlangt in Kriterium 4.1.2, dass Name, Rolle und Zustand jedes Bedienelements für Hilfsmittel stimmen, und in 1.3.1, dass die Struktur im Code der sichtbaren entspricht.

Worauf es ankommt

• Nur gültige Rollen. Eine Rolle muss im ARIA-Standard stehen. Tippfehler (role="buton") oder erfundene Rollen ignoriert der Screenreader, und das Element verliert seine Bedeutung. Abstrakte Rollen wie widget, landmark, input oder section sind nur für den Standard selbst gedacht, nicht für Seiten.
• aria-hidden nie am body. aria-hidden="true" am body macht die ganze Seite für Screenreader leer. Das passiert oft, wenn ein Dialog den Hintergrund ausblendet und das Attribut nach dem Schließen nicht wieder entfernt.
• Nichts Bedienbares in versteckten Bereichen. Liegt ein Link oder Button in einem Bereich mit aria-hidden="true", landet die Tastatur auf einem Element, das es für den Screenreader nicht gibt. Typisch sind ausgeblendete Slider-Folien und Menüs.
• Zustände aktuell halten. Ein aria-expanded, das immer false sagt, ist schlimmer als keines. Skripte müssen es beim Öffnen und Schließen umschalten.

Für Bereiche, die gerade nicht bedienbar sein sollen, ist inert die bessere Wahl: Es entzieht sie Screenreader und Tastatur zugleich.

<div class="slide" inert>…</div>

So richtest du es ein

ARIA steckt fast nie im Inhalt, sondern im Theme, in Seitenbaukästen und in Skripten für Menüs, Slider, Akkordeons und Dialoge. Der Report nennt die betroffenen Elemente mit ihrem Code. Ungültige Rollen und vergessene aria-hidden behebt, wer das Theme oder das Plugin pflegt; bei fremden Plugins melde es dem Anbieter oder tausche das Plugin.