Werbe- oder Affiliate-Links in meinem Blog sind am Sternchen (*) zu erkennen. Für Werbe-Links zahlt der Händler ggf. eine Provision. Für dich ändert sich am Preis nichts. Weitere Infos findest du hier. |
Viele Webdesigner berücksichtigen bei der Website-Gestaltung oft nicht die Barrierefreiheit des neuen Internetauftritts.
Was auch nicht wirklich verpflichtend ist, denn private und kommerzielle Websites müssen sich nicht an die Barrierefreie Informationstechnik-Verordnung (BITV) halten, im Gegensatz zu den öffentlich zugänglichen Internetangeboten von Behörden der Bundesverwaltung.
Unter barrierefreien Internetseiten sind Websites zu verstehen, die ihre digitalen Inhalte auch Menschen mit Behinderungen zugänglich machen.
Folgende Behinderungen wirken sich nachteilig auf die übliche Nutzung des Internets aus:
- Blindheit
- Starke Sehbehinderung
- Farbfehlsichtigkeit
- Gehörlosigkeit
- Schwerhörigkeit
- Körperbehinderung im Bereich der Hände
- Kognitive Beeinträchtigung
Websites ohne Barrierefreiheit machen es Menschen mit Behinderung nicht leicht, alle Inhalte, seien es nun Texte, Grafiken, PDFs, Podcasts oder Videos, abrufen oder verstehen zu können.
Welche Barrieren existieren auf Websites?
Schwacher Farbkontrast
Falls Informationen über unterschiedliche Farben mitgeteilt werden, kann es vorkommen, dass für die Darstellung zu schwache Farbkontraste verwendet werden. Dadurch können Menschen mit einer Farbfehlsichtigkeit diese Information nicht wahrnehmen.
So nehmen z. B. Menschen mit einer Rot-Grün-Schwäche ein rotes Detail auf einem Bild mit einem grünen Hintergrund – je nach Detaildarstellung – so gut wie überhaupt nicht wahr.
Keine Textalternativen
Bilder/Fotos oder Videos enthalten in den meisten Fällen wichtige grafische Informationen, die von blinden oder sehbehinderten Menschen nicht erkannt werden können.
Das gleiche gilt für Audio-Dateien, deren Informationen von schwerhörigen oder gehörlosen Menschen nicht erfasst werden.
Momentan gibt es noch keine unterstützende Technologie, der es möglich ist, Bilder oder (Audio-)Töne in Text umzuwandeln.
Keine Skalierbarkeit
Stark sehbehinderte Menschen können Inhalte auf dem Bildschirm oft nur erkennen, wenn sie stark vergrößert werden. Elemente oder Inhalte, die sich nicht heran zoomen lassen, werden von diesem Personenkreis kaum wahrgenommen.
Fehlende Tastaturbedienung
Interaktive Elemente oder dynamische Navigationen, die sich nur mit der Maus optimal bedienen lassen, sind für Menschen mit motorischen Einschränkungen oder Blinde oft nicht zugänglich, da diese Personengruppe keine Maus als Steuerungs- und Bedienungswerkzeug verwenden kann.
Keine Semantik
Ebenfalls eine wesentliche Barriere auf Websites ist die fehlende Semantik von Informationen. So werden Überschriften recht häufig nicht als solche ausgezeichnet oder informationshaltige Bilder werden ohne Alternativtext in die Webseite eingebunden.
Da stark sehbehinderte oder blinde Menschen für das “Lesen” von Internetseiten einen Screenreader einsetzen, kann dieser bei falschen bzw. fehlenden Auszeichnungen keinen semantischen Zusammenhang übermitteln, was zu einem entscheidenden Informationsverlust führt.
Komplexe Inhalte
Menschen mit einer kognitiven Behinderung, aber auch gehörlose Menschen haben Schwierigkeiten beim Verstehen von komplexen Inhalten. Zu komplexen Inhalten gehören u. a. lange, verschachtelte Sätze, mit Informationen überfrachtete Websites und auch komplexe Interaktionen.
So beseitigst du die wichtigsten Barrieren auf deiner Website
Die meisten der oben genannten Barrieren kannst du recht schnell beseitigen, ob du nun eine kostenlose Homepage mit einem Webbaukasten oder mit dem Content-Management-System WordPress erstellt hast.
Als Beispiel sei hier der Homepagebaukasten von Wix genannt, mit dem du die allermeisten Barrieren beseitigen kannst.
Bilder mit Alt-Texten:
So lassen sich Bilder barrierefrei in die Website einbinden, indem du den Grafiken oder Fotos einen Alt-Text hinzufügst. Ein Screenreader wird diesen Text dann vorlesen, sodass der sehbehinderte oder blinde Websitebesucher weiß, welche Informationen mit dem jeweiligen Bild, das er nicht sehen kann, verbunden sind.
Wenn du bei Wix ein Bild in die Website einfügst, findest du die Option “Alt-Text” unter dem Punkt Einstellungen. Die Bildbeschreibung sollte das eingefügte Bild knapp und verständlich erläutern.
Screenshot: Alt-Text bei Bildern im Homepagebaukasten von Wix einfügen
Texte semantisch gliedern:
Damit für den Screenreader deutlich wird, was Fließtext und was Überschriften sind, solltest du den Überschriften ein fest definiertes Überschriftenformat zuweisen. In HTML gibt es sechs Formate, von H1 bis H6. Jede Inhaltsseite sollte nur eine H1-Überschrift besitzen, alle anderen Formate können mehrfach vorkommen.
In Wix klickst du dabei auf das zu formatierende Textelement und dann auf Text bearbeiten. In den sich öffnenden Einstellungen wählst du dann das jeweilige Überschriftenformat aus.
Screenshot: Überschriften-Formatierung für semantische Zuordnung in Wix
Farbkontraste barrierefrei gestalten:
Um starke Farbkontraste von Hintergründen oder Texten einzusetzen, kannst du bei Wix die Farbauswahl öffnen und einen passenden, kontraststarken Farbton auswählen.
Die Farbauswahl findest du, wenn du das zu ändernde Element anklickst und in den sich öffnenden Einstellungen auf das entsprechende Farbsymbol wie z. B. Schriftfarbe klickst. Die Wix-Farbauswahl zeigt dir unterschiedliche Farbtöne an, die du für das anzupassende Element auswählen kannst.
Die Schriftfarbe sollte sich ganz deutlich vom Websitehintergrund abheben. Das gleiche gilt auch für Icons und Buttons.
Screenshot: Farbauswahl mit unterschiedlichen Kontrasten bei Wix
Barrierefreie Tastatur und optischer Anzeiger:
Wix bietet zusätzliche barrierefreie Elemente in seinem Editor an, wie die barrierefreie Tastatur und den optischen Anzeiger.
Mit der barrierefreien Tastatur – wenn aktiviert – können deine Websitebesucher sich intuitiv mit der Tastatur durch die Website navigieren.
Wird der optische Anzeiger angeschaltet, können deine Besucher sehen, wo genau sie sich mit der Tastatur auf der Website befinden. Der aktuelle “Standort” wird mit einem blauen Rahmen gekennzeichnet.
Diese Funktionen findest du in Wix unter dem Punkt “Website” und dem sich dann öffnenden Untermenü bei Barrierefreiheit (siehe Screenshot).
Was noch für die Barrierefreiheit einer Website wichtig ist
Verwende klare Schriftarten und große Schriftgrößen. Generell ist zu beobachten, dass in den vergangenen Jahren die Schriftgröße von Überschriften und Fließtext auf Websites deutlich angestiegen ist. So fällt es auch Websitebesuchern ohne Sehbehinderung leicht, Texte online zu lesen.
Versuche, deine Texte leicht verständlich zu schreiben, ohne allzu komplexe und ellenlange Sätze. Deine Website sollte darüber hinaus klar und übersichtlich strukturiert sein, sodass man sich auf ihr schnell zurechtfindet und die gewünschten Infos schnell auffindbar sind.
Vermeide die automatische Wiedergabe von Videos und Musik beim Laden der Seite. Screenreader haben Probleme damit, die Medien richtig zu interpretieren. Außerdem kann der Ton des Videos oder des Podcasts die Sprache des Screenreaders überlagern.
Vermeide allzu viele Animationen auf der Website. Auch das kann dem User Probleme bereiten, vor allem wenn er für die Seitennavigation die Tastatur und den Screenreader einsetzt.
Achte darauf, dass deine Website-Elemente, und damit sind ganz besonders Grafiken und Fotos gemeint, sich heran zoomen lassen und dabei immer noch eine gute Bildqualität bieten.
Falls du Videos und Audio-Dateien in deine Website einbindest, sollest du noch einen Alternativ-Text zu diesen Medien einfügen, damit gehörlose Menschen wissen, welche Informationen mit diesen Dateien übermittelt werden.
Wenn du die hier genannten Punkte bei deiner Website umsetzt, hast du schon sehr viel getan, um deinen Internetauftritt sowie deine Inhalte auch für Menschen mit Behinderung zugänglich zu machen.
