Die 7 Säulen des barrierefreien Webdesigns

Barrierefreiheit umfasst zahlreiche unterschiedliche Aspekte des Webdesigns. Wie können Frontend-Entwickler oder Screendesigner, die womöglich zum ersten Mal vor den Anforderungen der Barrierefreiheit stehen, dennoch einen barrierefreien Auftritt für eine möglichst große Zielgruppe schaffen?

Checklisten?

Es ist verständlich, dass Designer und Entwickler nach Checklisten verlangen. Checklisten können jedoch nur eingeschränkt zur Bewertung der Barrierefreiheit genutzt werden, denn die vielfältigen Arbeitsweisen von Nutzern mit Behinderungen sind beim Einstieg ins Thema oft nicht bekannt. Da Checklisten das Hintergrundwissen meist nicht mitliefern und außerdem viele (nicht alle) Aspekte der Barrierefreiheit im Kontext der Webseite beurteilt werden müssen, sind Checklisten zur Überprüfung der Barrierefreiheit eher für diejenigen geeignet, die mit der Materie bereits vertraut sind.

Werkzeuge?

Der Ruf nach Werkzeugen, die Barrierefreiheit automatisch erzeugen, ist ebenso verständlich wie der Wunsch nach Checklisten. Werkzeuge können Barrierefreiheit nicht erzeugen. Beispiele sind:

• Werkzeuge zur Überprüfung der Barrierefreiheit gibt es viele. Die automatischen Werkzeuge können bestenfalls 30% der Anforderungen zuverlässig prüfen. Es entsteht bei bestandener Prüfung der Eindruck, dass alles in Ordnung ist. Tatsächlich sind die meisten Anforderungen gar nicht geprüft worden.
• Seit einigen Jahren bieten verschiedene Firmen Accessibility-Overlays für bestehende Webseiten. Das JavaScript im Hintergrund analysiert die Seite und bietet verschiedene Korrekturmaßnahmen an. Letztlich stoßen die Overlays auf die gleichen Probleme wie die automatischen Prüfwerkzeuge.

Einstiegsthemen

Im Folgenden werden die sieben Säulen der digitalen Barrierefreiheit vorgestellt. Mit dem Verständnis dieser Themenkomplexe sind zumindest die groben Anforderungen der Barrierefreiheit umsetzbar. Die zugehörigen Fragestellungen reichen aber mit Sicherheit nicht aus, um die Konformität zu den Web Content Accessibility Guidelines (WCAG) 2.2 vollständig zu erreichen.

Alternativen für Grafiken und Multimedia

Webseiten werden nicht nur am Bildschirm dargestellt. Wenn zum Beispiel ein Screenreader eingesetzt wird, sind grafische Inhalte ohne geeignete Textalternativen nicht verständlich. Für Multimedia sind die alternativen Inhalte etwas komplexer umzusetzen als bei Grafiken: Insbesondere müssen Untertitel und Audiodeskription berücksichtigt werden.

Folgende Fragen müssen behandelt werden, wenn Grafiken und/oder Multimedia auf einer Webseite vorkommen:

• Wenn Grafiken ausgeschaltet werden, kann die Seite dann im gleichen Umfang genutzt werden wie bei eingeschalteten Grafiken?
• Wenn Multimedia eingesetzt wird, stehen die Audioinhalte in Textform zur Verfügung? Sind diese Texte für die Audioinhalte als Untertitel mit der Multimedia synchronisiert?

Bei Multimedia geht es nicht alleine um Nutzende, die den Inhalt nicht hören können, sondern auch um blinde Nutzende, die zum Beispiel die Inhalte von Screencasts nicht wahrnehmen können und auf Textalternativen oder synchronisierte Audiodeskription angewiesen sind.

Kontraste und Farben

Die Wahrnehmung am Bildschirm kann durch ein vermindertes Sehvermögen stark beeinträchtigt sein. Bei der Barrierefreiheit der visuellen Präsentation sind insbesondere folgende Fragen relevant:

• Wenn in einem beliebigen Browser ein eigenes Farbschema eingestellt wird, sind alle erforderlichen Informationen erkennbar?
• Genügen alle Farbkombinationen den Anforderungen an ausreichende Kontrastverhältnisse?

Vergrößerbarkeit

Sind Nutzende auf stark vergrößerte Schrift angewiesen, so werden sie ein Vergrößerungssystem einsetzen. Wenn jedoch "nur" eine leichte (bis zu zweifache) Vergrößerung erforderlich ist, dann benötigen sie vergrößerbare Texte mit flexiblem Layout.

Die Seitenzoom-Funktionen der Browser dürfen keine "Unfälle" bewirken. Auch wenn der Seitenzoom gut funktioniert, so reicht sie nicht immer aus:

• Können Nutzende die voreingestellte Schriftgröße aller Texte über die Schriftvergrößerung vergrößern?
• Ist bei geringer Bildschirmauflösung und/oder Seitenzoom jeder Textblock vollständig und ohne horizontales Scrollen lesbar?

Linearisierbarkeit

Am Bildschirm sind einzelne Seitenregionen wie Kopfzeile, Navigation und Inhalt meist klar durch Position, Farbe und andere Gestaltungsmerkmale unterscheidbar, in linearer Software wie einer Sprachausgabe wird der Inhalt sequenziell aufbereitet. Wenn also im Quelltext der Text erst nach einer Kopfzeile und einer umfangreichen Navigation im Quellcode steht, dann werden sie bei linearer Nutzung erst zum Schluss ausgelesen. Diesem Problem entgegnen Screenreader, Vergrößerungssysteme, Browser und andere Hilfsmittel durch erweiterte Funktionen zum Springen innerhalb einer Seite und ermöglichen dadurch eine strukturelle Navigation mit Tastaturkürzeln.

Obwohl ein strukturierter Seitenaufbau mit Überschriften, Listen und Absätzen Voraussetzung einer barrierefreien Nutzung ist, muss auch die Reihenfolge der Inhalte in sich schlüssig sein. Deshalb müssen die folgenden beiden Fragen positiv beantwortet werden:

• Ist bei ausgeschaltetem Layout (CSS und Tabellen) jede Webseite genauso nachvollziehbar wie bei eingeschaltetem Layout?
• Ist eine strukturelle Navigation, vor allem bei umfangreicheren Seiten, möglich, damit einzelne Seitenregionen gezielt angesteuert werden können?

Fokus-Management und interaktive Inhalte

Die Geräteunabhängigkeit ist einer der Hauptziele im barrierefreien Webdesign. Eng verknüpft mit der Linearisierbarkeit spielt dabei die Bedienbarkeit des Webangebots mit der Tastatur oder mit Schaltersteurungen eine wichtige Rolle. Kritisch für den barrierefreien Zugang können vor allem interaktive Inhalte sein.

Auch wenn die Barrierefreiheit von Widgets eine echte Fleißaufgabe im barrierefreien Webdesign sein kann, muss man zumindest die folgenden Fragen mit "Ja" beantworten können:

• Ist mit der Tastatur eine gleichwertige Bedienung des Inhalts wie mit der Maus möglich?
• Sind alle Inhalte, die nicht nativ mit HTML abgebildet werden können, mit den passenden ARIA-Rollen, -Zuständen und -Eigenschaften ergänzt?

Verständlichkeit, Navigation und Orientierung

Barrierefreiheit umfasst viele Aspekte der Verständlichkeit, Navigation und Orientierung und zwar aus der Sichtweise verschiedener Nutzergruppen. Für einen ersten Eindruck sind folgende Fragen hilfreich:

• Sind die Inhalte allgemein verständlich?
• Werden für Formulareingaben Anweisungen zur Fehlervermeidung und eine Fehlerbehandlung geboten?
• Können Inhalte auf unterschiedlichem Wege zum Beispiel über eine Suchfunktion und über eine Übersicht) erreicht werden, um unterschiedliche Fähigkeiten der Nutzer zu berücksichtigen?
• Ist die Sprache des Inhalts richtig angegeben, damit Sprachausgaben sie korrekt vorlesen können?

Außerdem muss die Frage nach der Bereitstellung von Inhalten in Leichter Sprache und Deutscher Gebärdensprache gestellt werden. Diese Anforderung ergibt sich aus der Definition der Barrierefreiheit.

Strukturierte Inhalte

Der korrekte Einsatz von HTML-Strukturelementen ist das A und O des barrierefreien Webdesigns. HTML ist das Handwerk, das jede beteiligte Person und jede eingesetzte Software beherrschen muss, um gute Webseiten zu produzieren. Deswegen sollten zusätzlich zu den unter "Linearisierbarkeit" aufgeführten Fragen noch die folgenden gestellt werden:

• Wurde die Semantik in HTML für Überschriften, Absätze, Listen und so weiter durchgängig für alle Inhalte beachtet?
• Haben alle Formularelemente verknüpfte Beschriftungen?

Die sinnvolle Strukturierung der Inhalte ist die Grundlage für die Trennung von Inhalt (HTML), Präsentation (CSS) und Verhalten (JavaScript). Diese Trennung der verschiedenen Ebenen ist wiederum Basis für die Standardkonformität eines Webangebots und ein nachweisbares Qualitätsmerkmal der Barrierefreiheit.