Hinweise zur Erstellung barrierarmer Websites – digibasics
Zum Hauptinhalt springen
Version 1.0
Prototyp zur Erprobung

Hinweise zur Erstellung barrierarmer Websites

Eine Website barrierearm zu erstellen, erfordert einiges Wissen. Wie sich die Nutzung einer Website als sehbeeinträchtigte Person anfühlt, das demonstrierte ein blinder Accessibility-Consultant im Rahmen einer Veranstaltung der HfH. Dabei untersuchte er mit seinem Screen Reader mehrere Websites auf deren E-Accessibility. Einen Auszug dieser Veranstaltung findest du in der Aufzeichnung Screenreader Demonstration_HfH-BBL. Dieses kurze Video beinhaltet unter anderem wichtige Gestaltungshinweise für barrierearme Websites.

Um die E-Accessibility einer Website zu prüfen, werden zumeist die WCAG herangezogen (genauere Informationen zu den WCAG folgen im Kapitel zu Richtlinien und rechtlichen Grundlagen). Diese Web Content Accessibility Guidelines sind sehr umfangreich und ohne Vorwissen nicht ganz einfach nachzuvollziehen. Die 10 goldenen Regeln decken jedoch einen grossen Teil der Anforderungen der WCAG ab. Auf einige Inhalte der WCAG wirst du auch im Leitfaden «Einfach Surfen» stossen, der gleichzeitig Massnahmen zur Erhöhung der Barrierefreiheit bei Websites erläutert und auf die besonderen Bedarfe von Menschen mit kognitiven Beeinträchtigungen eingeht. Deshalb ist dieser Leitfaden im Kontext von barrierearmen Webseiten und für die Bedarfsgruppe Kognition relevant.

Die 10 goldenen Regeln für Websites

Websites beinhalten oft eine Kombination aus Text, Links, Bildern, Tabellen und Interaktionselementen (zum Beispiel Kontaktformulare, oder schlicht Buttons). In manche Websites sind sogar Videos, Animationen oder Audiodateien eingebunden. Für die Gestaltung barrierearmer Websites laufen also viele Fäden zusammen: Man muss wissen, wie man Bilder barrierearm einbindet, wie man Links korrekt formatiert, wie man Untertitel für Videos erstellt und so weiter.

Wie auch für Textdokumente, Präsentationen und multimediale Inhalte können auch für die Erstellung barrierearmer Websites die bereits bekannten 10 goldenen Regeln herangezogen werden. Beispielsweise die Regel, dass Informationen über mehrere Kanäle vermittelt werden sollen: Bilder sind mit einem aussagekräftigen Alternativtext zu versehen oder Audio- und Videodateien mit Untertitelungen oder Übersetzungen in Gebärdensprache. Das Verfassen von guten Alternativtexten und Bildbeschreibungen, die auch bei Textdokumenten oder Präsentationen erforderlich sind, ist nicht ganz einfach. Gute Tipps hierzu liefert der Leitfaden zur Erstellung von Alternativtexten für Grafiken.

Sprechende Fehlermeldungen

Was neben den 10 goldenen Regeln bei der Erstellung von Websites berücksichtigt werden sollte, ist die Verständlichkeit von jeglichen Interaktionselementen. Der Klassiker ist eine Fehlermeldung wie «Ein Fehler ist aufgetreten» – und sonst keinerlei Informationen. Das ist für jeden Websitebenutzer eine Herausforderung, für beeinträchtigte Personen aber nochmals schwieriger. Beispielsweise bei Formularfeldern sollte in der Fehlermeldung genau angegeben werden, wo sich der fehlerhafte Eintrag befindet, damit dieser von einer Person mit Beeinträchtigung leichter gefunden werden kann. Optimalerweise wird darüber hinaus darauf hingewiesen, was daran falsch war (zum Beispiel bei der Erstellung von Passwörtern, dass kein Sonderzeichen enthalten ist, aber eines gefordert wird). So wird die Fehlerbehebung stark vereinfacht – für alle.

Tastaturbedienbarkeit

Viele Personen mit Beeinträchtigungen navigieren auf Websites oder in Dokumenten ausschliesslich mit der Tastatur statt mit einer Maus. Deshalb ist es zentral, dass Websites allein per Tastatur bedienbar sind und die Nutzung der Maus nicht vorausgesetzt wird. Dies muss bereits bei der Erstellung einer Website berücksichtigt werden, ist technisch jedoch durchaus möglich.

Tipps zur Gestaltung für bestimmte Bedarfsgruppen

Für sehbehinderte Personen spielt die Skalierbarkeit einer Website eine wichtige Rolle. Jeder Browser bringt eine Zoom-Funktion mit, die sich meist rechts oben befindet (siehe Screenshot unten von Google Chrome). Damit sollte die Website bis zu 400 Prozent vergrösserbar sein und man sollte den Text lesen können, ohne bei jeder Zeile von links nach rechts scrollen zu müssen.

Screenshot eines Fensters im Browser Google Chrome. Die drei Punkte oben rechts öffnen das Menü. Im Menü ist die Option "Zoomen" rot umrandet und die Einstellung beträgt 400%

Tipps zur Gestaltung von Websites für Personen mit einer kognitiven Beeinträchtigung finden sich auf der Seite zur Bedarfsgruppe Kognition.