TYPO3: Was ist für Barrierefreiheit wichtig

Als Digitalagentur aus Hannover beschäftigen wir uns mit dem aktuellen Thema der Barrierefreiheit. Hier die wichtigsten Fakten zum Thema.

Entwickler sprechen oft über ARIA-Rollen und -Attribute, als wären sie das Zaubermittel für Barrierefreiheit im Web. Manche glauben, damit ließen sich alle Probleme lösen. Andere sind überzeugt: Ohne ARIA geht gar nichts. Beides stimmt nicht.

Was ist ARIA überhaupt?

ARIA steht für „Accessible Rich Internet Applications“. Die Spezifikation stammt von der Web Accessibility Initiative (WAI) und soll Menschen mit Behinderungen, vor allem blinden und sehbehinderten Nutzern, den Zugang zu Webseiten erleichtern. Genauer: ARIA-Attribute helfen Screenreadern, die Inhalte und die Bedienung der Seite besser zu verstehen. Seit 2014 ist ARIA ein offizieller Webstandard des W3C.

Kurz gesagt: ARIA macht aus einer starren Webseite eine interaktive Anwendung. Immer dann, wenn Nutzer mit Inhalten interagieren – etwa beim Ein- und Ausblenden von Bereichen, beim Blättern im Slider oder beim Ausfüllen von Formularen – beschreibt ARIA exakt, was passiert und wie der aktuelle Zustand aussieht.

ARIA besteht aus zwei Bausteinen: Rollen und Attribute. Rollen ordnen ein Element grob ein, Attribute verfeinern diese Einordnung. Wer Barrierefreiheit ernst meint, muss beide kennen.

Die vier ARIA-Rollen

1. Landmark Roles

Landmark Roles kennzeichnen zentrale Bereiche einer Seite, etwa Navigation, Hauptinhalt oder die Suche. Sie erleichtern blinden Nutzern das schnelle Springen zwischen wichtigen Abschnitten, ohne sich durch alle Inhalte hangeln zu müssen. Beispiele: <header>, <footer>, <main> – früher nur mit ARIA-Rolle, heute oft als eigenes HTML-Element.

2. Widget Roles

Widget Roles beschreiben interaktive Elemente wie Schieberegler, Akkordeons oder Fortschrittsanzeigen. Wichtig: Wer einer Komponente eine Widget-Rolle gibt, muss auch die Bedienbarkeit mit Tastatur sicherstellen – oft mit zusätzlichem JavaScript.

3. Document Structure Roles

Diese Rollen strukturieren den Inhalt: Absätze, Überschriften oder Bilder. Viele erhalten Sie heute direkt durch korrektes HTML-Markup: <p>, <h1>, <img>. Die Rolle macht deutlich, welche Funktion ein Element übernimmt.

4. Live Regions

Live Regions kennzeichnen Bereiche, deren Inhalte sich dynamisch ändern – zum Beispiel Hinweise bei Formularen oder laufende Timer. Screenreader können solche Änderungen priorisiert vorlesen und Nutzer dadurch sofort informieren.

ARIA-Attribute: Eigenschaften und Zustände

ARIA-Attribute liefern zusätzliche Informationen zu einzelnen Elementen. Es gibt zwei Typen:

States (Zustände): Sie können sich ändern, etwa aria-checked bei einer Checkbox.
Properties (Eigenschaften): Sie bleiben in der Regel gleich, etwa aria-labelledby zur Zuweisung einer Textalternative.
Beide Varianten nutzt man mit der gleichen Syntax am Element.

Fünf Regeln für den sinnvollen Einsatz von ARIA

• Nur dort einsetzen, wo HTML nicht ausreicht!
  Gibt es ein passendes HTML-Element oder -Attribut, braucht es kein zusätzliches ARIA.
• Semantik nicht unnötig ändern!
  Lassen Sie Elemente so, wie sie gedacht sind.
• Interaktive ARIA-Elemente müssen per Tastatur bedienbar sein!
  Andernfalls helfen sie niemandem weiter.
• Fokussierbare Elemente nicht verstecken!
  Was erreicht werden kann, muss auch sichtbar bleiben.
• Jedes fokussierbare Element braucht einen zugänglichen Namen!
  Nur so versteht der Nutzer Zweck und Funktion.

Praxistipps
Manchmal soll ein Element für Screenreader unsichtbar sein – aber im Layout sichtbar bleiben. Dann hilft aria-hidden="true".
Komplexe Komponenten wie Slider oder Akkordeons brauchen meist Widget-Rollen und eine solide Umsetzung der Bedienung. Das W3C liefert dazu gute Beispiele und Richtlinien.