• 16.02.2021
Web-Accessibility: Wie Du mit 3 einfachen Maßnahmen inklusive Webseiten gestaltest
Barrierefreiheit in den Webseiten Kontext zu übertragen fällt im ersten Moment nicht leicht. Allerdings gibt es zahlreiche Aspekte, die völlig ohne Mehraufwand dabei helfen, Deine Webseite für wirklich alle interessierte Nutzer:innen zugänglich zu machen. Du musst einfach nur an sie denken.
Warum es sich lohnt, Deine Webseite accessible zu machen, wie Du schon mit drei einfachen Maßnahmen eine grundlegend barrierearme Webseite gestaltest und warum Web-Accessibility nicht nur für die User Experience, sondern auch für die Suchmaschinenoptimierung ein großes Plus ist, erfährst Du hier.
Warum Du Web-Accessibility nicht ignorieren solltest
Accessibility (dt. Barrierefreiheit) hat sich im UX-Bereich in den letzten Jahren zu einem der Kernthemen entwickelt – und das nicht ohne Grund. Das tägliche Leben vieler Menschen ist aufgrund ihres Alters oder einer Behinderung eingeschränkt.
10,2 Mio. Menschen in Deutschland leben mit einer Einschränkung, das ist ca. jeder 8. Mensch.
Außerdem werden ca. 95% aller Behinderungen erst im Laufe des Lebens erworben.
Doch hier geht es nur um Menschen mit einer permanenten Einschränkung, unabhängig der Ausprägung dieser.
In Wirklichkeit ist die Zahl der Betroffenen sogar erheblich höher, denn Menschen mit temporären Behinderungen werden hier nicht gezählt. Was genau Du Dir unter “temporär” vorstellen kannst?
Hier ein Beispiel, wieso auch nicht-permanente Behinderungen eine Rolle spielen. Dafür wählen wir zwei mögliche Einschränkungen und beispielhaft unterschiedliche Ausprägungen:
| Einschränkung | Kurzfristig | Mittelfristig | Langfristig |
| Motorik | Ich halte mein Baby auf dem Arm. | Ich habe mir einen Arm gebrochen. | Ich habe nur einen Arm. |
| Wahrnehmung (Sehen) | Ich habe meine Brille verlegt. | Ich habe eine Bindehautentzündung. | Ich bin farbenblind. |
Alle o.g. Situationen können im entscheidenden Moment einen Lead oder eine Conversion, egal welcher Art, verhindern. Es lohnt sich also, Webseiten so nutzerfreundlich wie möglich zu gestalten und dazu gehört eben auch, dass Designer:innen und Entwickler:innen mögliche Behinderungen aller Art in ihre Überlegungen einbeziehen.
Wie wird Barrierefreiheit für das Web definiert?
Bereits 2006 wurde die UN-Konvention über die Rechte von Menschen mit Behinderung unterzeichnet. Darin wird konstatiert, dass der ungehinderte Zugang zu Information und Kommunikation (auch im Internet) für Menschen mit unterschiedlichsten Fähigkeiten ein grundlegendes Menschenrecht ist. Definiert wird Barrierefreiheit für das Web darin wie folgt:
“Das Web muss an seiner Basis so gestaltet sein, dass es für alle Menschen nutzbar ist, unabhängig von Hardware, Software, Sprache, Kultur, Ort, physischen oder kognitiven Fähigkeiten. Wenn eine Webseite dieses Ziel erfüllt, dann ist sie zugänglich für ein breitestmögliches Spektrum an Menschen mit unterschiedlichsten Fähigkeiten zu hören, zu sehen, zu verstehen oder sich zu bewegen.”
Basierend auf dieser Definition wird deutlich, dass eine gänzlich barrierefreie Webseite nur sehr schwer zu erreichen ist. Vor allem Webdesigner:innen klagen hier oft, über zu eingeschränkte Möglichkeiten. Dennoch sollte der Anspruch eine wenigstens barrierearme Webseite zu gestalten, das Mindeste sein. Warum?
📢 Die oben genannten Zielgruppen-Zahlen sind nicht einfach so zu ignorieren. Es ist nicht nur moralisch eine Pflicht diese zu beachten, sondern auch ganz banal aus Sales-Sicht.
📢 Barrierearme Webseiten bieten große Vorteile für UX und SEO.
📢 Es ist keine Rocket-Science: Schon mit einfachen Maßnahmen kannst Du Deiner Website einen kräftigen Push in Richtung Accessibility geben.
Wie? Einfach weiterlesen!
Welche Einschränkungen solltest Du besonders beachten und welche einfachen Lösungen gibt es?
Grundsätzlich sind drei Einschränkungen zu unterscheiden:
⚡ Kognitive Einschränkungen
- schlechtes Kurz- und Langzeitgedächtnis
- geringes Abstraktionsvermögen
- eingeschränktes sprachlich-verbales oder visuelles Verständnis
- eingeschränkte Fähigkeit, mit unvorhergesehen Ereignissen wie Fehlermeldungen umzugehen
- damit verbunden Schwierigkeiten bei der Entwicklung komplexer Problemlöse-Strategien
💡 Lösungen: Navigationshilfen, einfache Sätze, Textalternativen.
Breadcrumps als Navigationshilfe eignen sich gut zur Orientierung.
⚡ Motorische Einschränkungen
- eingeschränkte Bewegungsfähigkeit
- fehlende Gliedmaßen
- motorische Störungen, wie z.B. Zittern
💡 Lösungen: Alle Inhalte sind per Maus und (nicht oder) Tastatur bedienbar – unabhängig von der Software. Alle Inhalte sind sehr gut mobile optimiert.
⚡ Einschränkungen der Wahrnehmung
- Seheinschränkung / Blindheit; hierzu zählt z.B. auch eine Rot-Grün-Schwäche, ein Drehschwindel oder Kurzsichtigkeit
- Höreinschränkung / Gehörlosigkeit
💡 Lösungen: Textalternativen, Skalierungsmöglichkeiten, starke Farbkontraste, Untertitel in Videos, Audioinhalte auch als Text bereitstellen, gute technische Struktur, Animationen ausschalten können
Untertitel ermöglichen auch Gehörlosen dem Video zu folgen.
Zudem kann auch die zur Verfügung stehende Technik relevant sein: Eine Website sollte auf allen Devices (Desktop, Tablet, Smartphone) bedienbar sein und das auch unabhängig von der verwendeten Software.
Damit also jeder auf Deine Webseite zugreifen und sie nutzen kann, müssen einige wichtige Aspekte berücksichtigt werden, insbesondere beim Webdesign und bei der Programmierung.
3 einfache Tipps Deine Webseite barrierearmer zu machen
🔥 Teste die technischen Grundlagen mit einem Screenreader
Um einen Computer nutzen zu können, verwenden Sehbehinderte oft einen Screenreader. Eine solche Software gibt visuelle Inhalte wie Menüs oder Texte als Sprache oder als Blindenschrift auf einem Braille-Display aus. Die Steuerung erfolgt vollständig über die Tastatur.
Screenreader orientieren sich auf Webseiten an der Strukturierung des Codes (z.B. an der richtigen Nutzung von Überschriften H1, H2 etc.).
Übrigens werden Screenreader nicht nur von Menschen mit Sehbehinderung genutzt, auch eine Lese-Rechtschreib-Schwäche oder eingeschränktes Leseverständnis können dazu führen, dass Nutzer:innen sich Texte im Internet lieber anhören.
Wichtig: Die Ausgabe ist dabei nicht auf Fließtext beschränkt. Wiedergegeben werden alle am Bildschirm dargestellten grafischen Elemente, z.B.
- Menüs, Links und Buttons
- Grafiken, Videos, Animationen – hier werden Alternativtexte vorgelesen
- Auswahlboxen, Formulare und aktuelle Eingabeposition
💡 Good to know: Tipps für das barrierearme Einbinden von Symbolen und Bildern
|
Um herauszufinden, wie ein Screenreader Deine Seite einem Menschen mit Seheinschränkung vorliest, probierst Du es am besten einfach selbst aus. Screenreader sind in der Regel kostenfrei, wie z.B. der Screenreader NVDA.
Wenn Du das als zu aufwendig empfindest, kannst Du auch mit Accessibility-Test Browser AddOns für Entwickler arbeiten oder Du probierst es erst einmal mit der Vorlese-Funktion Deines Browsers.
| 💡 Übrigens: Suchmaschinen lieben Accessibility
Alle genannten Aspekte sind nicht nur für die Barrierearmut relevant. Es handelt sich hierbei größtenteils um ganz grundlegendes SEO-Technik-Wissen. Content wird im Web von Suchmaschinen ähnlich wahrgenommen, wie von Screenreadern: Beide können Text auswerten, Bilder oder Animationen lassen sich allerdings ohne entsprechende Bezeichnungen nicht erschließen. Web-Accessibility schafft also Vorteile für Mensch und Suchmaschine. |
🔥 Überprüfe die Farben Deines Designs mit einem Kontrast-Check
Kontraste sind für Menschen mit einer Sehbehinderung oft schlechter wahrzunehmen. Helle Farbtöne auf hellem Hintergrund können z.B. komplett verschwommen und nicht lesbar sein.
Generell gilt: Je stärker der Kontrast, desto besser. Um die Kontrastwerte der Farben Deiner Webseite zu überprüfen, kannst Du sogenannte Kontrast-Checker verwenden, z.B. WebAIM.
Schwache Kontraste lassen Dinge verschwinden.
🔥 Beachte Farbeinsatz & Symbolik
Oft werden im Grafikdesign Elemente mit scheinbar logischen Bedeutungen belegt. Das einfachste Beispiel ist das Ampelsystem, das z.B. bei Ticketbuchungen eingesetzt wird. Dass Grün hier für “verfügbar”, Gelb für “nur noch wenige Plätze” und Rot für “ausverkauft” steht, scheint absolut klar zu sein.
Wenn Nutzer:innen jedoch eine entsprechend ausgeprägte Rot-Grün-Schwäche haben, kann es sein, dass die gefärbten Punkte nur in unterschiedlichen Graustufen wahrgenommen werden.
Eine einfache Lösung hierfür wäre es, statt Punkte Symbole zu verwenden, die die Bedeutung auch ohne Farben klar machen.
Symbole funktionieren auch ohne Farben.
Um herauszufinden, wie Menschen mit verschiedenen Farbsehschwächen Deine Designs sehen und ob sie damit arbeiten können, kannst Du z.B. auch die Sim Daltonism App für das Apple iPhone mit iOS sowie den Apple Mac bzw. das MacBook mit macOS ausprobieren. Sie kann Farbenblindheit aller Art simulieren. Auch für Google Chrome gibt es hier ein AddOn namens Colorblinding.
Das Ampel-Beispiel eignet sich erweitert auch sehr gut für kognitive Schwächen. Denn es kann sein, dass Nutzer:innen aufgrund einer Einschränkung des Verständnisses sowohl die gefärbten Punkte, als auch die Symbole nicht verstehen.
Um die Ticketverfügbarkeit also wirklich für alle Nutzer:innen verständlich zu kennzeichnen, ergänzen wir zu den Symbolen noch ihre Bedeutung. Darüber freut sich dann auch die Suchmaschine.
Dennoch empfehlen wir Symbole an passenden Stellen gerne zu verwenden und nicht ganz wegzulassen, da eine bildliche Darstellung die Rezeption von Inhalten oft positiv unterstützt.
Erklärungen unterstützen die Symbole.
| 💡 Good to know 2: Barrierearm gendern
So liest der Screenreader Deine Genderzeichen vor:
Die für den Hörfluss bestmögliche Variante, die dennoch klar suggeriert, dass gegendert wurde, ist demnach der Punkt, Mediopunkt oder Doppelpunkt. Doch auch hier ist die Accessibility nicht zu 100% gegeben. Nutzer:innen mit kognitiven Einschränkungen können dieser Art des Genderns ggf. nicht gut folgen. Alternativ bietet sich daher an, gänzlich neutrale Bezeichnungen (z.B. “Nutzende”) zu verwenden. |
Du kannst nur gewinnen
Wie Du siehst, ist es wirklich einfach Deine Webseite grundlegend barrierearm zu gestalten und statt Mehraufwand braucht es eher Aufmerksamkeit. Zudem bietet eine technisch einwandfreie Struktur große Vorteile für Deine Suchmaschinenoptimierung.
Wenn wir über Gestaltung und Barrierefreiheit sprechen, sprechen wir auch über Benutzerfreundlichkeit. Denn in der Regel führt ein barrierearmes Design zur Verbesserung der Usability und damit zu einer besseren User Experience für alle Deine Nutzer:innen.
Viel Spaß beim Ausprobieren. Wenn Du bei der Accessibility Deiner Webseite Unterstützung brauchen kannst, wende Dich jederzeit an uns!
