Top!
Hello
Angetrieben durch die Digitalisierung verlagert sich ein immer größer werdender Teil des Alltags in die Welt vor den Bildschirmen. Was für Menschen mit Einschränkungen eigentlich ein Vorteil sein sollte, wird dabei häufig aufgrund von Barrieren zum Nachteil.
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.
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).
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.
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.
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.
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.
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.
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.
