Barrierefreiheit: Website Accessibility Boost WAI-ARIA

Barrierefreiheit: Website Accessibility Boost mit WAI-ARIA

Es ist immer ein Stück Extra-Arbeit, eine barrierefreie Webseite zu erstellen. Eine ganz einfache Methode bieten jedoch ARIA Landmarks, die rein semantisch und schnell angebracht sind. Wie das geht und was ARIA Landmarks überhaupt sind, erfahrt Ihr hier.

Was bedeutet WAI-ARIA?

WAI-ARIA ist die Kurzform für Web Accessibility Initiative – Accessible Rich Internet Applications. Bei den frei übersetzt „leicht zugänglichen Internet Applikationen“ handelt es sich um eine Auszeichnungssprache, mit der der Nutzer einen leichteren Zugang zu der Webseite erhält.

Es gibt verschiedene Rollen (roles) und Zustände (states), die definiert sind und mit denen unterschiedliche Ziele erreicht werden können. Die größte BrowserUunterstützung fällt hier den Landmark Roles zu. Bei einer vergebenen Landmark Role sendet der Browser dem Betriebssystem Informationen zu, die durch einen Screenreader erfasst werden können.

Funktion in der Praxis

Ein sehbehinderter Nutzer benutzt einen Screenreader, der ihm den Seiteninhalt vorliest. Um von einem Teil der Webseite zu einem anderen zu springen, würde er beispielsweise von Liste zu Liste navigieren, ohne zu wissen, welchen Inhalt die Liste repräsentiert.

Wenn wir vorher jedoch die Seite mit Landmarks, Orientierungspunkten, versehen haben, kann der Nutzer zwischen diesen navigieren und bekommt zudem einen Eindruck von deren Inhalt. Der Screenreader gibt z. B. „navigation landmark“ aus, so weiß der Nutzer, dass er in der Navigation gelandet ist – wenn sie ihn nicht interessiert, springt er einfach zur nächsten Landmark.

Wie sehen ARIA Landmarks aus?

Landmarks sind denkbar einfach. Es gibt 8 Rollen, die dem Inhalt zugewiesen werden können.

  • application = Webanwendung innerhalb der Seite – Achtung: schickt den Screenreader in den Formularmodus, der die Tastaturnavigation teilweise außer Kraft setzt
  • banner = gesamte Webseite überspannender Inhalt, wie Logo, Titel – Achtung: Es sollte nur eine Banner-Role pro Seite geben
  • complementary = wie das <aside>-Element, auch nach Trennung vom Main-Content bleibt der Inhalt aussagekräftig
  • contentinfo = Informationen zur Webseite, wie Impressum, Fußnoten, Copyright – Achtung: Es sollte nur eine Contentinfo-Role pro Seite geben; kann für das <footer>-Element genutzt werden, wenn es nur ein mal vorkommt
  • form = Sammlung von Feldern, die ein Formular ergeben
  • main = Hauptinhalt, wie das <main>-Element – Achtung: es sollte nur eine Main-Role pro Seite geben
  • navigation = Navigationselemente wie Links, wie das <nav>-Element
  • search = Sammlung von Feldern, die eine Suchfunktion ergeben

Wenn feststeht, welcher Teil der Webseite welcher Rolle entspricht, wird die Rolle in der HTML-Datei definiert. Wichtig ist, dass jeder Inhalt unter einer Rolle steht, um keinen Inhalt „unzugänglich“ für den Nutzer zu machen. Durch Hinzufügen von role=“Rolle“ im Code ist dann auch schon alle Arbeit getan:

 

Derzeit unterstützen viele Screenreader wie z. B. JAWS oder der Open Source Reader NVDA die Landmark Roles. Es gibt sogar ein Firefox Plugin, welches die Navigation zwischen Landmarks ohne Screenreader ermöglicht. Durch breite Browserunterstützung, die einfache Implementierung in den Webseiten Code und den enormen Nutzen gibt es eigentlich keinen Grund, WAI-ARIA Landmarks nicht zu nutzen! :D

Kommentare

  1. Gravatar
    Schwaneberg am

    Tolle Sache! Endlich mal einfach umsetzbarer Code. Gibt es eigentlich bereits eine AccessKey Extension für Typo3, welche die aktuellen Richtlinien einhält und einfach zu konfigurieren ist?

    Antworten

Kommentar hinzufügen