Barrierefreiheit im Web Design? Das sind doch nur alt-Texte, oder?

Wenn man vor zehn Jahren von Barrierefreiheit im Web Design gehört hat, dachte man hauptsächlich an die alt-Texte (Alternativtexte) für Bilder, wenn diese Bilder nicht geladen werden können oder als Aufbereitung dieser für sehbehinderte Menschen. Selbst das war oftmals schon ein nerviges notwendiges Übel, das man lediglich für die Auffindbarkeit über Suchmaschinen aber auf sich nahm.

Dabei ist Barrierefreiheit ein viel breiteres Feld, als man denkt. In den letzten Jahren ist diese Anforderung deutlich wichtiger und von deutlich mehr Designern und Einrichtungen beachtet worden. Das geht mittlerweile auch so weit, dass es für öffentliche Einrichtungen, Städte, Schulen etc. Pflicht wurde. Seit 2019 gilt es nun für die Betreiber von Websites in diesen Bereichen, möglichst viele Punkte des Barrierefreiheitsindex zu erfüllen.

Design für Barrierefreiheit auf Grundlage des BITV

Gehen wir zunächst mal streng nach dem Test der BITV (Barrierefreie-Informationstechnik-Verordnung), um uns einen Überblick über das Ausmaß des Themas Barrierefreiheit zu verschaffen.

Dabei werden mehrere Themen in 60 Prüfschritten abgedeckt, die es zu möglichst gut zu erfüllen gilt. Man muss dabei nicht alle Punkte erreichen, aber dennoch über einen gewissen Punktestand kommen, um die Seite offiziell barrierefrei nennen zu können. Grundlegend ist das Ziel der Normen, Websites wahrnehmbar, bedienbar, verständlich und robust zu machen.

Ich fasse mal alle der 60 Punkte in mehrere Themenblöcke grob zusammen:

Visuelle Umsetzung

Bei der visuellen Umsetzung der Barrierefreiheit geht es vor allem um die Lesbarkeit der Inhalte. Alle Schriften müssen zu jeder Zeit und auf allen Endgeräten gut lesbar sein. Vor allem für Menschen mit Sehbehinderungen ist dies wichtig.

Dabei sind auch die Kontraste zwischen Vorder- und Hintergründen wichtig. Es ist zum Beispiel nie eine gute Idee helle Farben als Hintergrund zu verwenden, wenn die Schrift weiß ist. Dabei wird kein ausreichender Kontrast zwischen Schrift und Hintergrund verwendet. Für Fließtext gilt hierbei ein Kontrastverhältnis von 4,5:1. Für große Schriften gilt ein Kontrastverhältnis von 3:1. Generell müssen alle Inhalte auch komplett ohne Farbwahrnehmung nutzbar sein.

Beispiel von zu geringem Kontrast im Web Design
Links geht garnicht, rechts auch nicht wirklich, ist aber schon besser lesbar.

Beim Einsatz von Videos sollen alternative Möglichkeiten zur Darstellung des Contents eingefügt werden. Möglich sind Untertitel, Audiodeskriptionen oder Volltext-Alternativen für Videos. Auch Live-Videos sind davon betroffen.

Strukturelle Umsetzung

Das kennen wir bereits gut: die alt-Texte fallen in diese Kategorie. Alle relevanten Bilder der Website müssen mit einem alt-Text versehen werden. Hierbei wird beschrieben, was auf dem Bild zu sehen ist. Das gilt allerdings nicht für reine Layout-Bilder, die keinen inhaltlichen Mehrwert bieten. Dadurch entsteht eine Diskrepanz zur Suchmaschinenoptimieren, bei der wir unsere Keywords in die Alt-Texte einbringen wollen. Hierbei gilt es, den Fokus auf einen der beiden Bereiche zu legen und sich für eine Richtung zu entscheiden.

Auch alle Navigationselemente, zum Beispiel das Burger-Menü oder ein E-Mail-Icon, müssen einen alt-Text „Hauptmenü öffnen“ oder „E-Mail schreiben“ bekommen. Dadurch beschreiben wir die jeweilige Stelle, an der das Icon erscheinen würde, schriftlich und geben gleichzeitig eine Information darüber, was hier ausführbar ist: das Menü öffnen oder eine Mail schreiben.

Ein weiteres strukturelles Thema ist die grundlegende Struktur des HTML-Aufbaus. Es wird nahegelegt, Sektionen klar zu trennen und thematisch zu benennen. Haben wir zum Beispiel eine Sektion auf der Startseite, die News beinhaltet, sollte die Sektion „Aktuelle Neuigkeiten“ heißen.

Generell sollte natürlich die HTML-Struktur voll ausgenutzt werden: Strukturelemente für Listen, Überschriften etc. werden vorausgesetzt. Das hat für Screenreader einfach den Vorteil, dass diese auch als Listen erkannt und vorgelesen werden können.

Auch Links sollen mit klaren Link-Texten ausgestattet werden, die leicht verständlich und eindeutig formuliert sind.

Insgesamt ist es zudem wichtig, alle Seiteninhalte in einer sinnvollen Reihenfolge aufzubauen: Zuerst kommt das Menü, dann der Header und dann der Rest.

In Texten sollten fremdsprachliche Wörter als solche mit einem <lang>-Tag gekennzeichnet sein.

Inhaltliche Umsetzung

Inhaltlich müssen wir beachten, dass alle Navigationselemente, Überschriften und Beschriftungen eindeutig, einfach verständlich und aussagekräftig sind. Natürlich sollten auch sämtliche Fließtexte so geschrieben sein, dass diese nicht nur von Hochbegabten gelesen und verstanden werden können.

Technische Umsetzung

Ein paar technische Eigenheiten bringt das ganze auch mit sich. Texte sollen beispielsweise bezüglich des Zeilenabstands und der Textgröße skalierbar sein.

 

Großes Thema und, so denke ich, eigentlich das wichtigste: die Bedienung per Tastatureingabe muss gewährleistet sein. Man kann dadurch zum Beispiel mit der Tab-Taste durch die Seite scrollen und immer zum nächsten Textabschnitt springen. Solche Tastaturbefehle sollen umfassend möglich sein. Dabei soll auch immer ein Fokus der gegenwärtigen Auswahl (wo bin ich?) sichtbar gemacht werden. Zu vermeiden sind dabei Tastaturfallen, in denen man hängen bleibt und nicht weiternavigieren kann. Auch beim weiter-tabben und Verändern des Fokus soll der Kontext nicht abrupt verändert werden. Ich darf also nicht erst über die größte Hunderasse der Welt lesen und im nächsten Tab plötzlich über Mozzarellakäse.

Alle bewegten Inhalte sollen abschaltbar bzw. anhaltbar sein.

Formulare müssen zudem ausreichend erklärt werden: welches Feld ist für welche Eingabe gedacht? Am besten gibt man hier einen Platzhaltertext aus, der genau zeigt, wie die richtige Eingabe aussieht.

Falls Fehler passieren sollten, muss dem Nutzer geholfen werden. Beispiel hierfür sind 404-Seiten, die direkt wieder zurückleiten oder sonst irgendwie weiterhelfen.

Wie das Web Design von der Umsetzung von Barrierefreiheit profitiert

Klar, man ist manchmal vom eigenen Design so überzeugt, dass man ungern davon abweicht, nur weil es nicht barrierefrei ist. Aber mittlerweile denke ich, kann man daran ableiten, dass das Web Design dann eben nicht gut funktioniert. Es sieht vielleicht gut aus, aber nicht für jeden. Wenn man beispielsweise ein richtig geniales Card-Design abgeliefert hat, das weiße Schrift auf einem supermodernen, quietschgelben Verlauf beinhaltet und das ganze mit Ach und Krach grade noch zu lesen ist, dann funktioniert das einfach nicht. Das liegt aber an der schlechten Lesbarkeit für den Normalo-User, nicht am Thema Barrierefreiheit.

Auch die Abläufe der User-Experience (UX) können durch das Thema Barrierefreiheit nochmals hinterfragt werden. Ist meine Navigation wirklich verständlich genug? Sind die Link-Texte eindeutig genug? Sehe ich die UI-Elemente, auf die es ankommt, auf Anhieb oder komtm es zur Desorientierung für die User?

Gleiches lässt sich auch bei den strukturellen Anforderungen sagen: wenn Screenreader die HTML-Struktur unserer Website nicht richtig lesen können, dann sind diese wohl nicht optimal programmiert.

Ich würde sagen, dass viele dieser Punkte durchaus sinnvoll für jede Website sind, ungeachtet ob man jetzt voll barrierefrei sein möchte oder nicht. Einige Punkte kann man ja auch ignorieren, man braucht schließlich nicht alle Punkte im BITV-Test, falls man auf diesen angewiesen ist.

Kreative Ideen zur Umsetzung der Barrierefreiheit

Das ganze Thema Barrierefreiheit bringt natürlich auch viele neue Ideen auf den Weg, wie mit dem Thema auf Websites umgegangen werden kann.

Videos auf Gebärdensprache

Viele Museen setzen beispielsweise auf kurze Videos auf Gebärdensprache, um eine Einleitung zu allen zentralen Informationen zu bieten. Ein Beispiel findet ihr beim Museumsfernsehen.

Voice UI zur Steuerung im Web

In unserem Artikel 5 Web Design Trends 2020 – ein Recap hatten wir das Thema bereits kurz angerissen. Per Voice UI könnten Bedienfunktionen von Webseiten barrierefrei zur Verfügung gestellt werden. Ein ganz einfaches Beispiel, das auch Google benutzt, ist die Volltextsuche per Sprachsteuerung.

Fazit

Barrierefreies Web Design bringt viele Anstrengungen mit sich, die man ohne das Thema nicht hätte. Allerdings können wir das Web Design verlässlicher machen und grundlegend verbessern. Dadurch entsteht zwangsläufig ein insgesamt besseres Design.

Fassen wir mal zusammen: Diese Elemente können durch den Check zur Barrierefreiheit im Web Design verbessert werden:

Neueste Artikel
Kommentare

Schreibe einen Kommentar

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