Wer profitiert von Barrierefreiheit?
Für Menschen mit Einschränkungen ist Barrierefreiheit unabdingbar, um Angebote im
Internet nutzen zu können. Ob Menschen mit Sehbeeinträchtigungen, motorischen
Einschränkungen oder Schwerhörige bzw. Gehörlose: Sie alle haben je nach Art der
Einschränkung unterschiedliche Anforderungen und Bedürfnisse, die berücksichtigt werden
sollten. Doch nicht nur Menschen mit permanenten Einschränkungen profitieren davon. Auch
im Falle von situativen oder temporären Einschränkungen – z. B. starke
Sonneneinstrahlung, vergessene Kopfhörer oder ein gebrochener Arm – erleichtert
Barrierefreiheit die Benutzung eines Webangebots. Zusätzlich geht sie einher mit guter
Usability sowie User Experience und bringt daher auch Vorteile für Menschen ohne
Einschränkungen mit sich.
Wie wird mein Webangebot barrierefrei?
Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit: die vier Prinzipien der
Barrierefreiheit sollte man bei der Umsetzung barrierefreier Webangebote
berücksichtigen. Um diese Prinzipien einzuhalten, gibt es verschiedene Kriterien, die
als Orientierung herangezogen werden können. Eine kleine Auswahl wird im Folgenden
vorgestellt. Wer sich genauer informieren möchte, findet eine ausführliche Auflistung
der Kriterien in den WCAG (Web Content Accessibility Guidelines) und weitere
Informationen in der BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung).
Tastaturbedienbarkeit
Ein wichtiger Punkt im Hinblick auf die Gestaltung barrierefreier Webangebote ist die
Tastaturbedienbarkeit. Besonders für Blinde oder Menschen mit motorischen
Einschränkungen ist es wichtig, dass alle interaktiven Elemente per Tastatur (Tabulator-
bzw. Pfeiltasten) erreicht werden können. Das fokussierte Element sollte dabei deutlich
gekennzeichnet sein, z. B. durch eine Umrandung. Zusätzlich sollte auf eine schlüssige
und erwartungskonforme Reihenfolge, in der die Elemente fokussiert werden, geachtet
werden.
Hohe Kontraste
Um Menschen mit Seheinschränkungen den Zugang zu Inhalten zu erleichtern, sollten hohe
Kontraste zwischen Vorder- und Hintergrundfarben verwendet werden. Die WCAG liefert
Vorgaben dazu, wann ein Kontrast ausreichend ist und wann nicht. Prüfen kann man das
Kontrastverhältnis z. B. mit dem Colour Contrast Analyser.
Abbildung 1: Der Colour Contrast Analyser zeigt, dass der
Farbkontrast zwischen blauem Hintergrund und weißer Schrift für großen Text in der
Konformitätsstufe AAA ausreichend ist.
Darstellung im Hochkontrastmodus
Windows-Betriebssysteme stellen einen Hochkontrastmodus zur Verfügung, der von Menschen
mit Seheinschränkungen verwendet werden kann. Dabei werden die Farben des ursprünglichen
Designs auf eines der von Windows bereitgestellten Farbschemata umgestellt.
Beispielsweise erhält die Seite dadurch einen schwarzen Hintergrund, Text wird weiß und
Links werden gelb. Zu prüfen ist hier beispielsweise, ob Logos oder Icons erkennbar und
Fokusmarkierungen sichtbar sind.
Skalierbarkeit
Für Menschen, die Inhalte einer Webseite vergrößern müssen, um diese wahrnehmen zu
können, ist eine angemessene Skalierbarkeit unerlässlich. Texte sollten nicht
abgeschnitten und ungewolltes horizontales Scrollen vermieden werden. Legt man bei der
Umsetzung eines Webangebots Wert auf Responsiveness, ist dieser Punkt i. d. R.
automatisch erfüllt.
Korrekte Syntax und Semantik
Menschen mit Beeinträchtigungen setzen meist assistive Technologien bei der Nutzung von
Webangeboten ein. Diese interpretieren den Code und stellen die Inhalte in einer für die
Person verständlichen Weise dar. Beispiel hierfür ist ein Screenreader, der das
Webangebot mittels Sprachausgabe oder Braillezeile ausgibt und somit für die nutzende
Person wahrnehmbar macht. Damit der Screenreader die Inhalte richtig interpretieren
kann, ist die Verwendung einer korrekten Syntax und Semantik erforderlich.
Beispielsweise sollten für einen Button, eine Liste oder eine Navigation die dafür
vorgesehenen HTML-Tags verwendet werden.
Negativbeispiel:
<div class=„button-primary“>Test starten</div>
Positivbeispiel:
<button type=„button“ class=„button-primary“>Test starten</button>
Außerdem benötigen inhaltlich relevante Bilder und Grafiken einen aussagekräftigen
Alternativtext.
Beispiel:
<img src="schaukel.jpg" alt="Mädchen sitzt auf Schaukel">
Eine korrekte Überschriftenhierarchie ist gleichermaßen wichtig: Jede Seite sollte nur eine <h1>-Überschrift
beinhalten. Auf eine <h1> folgt eine <h2>, gefolgt von einer <h3> etc. Es sollte kein
Level übersprungen werden.
Negativbeispiel:
<h2></h2>
<h4></h4>
<h4></h4>
Positivbeispiel:
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2>
<h3></h3>
Mit Browser-Extensions, wie Google Lighthouse, Axe DevTools oder WAVE
können Kriterien wie die HTML-Struktur überprüft werden. Ob das
Webangebot für assistive Technologien optimiert ist, kann z. B. mit den
Screenreadern NVDA (Windows) oder VoiceOver (Mac) getestet werden.
Fazit
Wie die oben beschriebenen Punkte zeigen, können viele Barrieren im eigenen Webangebot
bereits mit geringem Aufwand beseitigt werden. Damit ermöglicht man nicht nur
Zugänglichkeit für Menschen mit Einschränkungen, sondern auch eine Verbesserung der User
Experience. Es empfiehlt sich also, bereits während der Entwicklung auf Barrierefreiheit
zu achten, um somit ein inklusives Webangebot zu schaffen.
Referenzen und hilfreiche Links