7,8 Millionen schwerbehinderte Menschen leben in Deutschland – das sind fast 10 Prozent der Bevölkerung. Die Zahl der Menschen mit leichteren Behinderungen oder vorübergehenden Einschränkungen dürfte um ein Vielfaches höher liegen. Sie alle wollen genauso barrierefrei Webseiten besuchen und im Internet einkaufen, wie Personen ohne Einschränkungen. Doch blinde, gehörlose, kognitiv oder motorisch eingeschränkte Menschen haben es im Internet oft schwer, weil Webseiten nicht barrierefrei gestaltet sind. Zu kleine Schrift, zu geringer Farbkontrast oder nicht anklickbare Cookie-Banner: Viele Webseiten und Online-Shops sind immer noch so aufgebaut, dass sie zum Beispiel für Menschen mit Sehbehinderungen kaum nutzbar sind. Dabei ist es ganz einfach, Websites barrierefrei zu machen. Unsere 10-Punkte-Checkliste zeigt Ihnen, worauf Sie für eine Barrierefreiheit achten müssen.
Wie Unternehmen von barrierefreiem Webdesign profitieren
Barrieren im Internet behindern nicht nur Menschen mit Beeinträchtigung. Wenn Websites schlecht designt und damit nicht barrierefrei sind, leiden alle Nutzer – und auch die Performance. Es geht ja nicht allein darum, dass potenzielle Kunden mit Schädigung oder Behinderung einfach ausgeschlossen werden, weil sie beispielsweise an einem Bestellfeld im Web scheitern. Unzureichende Tastaturnavigation, Bilder ohne Alternativtexte, miserable Farbkontraste und eine generelle Vernachlässigung der Usability treffen jeden. Mangelnde digitale Barrierefreiheit geht zu Lasten der User Experience (UX), schafft Distanz, bremst Internetnutzer aus und lässt sie kein zweites Mal auf die Seite kommen. Hier drei Beispiele für typische UX-Fehler auf Webseiten:
Textgestaltung:
Fließtexte und Bedienelemente in winzigen, nicht skalierbaren Schriftgrößen sind nicht nur für Sehbehinderte störend. Kundinnen und Kunden im Web leiden generell, beispielsweise auf kleinen Displays oder wenn sie den Bildschirm aus größerer Entfernung betrachten. Zoomen hilft hier nur bedingt, da die Zeilen dann nicht mehr vollständig auf dem Display erscheinen. Barrierefreiheit heißt hier, eine flexible Schriftskalierung einzubauen.
Bilder und Links:
Bildunterschriften haben für sehende Menschen eine hohe Eyecatcher-Wirkung. Sie lenken den Blick fast ebenso stark wie die Überschrift. Für sehbehinderte Menschen ist der Alternativtext – kurz Alt-Text – die Rettung, um Fotos, Grafiken und Illustrationen zu erfassen, obwohl sie das Bild als solches nicht erkennen. Der Alt-Text dient als Bildbeschriftung, wird aber im Gegensatz zu einer klassischen Bildunterschrift nur angezeigt, wenn der Nutzer die Bilder deaktiviert oder der Browser sie gerade nicht laden kann. Assistenzsysteme wie Screenreader lesen den Alt-Text vor oder geben ihn auf einer Braille-Zeile aus. Ähnliches gilt für Links: Lautet der Linktext etwa nur „Hier klicken“, können die Hilfssysteme daraus keine Information erkennen – außer, dass es sich um einen Link handelt. Linktexte sollten daher selbsterklärend sein.
Schaltflächen und Navigation:
Liegen Buttons und Menüpunkte zu dicht beieinander, verzweifeln Kunden am Touchscreen des Smartphones ebenso wie Menschen mit motorischen Einschränkungen.
Die Beispiele zeigen: Im digitalen Zeitalter sollten Sie sicherstellen, dass alle Besucher und Kunden problemlos auf Ihre Website, Apps und Online-Informationen zugreifen können. Dazu müssen sie eindeutig sichtbar, einfach zu bedienen, verständlich aufgebaut und fehlertolerant sein. Google belohnt solche Seiten mit einem besseren SEO-Ranking. Die folgende Checkliste hilft Unternehmen, Prioritäten für eine barrierefreie Website zu setzen.
Tipp: Mit einer inklusiven Website stärken Sie die digitale Teilhabe und erweitern Ihre Zielgruppe. Wünschen Sie persönliche Hilfe bei der Umstellung Ihrer Website, beraten wir Sie gerne! So erreicht Ihr Unternehmen eine breite Öffentlichkeit.
1. Richtlinien: Besteht eine Pflicht für barrierefreie Web-Angebote?
Für Behörden und andere öffentliche Stellen gibt es eine Barrierefreiheitspflicht: Sie müssen ihre Websites, Online-Broschüren und Informationen im Internet barrierefrei zugänglich machen. Auch Unternehmen mit mehr als zehn Beschäftigten oder einem Jahresumsatz beziehungsweise einer Jahresbilanzsumme von mehr als zwei Millionen Euro sind verpflichtet, Ihre Website barrierefrei und damit inklusiv zu gestalten. Machen Sie sich mit der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) und den Web Content Accessibility Guidelines 2.1 (WCAG 2.1, Nachfolger der WCAG) vertraut. Diese Richtlinien legen die Standards für Accessibility fest. Zu BITV und WCAG kommt das ab 2025 gültige Barrierefreiheitsstärkungsgesetz (BFSG) hinzu, das die Vorgaben des European Accessibility Act (EAA, EU-Richtlinie) hierzulande umsetzt.
2. Bestandsanalyse Ihrer Website
Analysieren Sie Ihre bestehende Website auf Barrieren. Achten Sie dabei auch auf die Tastaturbedienbarkeit, die Struktur des Codes und die Semantik wie die richtige Beschriftung von Überschriften, Listen und Formularen. Führen Sie Tests mit Mitarbeitern oder Freunden durch, die in die Rolle eines Nutzers mit Behinderung schlüpfen.
Nutzen Sie auch Software wie das kostenlose WAVE (Web Accessibility Evaluation Tool). Es überprüft Ihre Website auf die Einhaltung der allgemeinen Zugänglichkeitsempfehlungen und zeigt Probleme direkt im Seitenlayout an. So erfahren Sie, welche Inhalte und Funktionen bereits barrierefrei zugänglich sind und wo Optimierungsbedarf besteht. Nutzen Sie das WAVE-Tool auch, um die Kompatibilität mit Screenreadern zu testen. Dabei ist es hilfreich, wenn Sie sich bereits mit dem Thema Barrierefreiheit beschäftigt haben – zum Beispiel durch diesen Blogbeitrag. So verstehen Sie, was getestet wird und auch warum.
Sie haben keine Defizite in Sachen barrierefreies Webdesign gefunden? Herzlichen Glückwunsch – gehen Sie trotzdem auf Nummer sicher und folgen Sie unserer Checkliste.
Tipp: Ein einmaliger Test reicht nicht aus, denn die Anforderungen an die digitale Barrierefreiheit ändern sich. „Es gibt zwar eine Reihe von Kriterien, die Sie mit Hilfe von Prüfwerkzeugen automatisch oder zumindest halbautomatisch testen können“, sagt die Landesfachstelle für Barrierefreiheit bei der Unfallkasse Sachsen-Anhalt, ein „großer Teil der Kriterien muss jedoch manuell von einem Menschen beurteilt werden“ – und die Kriterien ändern sich. Um Barrierefreiheit aufrechtzuerhalten und inklusive Web-Angebote sicherzustellen, sind regelmäßige Wiederholungstests notwendig.
3. Website responsiv gestalten
Responsive Design stellt sicher, dass sich die Darstellung der Website automatisch an das jeweilige Endgerät anpasst, beispielsweise an Desktop-Computer, Tablets oder Smartphones. Durch die automatische Optimierung für das jeweilige Gerät können auch Menschen mit Sehbehinderungen oder motorischen Einschränkungen Ihre Website nutzen.
Tipp: Screenreader haben Probleme damit, dynamisch hinzugefügte Inhalte auf Webseiten zu erkennen. Verwenden Sie ARIA-Tags (Accessible Rich Internet Applications), um Ihre Website so aufzubauen, dass Screenreader die Informationen auslesen können.
4. Tastaturbedienbarkeit sicherstellen
Optimieren Sie Ihre Website im Hinblick auf die Screenreader-Kompatibilität so, dass sie auch ohne Maus oder Touchscreen vollständig bedienbar ist. Alle Funktionen und interaktiven Elemente wie Menüs, Formulare und Links sollten auch durch Tastatureingaben erreichbar sein.
5. Cookies-Banner zugänglich machen
Viele Nutzer empfinden die allgegenwärtigen Cookie-Banner als lästig. Für Menschen mit Sehschwäche oder körperlichen Einschränkungen können sie zu einem echten Problem werden. Denn oft sind die Banner nicht barrierefrei gestaltet und daher weder mit Screenreadern noch mit der Tastatur bedienbar. Ärger machen vor allem Overlays oder dynamische Dialoge, die für Screenreader unsichtbar sind. Einfache Lösung: Platzieren Sie das Cookie-Banner an einer festen Stelle, dann ist es immer sichtbar und anklickbar.
6. Erstellen Sie aussagekräftige Alternativtexte
Ein Alt-Text (alternativer Text) beschreibt ein Bild auf einer Website. Er befindet sich im HTML-Code und ist normalerweise auf der Seite selbst nicht sichtbar. Screenreader nutzen die Alt-Texte, damit blinde und sehbehinderte Menschen Bilder durch die Beschreibungen „sehen“ können. Dazu wird der Alt-Text in ein Audioformat umgewandelt. Fehlt das Alt-Tag, gibt es keine Möglichkeit, dem Besucher den Inhalt des Bildes mitzuteilen. Stattdessen wird nur der – oft schwer verständliche – Dateiname vorgelesen. Auch Suchmaschinen werten Alt-Texte aus und beziehen sie in ihr Ranking mit ein. Grund genug, alle (wirklich alle) Bildelemente auf Ihrer Website mit informativen Alternativtexten zu versehen.
7. Schriftgröße und ausreichender Kontrast zwischen Vorder- und Hintergrundfarbe
Texte auf Webseiten müssen vergrößerbar sein, damit sie für sehbehinderte und blinde Nutzer zugänglich sind. Die Barrierefreie-Informationstechnik-Verordnung BITV 2.0 und die WCAG fordern daher, dass barrierefreie Websites die Textvergrößerung unterstützen. Farben mit geringem Kontrast wie hellgrau auf weiß sind schwer zu erkennen und nicht barrierefrei. Mit dem kostenlosen Contrast-Checker finden Sie heraus, ob die Kontraste auf Ihrer Website ausreichend sind.
Tipp: Denken Sie an Farbfehlsichtigkeiten wie die Rot-Grün-Schwäche und nutzen Sie nicht nur Farben zur Differenzierung, sondern auch Symbole oder Text.
8. Machen Sie Formulare barrierefrei
Formulare dienen der Interaktion des Nutzers mit einer Website. Sie sollten daher so gestaltet sein, dass sie von jedem Besucher bedient werden können. Achten Sie darauf, dass ein- und mehrzeilige Eingabefelder, Auswahllisten, Checkboxen und Schaltflächen zum Absenden und Abbrechen eindeutig beschriftet und Screenreader-kompatibel sind. Empfehlenswert (nicht nur) für barrierefreie Webinhalte: Bieten Sie Hilfetexte zum Ausfüllen an.
9. Textalternativen für Multimedia-Inhalte anbieten
Stellen Sie sicher, dass Multimedia-Inhalte wie Videos und Audio-Streams für alle nutzbar sind, indem Sie Untertitel, Transkripte und Audiodeskriptionen bereitstellen. Wenn das nicht machbar ist, bieten Sie Textzusammenfassungen an, damit jeder Zugang zu den Informationen hat.
10. Benutzen Sie eine verständliche Sprache
Jeder besucht gerne Websites, die leicht verständlich sind. Formulieren Sie deshalb kurze Sätze mit einfachem Satzbau. Vermeiden Sie Fremdwörter und Fachjargon oder erklären Sie sie. Absolute No-Gos sind lange Schachtelsätze und unklare Abkürzungen.
Hinterlasse einen Kommentar