Barrierefreiheit im Web – Teil 2

7 Tipps und Tricks für Entwickler: So werden Webseiten und Apps barrierefrei

Julia Wiencirz

© Shutterstock / Robert Kneschke

Digitale Barrierefreiheit ist gerade in der derzeitigen Corona-Krise wichtiger denn je. Für Nutzer mit Beeinträchtigungen stellt der Zugang zu Informationen und digitalen Services oft eine große Herausforderung dar, besonders wenn die Navigation durch Interaktion mit Webseiten und Applikationen nicht bedarfsgerecht funktioniert. Welche wichtigsten Mängel Entwickler in Bezug auf Barrierefreiheit beheben sollten, erklärt Julia Wiencirz, Managerin Solution Engineering, Europe bei Applause.

Eine komplette Webseite oder App auf die entsprechenden barrierefreien Standards zu bringen, scheint für viele Entwickler eine undurchsichtige und schwierige Aufgabe zu sein. Dabei gibt es einige wichtige Fixes, mit denen Entwickler das digitale Erlebnis für Menschen, die mit einer Einschränkung leben, sofort verbessern können. Grundsätzlich gilt dabei, den Nutzer in den Vordergrund zu stellen. Mit den hier vorgestellten sieben Anpassungen erreichen Entwickler schnell, dass Menschen mit Beeinträchtigungen um ein Vielfaches einfacher durch die Webseite oder App navigieren können. Was also müssen Entwickler für den Bau barrierefreier Erlebnisse wissen?

1. Farbgebung

Für ein gutes Website-Design ist vor allem ein hoher Farbkontrast ein wesentliches Element. Das ideale Kontrastverhältnis von 4,5:1 sollte für alle Textelemente, insbesondere beim Design für mobile Geräte, verwendet werden. Für aktive Steuerelemente sollte ein Farbkontrast von mindestens 3:1 bestehen. Doch Sehschwäche ist nicht gleich Sehschwäche – es herrscht eine große Variation von visuellen Einschränkungen. Deswegen ist bei der Informationsvermittlung auf Farbe allein kein Verlass. Es sollten also auch Text- oder Gestaltungshinweise verfügbar sein, die die Funktion interaktiver Bildschirmelemente anzeigen. Der Hinweis auf die Möglichkeit zum Vergrößern („Zoomen“) von Inhalten ist hier empfehlenswert.

2. Bilder und Text

Damit blinde Menschen die Informationen einer grafischen Benutzeroberfläche dennoch wahrnehmen können, nutzen sie einen sogenannten Screenreader. Diese Vorlese-Anwendung vermittelt die Informationen entweder mittels Sprachsynthese akustisch oder taktil über eine Braillezeile. Screenreader können alle Arten von Text lesen – sie stoßen jedoch an ihre Grenzen, wenn es um Informationen in Bildern oder anderen Nicht-Text-Elementen wie beispielsweise Icon-Buttons, Animationen oder Diagrammen geht. Damit diese dennoch verbalisiert werden können, muss eine geeignete Textalternative zur Verfügung stehen.

Für einen barrierefreien Zugang sollte sichergestellt sein, dass Bilder mit geeigneten beschreibenden Alt-Attributen versehen sind, die den Inhalt und die Funktion des Bildes oder Elements genau wiedergeben. Allerdings sollten Alt-Attribute niemals in dekorativen Style-Elementen zu finden sein, damit Screenreader diese nicht mit interpretieren. Unbedingt zu vermeiden ist außerdem, dass Menschen mit geringer oder schlechter Sehkraft die Webseiten-Inhalte vergrößern müssen. Das Problem ist dabei, dass der Text dann oftmals verschwommen wirkt und eher schwerer zu lesen ist.

3. Aufbau der Seite

Eine klare Seitenstruktur ist wiederum für Nutzer mit einem Screenreader enorm wichtig. Grundsätzlich gilt es, eindeutige und aussagekräftige Seitentitel zu verwenden, denn diese werden zuerst (vor)gelesen und geben darüber hinaus dem Nutzer eine bessere Orientierung. Damit Überschriften und Unterüberschriften eine sinnvolle Strukturierung bilden können, sollten sie vorrangig pragmatischen und keinen Styling-Zwecken dienen. Der Textteil sollte sich idealerweise vom Überschriften-Teil abheben, sodass die Überschriften-Ebenen klar hervortreten. Außerdem ist jeder Entwickler gut darin beraten, klar definierte Landmark-Tags wie <nav>, <header>, <footer>, <main>, etc. zu verwenden.

4. Animation und Ton

Im Bereich Animation ist bei Menschen mit Sehbehinderungen besondere Feinfühligkeit geboten. Zum einen können sie durch das Bewegen oder Scrollen von Elementen abgelenkt werden. Zum anderen können Animationen bei Menschen mit lichtempfindlicher Epilepsie auch zu Krampfanfällen führen. Für sehbehinderte Nutzer kann es unter anderem auch schwer sein, den Screenreader akustisch zu verstehen, wenn der Ton eines Videos oder einer Animation automatisch abgespielt wird. Nativ eingebettete Audio- und Videoplayer sowie Drittdienste sollten daher so eingebunden werden, dass Töne und Videos nicht automatisch abgespielt werden sobald die Seite aufgerufen wird. Generell sollte immer eine Möglichkeit geboten werden, automatisch scrollende oder sich automatisch aktualisierende Elemente, wie zum Beispiel Nachrichtenticker, anzuhalten oder zu unterbrechen. Slider und Karussell-Elemente wie zum Beispiel Bilder-Slides bedürfen manueller Navigationsknöpfe, um das Abspielen aktiv unterbrechen zu können.

5. Tastaturen

Hier lautet die einfache Grundformel für barrierefreie Webseiten: Alles, was auf einer Webseite mit der Maus bedient werden kann, sollte auch mit der Tastatur möglich sein. Blinde Menschen, die beispielsweise den Mauszeiger auf dem Bildschirm nicht sehen können, können mit einer Kombination aus Tastatur und Screenreader auf einer Webseite navigieren. Damit das gelingt, darf die Standard-Fokus-Umrandung von interaktiven Elementen nicht mit outline:none entfernt werden. Gleichzeitig sollten benutzerdefinierte Fokus-Indikatoren enthalten sein, um den Benutzern zu helfen. Damit keine Verwirrung entsteht, muss die Reihenfolge des Dokumenten-Objektmodells (DOM), nach der sich der Tastaturfokus bewegt, mit der visuellen Reihenfolge übereinstimmen. Es ist daher essentiell, natürliche Elemente wann immer möglich zu verwenden, denn diese haben das richtige Verhalten bereits vordefiniert. Bei einem Button, lässt sich  <button> (oder <Eingabetyp="button">) verwenden. Bei anderen Elementen wie <div onclick="DoThing();">Do something.</div> oder <a onclick="DoThing();">Do something.</a>, führt das allerdings zu unnötigen Problemen.

6. Formulare und Formular-Steuerungen

Webseiten enthalten häufig Formulare und Formular-Steuerelemente für die Benutzerinteraktion. Damit die Benutzer eines Screenreaders diese adäquat verwenden können, müssen die Beschriftungen dem jeweiligen Feld oder Steuerelement korrekt zugeordnet sein. Da Platzhalter verschwinden, wenn ein Benutzer mit der Tastatur in das Feld tippt oder das Feld ausgefüllt wird, sollten sie nicht für notwendige Informationen verwendet werden. Auch eine richtige Platzierung von visuellen Beschriftungen hilft: Diese werden in der Regel links von Textfeldern und Dropdown-Listen und rechts von Auswahlknöpfen und Kontrollkästchen platziert. Geben Sie immer deutlich an, wann Formularfelder erforderlich sind. So beispielsweise durch die Eingabe von Erforderlich in die Feldbeschriftung oder die Verwendung eines Sternchens plus Erläuterung. Etiketten mit Formular-Steuerelementen mithilfe des <Label>-Tags außerdem mit einem for-Attribut zu verknüpfen, ermöglicht es Screenreadern, die richtige Bezeichnung für dieses Steuerelement anzukündigen. Wenn es für ein Steuerelement (d. h. für eine Icon-Schaltfläche) kein visuelles Label gibt, kann man stattdessen ein Aria-Label-Attribut verwenden.

Lesen Sie auch: Digitaler Zugang für alle – Wie barrierefreie Webseiten und Apps gelingen

7. Fehler-Warnungen

Wenn ein Fehler auftritt, benötigen Benutzer präzise und klare Informationen darüber, was schief gelaufen ist und wie der Fehler behoben werden kann. Zu vermeiden sind rote Rahmen, Ausrufezeichen oder allgemeine Fehlermeldungen wie Ungültige Eingabe, um die Position des Fehlers zu markieren. Stattdessen sollte der Fehler klar und deutlich in Textform beschrieben sein. Der Benutzer weiß, was falsch ist und wie er den Fehler beheben kann, wenn Anweisungen wie Sie müssen eine gültige E-Mail-Adresse eingeben eingefügt sind. Insbesondere Menschen mit kognitiven Herausforderungen sind möglicherweise nicht in der Lage, ein Formular auszufüllen oder einen Kauf abzuschließen, wenn sie nicht verstehen, worin der Fehler liegt. Letzten Endes sollten die eingegebenen Daten immer auch validiert sein, bevor diese eingereicht werden. Geben Sie dem Benutzer stets die Möglichkeit, die Daten im Vorhinein dahingehend zu prüfen.

Geschrieben von
Julia Wiencirz

Julia Wiencirz ist Managerin Solution Engineering, Europe bei Applause.

Kommentare

Hinterlasse einen Kommentar

avatar
4000
  Subscribe  
Benachrichtige mich zu: