Barrierefreie Websites – WAI-ARIA

Vor zwei Jahren haben wir die Barrierefreiheit im Web bereits einmal in unserem Thema des Monats behandelt. In diesem Artikel möchten wir auf die neuere Entwicklung von WAI-ARIA eingehen, liefern davor aber noch einmal die Basics von einem etwas technischeren Standpunkt aus.

Barrierefreiheit im Netz ist ein grosses Thema. Viele Staaten haben sich selbst auferlegt behördliche Websites barrierefrei zur Verfügung zu stellen. In der Schweiz sollten Webseiten des Bundes seit dem 31.12.2010 mindestens der Konformitätsstufe AA der Web Content Accessibility Guidelines (WCAG) 2.0 erreichen (Access for All – Gesetz Schweiz). Die WCAG legen Richtlinien und gängige Praktiken fest, wie Barrierefreiheit im Web umgesetzt werden sollte. Dabei werden drei Stufen von A bis AAA unterschieden.

Barrierefrei in Code und Content

Um eine Website für möglichst viele Menschen zugänglich zu machen, müssen verschiedenste Fälle bedacht und bei der Erstellung der Website im Code wie auch in den Inhalten berücksichtigt werden. Wichtig ist zu bedenken, dass Barrierefreiheit nicht nur bedeutet die Inhalte für Menschen mit körperlichen Einschränkungen erreichbar zu machen, wie z.B. das HTML für eine Nutzung mit einem Screenreader zu optimieren. Es sollte auch möglichst leichte Sprache verwendet werden, sodass die Inhalte von jedem verstanden werden können. Dies kommt insbesondere bei behördlichen Websites zum Tragen, da hier oft komplexe Themen in sehr gehobener Sprache dargestellt werden.

Gängige Praktiken

Auf Code-Ebene kann man bereits relativ viel erreichen, wenn auf ein paar Details geachtet wird. So sollten beispielsweise für alle nicht-textlichen Inhalte (also Bilder und Videos) Textalternativen zur Verfügung gestellt werden. Im Klartext sollte z.B. bei Bildern immer das alt=““ Attribut genutzt werden um den Inhalt des Bildes zu beschreiben. Dies bedeutet auch, dass auf aufwändige Animationen mit JavaScript verzichtet werden sollte, falls diese der einzige Zugang zu bestimmten Inhalten wären. Es muss immer bedacht werden, dass Animationen mit einem Screenreader nicht dargestellt werden können. Eine Hürde können auch Icons darstellen, wenn diese ohne erklärenden Text eine Funktion vermitteln.

Weiterhin sollte darauf geachtet werden, dass die Website auch gut mit der Tastatur bedient werden kann. Typischerweise hilft hier auch eine sogenannte Skip-Navigation, welche es ermöglicht direkt vom Seitenanfang zum Hauptinhalt der Page zu springen. So können User es vermeiden, sich erst durch den kompletten Headerbereich inklusive des Menüs kämpfen zu müssen, bevor sie den eigentlichen Content erreichen.

Die Option den Kontrast und den Schriftgrad zu erhöhen ist eine Möglichkeit Usern mit eingeschränktem Sehvermögen den Zugang zur Website zu vereinfachen. Diese können so auf einen Screenreader verzichten.

Natürlich sind dies nur einige von vielen Möglichkeiten Websites barrierefrei zu gestalten. Insgesamt sollte man sich immer wieder vor Augen führen, dass alle Inhalte auch ohne CSS und JavaScript sinnvoll gegliedert erreichbar sein sollten. Eine klare Trennung zwischen Inhalt (HTML) und Styles (CSS) wird dadurch noch weiter forciert. Zusätzlich ist es sehr hilfreich das Markup vom W3C validieren zu lassen und allfällig nachzubessern.

Semantisches HTML5 …

HTML5 bietet immer mehr Möglichkeiten semantisches Markup zu schreiben, und somit Screenreadern (und Browsern) mehr Informationen über die dargestellten Inhalte zu vermitteln. So kann beispielsweise von Link zu Link navigiert werden, aber auch Auflistungen oder bestimmte Landmarks wie <nav>, <header>, <main> und <footer> können direkt erkannt und angesteuert werden (HTML5 and ARIA Landmarks). Dies liefert einen besseren Überblick über den Aufbau und vereinfacht dadurch auch das Navigieren auf einer Site.

… durch WAI-ARIA ergänzt

Doch noch lässt sich mit HTML nicht alles so definieren, wie es für Screenreader optimal wäre. Wo HTML5 noch nicht weit genug ist, kommt WAI-ARIA ins Spiel.

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) ist eine Sammlung an Spezifikationen, die das W3C herausgegeben hat, um die Barrierefreiheit von Websites weiter zu erhöhen. Insbesondere dynamische Inhalte und komplexe Userinterfaces sollen keine Hürde mehr für Screenreader und ähnliche Technologien darstellen. WAI-ARIA definiert hierfür zusätzliche Attribute, welche Screenreader dabei unterstützen können, den HTML-Code korrekt zu interpretieren. Übrigens wird WAI-ARIA nicht nur bei Websites sondern beispielsweise auch für eBook-Reader angewendet. Wichtig ist, dass inzwischen auch viele HTML5-Elemente die Funktion von WAI-ARIA übernehmen. Wo immer es möglich ist, sollte das korrekte HTML-Tag verwendet werden und auf zusätzliche Attribute verzichtet werden. Die Richtlinien sind also eine Mischung aus korrekt verwendeten HTML-Tags, mit zusätzlichen WAI-ARIA Attributen, wo das HTML nicht ausreicht.

Die WAI-ARIA Richtlinien können die Barrierefreiheit auf unterschiedliche Weise erhöhen:

  • Wie bereits geschrieben kann der Aufbau der Site durch definierte Strukturen (header, footer, main etc) verdeutlicht werden. WAI-ARIA stellt hier verschiedene roles zur Verfügung, die das HTML5 ergänzen können. In welchen Fällen HTML5 Tags ausreichen und wann es Sinn macht WAI-ARIA roles zu definieren, können Sie hier nachlesen: Using WAI-ARIA in HTML
  • Komplexere Funktionen wie Dropdown-Menüs, Suchfelder etc. können über WAI-ARIA klarer definiert werden. Zustände (z.B. ob ein Menü geöffnet ist oder nicht) und Funktionen werden dem Screenreader mitgeteilt.
  • Elemente können speziell für Screenreader gekennzeichnet werden. So kann beispielsweise einem generischen Link wie „read more“ im Screenreader eine zusätzliche Bezeichnung hinzugefügt werden. Dies kann sehr hilfreich sein für Personen, die nicht optisch sofort den Kontext dieses Links erfassen können. Ein weiteres Beispiel sind Icons, die nur sehenden Usern direkt ihre Funktion vermitteln, für Screenreader aber gesondert erläutert werden müssen (mehr hierzu erklärt Font Awesome & Accessibility).

Fazit

Insgesamt ist es sehr komplex eine Website in allen Belangen barrierefrei zu gestalten. Wer es auf eine AAA-Zertifizierung abzielt hat einiges an Kleinarbeit zu leisten. Grundsätzlich kann man aber mit validem HTML5 gespickt mit ein paar WAI-ARIA-Attributen bereits sehr viel erreichen. Letztlich führt kaum ein Weg daran vorbei die Site selbst mit einem Screenreader wie JAWS oder NVDA zu testen.

Welche Erfahrung haben Sie mit barrierefreien Websites gemacht? Haben Sie Tipps oder Fragen? Hinterlassen Sie einfach ein Kommentar.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.