Hast du dir schon einmal Gedanken über die Usability (Benutzerfreundlichkeit) deiner Website gemacht? Accessibility (Barrierefreiheit) ist wichtig, damit alle Nutzer:innen gleichermaßen auf deine Website zugreifen können und die bestmögliche Userexperience (Nutzererfahrung), kurz UX, machen können. Dies gilt sowohl für Computer als auch für mobile Webanwendungen. Usability und Accessibility stehen in enger Verbindung und bestimmen die Userexperience aller Personengruppen, ob mit Einschränkungen oder ohne. Dies schließt die Reaktionen während der Nutzung und die Erwartungen/Wahrnehmungen vor und nach der Nutzung ein.
Warum benötigen wir digitale Barrierefreiheit?
Es gibt verschiedene Ursachen, die sich erschwerend auf die allgemeine Nutzung des Internets auswirken und die Userexperience (Nutzungserfahrung) mindern.
Hierzu zählen:
- Seheinschränkungen, wie zum Beispiel Sehbehinderungen, Blindheit, Farbfehlsichtigkeit (wie z. B. eine Rot-Grün-Schwäche) und Verletzungen oder Entzündungen des Auges.
- Höreinschränkungen, wie Schwerhörigkeit, Gehörlosigkeit und Entzündungen oder Verletzungen des Gehörganges.
- Körperliche Einschränkungen, beispielsweise durch verletzte oder fehlende Körperteile, vor allem im Bereich der Arme und Hände.
- Kognitive Einschränkungen, wie lange, verschachtelte Sätze, überflutete Websites und komplexe Interaktionen, die zu Schwierigkeiten beim Verstehen führen.
- Technische Einschränkungen, wie schlechter Empfang, eine laute Umgebung, die fehlende Möglichkeit Ton abzuspielen und die Verwendung älterer Browser oder Text-Browser.
Barrierefreiheit im Web schaffen
Damit du weißt, welche Aspekte zu einer barrierefreien Nutzung zählen und wie du sie am Besten umsetzen kannst, folgen hier unsere Tipps:
Farbkontrast
Durch farbige Abläufe werden Kontraste geschaffen und die Seite anschaulicher gestaltet. Oft sind es Farben die ineinander übergehen und sich kaum voneinander unterscheiden. Um Abhebungen und Schrift für alle Menschen sichtbar zu machen, werden starke Farbkontraste genutzt. Benutze also kontrastreiche Farben, damit auch Texte mit kleiner Schriftgröße gut erkennbar sind. Die Schriftfarbe sollte sich deutlich vom Hintergrund abheben, ebenso wie Icons und Buttons.
Textalternativen
In den meisten Bildern und Videos sind wichtige Informationen enthalten, die nicht von allen Menschen gesehen werden können. Auch Audio-Dateien sollten von allen erfasst werden können. Hierfür dienen Alternativtexte (Alt-Texte), die das Abgebildete oder Gesprochene wiedergeben. Wenn du beispielsweise ein Bild einfügst, gibt es die Option, einen Alt-Text hinzuzufügen, der das abgebildete beschreibt. Auch Meta-Title (Seitentitel) und Meta-Descriptions (Inhaltsbeschreibungen) sollten ausgefüllt werden, damit sie von Screenreadern (Vorlese-Anwendungen) kategorisiert werden können. Layoutgrafiken wie Listenpunkte oder beispielsweise Pfeile werden wiederum mit einem leeren Alt-Attribut versehen, damit diese von Screenreadern überlesen werden.
Skalierbarkeit
Inhalte auf Bildschirmen sollten auch dann gut erkennbar sein, wenn sie stark vergrößert sind. Wenn sie sich heranzoomen lassen, können alle Personen davon profitieren. Maßeinheiten für Schriften, Bereiche und Abstände sollten daher im CSS in rem/em oder Prozent angegeben werden, damit diese selbst bei einer Vergrößerung von 200% noch gut erkennbar sind.
Tastaturbedienung
Websites sollten so entwickelt werden, dass sie ausschließlich durch eine Tastatur bedient werden und somit die Maus ersetzen können. Links und Bedienelemente können dann ausschließlich mit der Tastatur erreicht, bedient und wieder verlassen werden. Dies gilt auch für Bedienelemente zum Starten, Stoppen und der Lautstärkeregelung für Audio- und Videodateien. Vermeide zudem die automatische Wiedergabe von Videos und Musik und zu viele Animationen.
Semantik
Auch die Semantik spielt für eine barrierefreie Nutzung eine wichtige Rolle. Überschriften und Fließtext müssen voneinander unterschieden werden. Screenreader können diese sonst nicht auslesen und keinen semantischen Zusammenhang vermitteln. Überschriften werden daher im HTML in den Formaten H1 - H6 gekennzeichnet. Dabei bekommt der Titel eine H1-Überschrift, die nur einmal pro Text vergeben wird. Danach geht es chronologisch mit einer H2-Überschrift weiter. Für weitere Überschriften kann dann - je nach Gliederung des Textes - entweder wieder eine H2-Überschrift benutzt werden oder eine H3. Die Überschriften H2 - H6 können mehrfach in einem Text vorkommen.
Verständliche Inhalte
Um den Inhalt für alle zugänglich und verständlich zu gestalten, werden kurze Sätze mit einem einfachen Satzbau verwendet. Durch verschachtelte und endlos lange Sätze gehen Informationen oft verloren und kommen bei den Leser:innen nicht an. Verzichte daher auch weitestgehend auf Fremdwörter oder erkläre diese verständlich. Abkürzungen und Akronyme (wie z. B. UFO) werden entweder ausgeschrieben oder mit dem HTML-Element <abbr></abbr> gekennzeichnet, damit Screenreader diese auch als solche erfassen können.
Screenreader und Co.
Für die barrierefreie Nutzung des Internets gibt es assistive Hilfsmittel, die die Bedienung mit Beeinträchtigungen ermöglicht.
Hier einige Beispiele:
-
Screenreader sind spezielle Ausgabegeräte, die Nutzer:innen alle Inhalte und Elemente vorlesen. Dies kann über Lautsprecher oder Kopfhörer wiedergegeben werden. Screenreader unterstützen auch dabei, Kontaktformulare auszufüllen und können (außerdem) Links erkennen. Damit der Screenreader auch alles korrekt zuordnen kann, muss im HTML alles entsprechend gekennzeichnet werden. Beispiele für Screen- und Webreader sind JAWS oder der kostenfreie NVDA.
- Braille-Zeilen bestehen aus einer Lochmasken-Schiene, bei der einzelne Stifte beim Auslesen des Textes hochgedrückt werden. Hierbei können Nutzer:innen Inhalte in Brailleschrift erkennen.
- Steuerung kann durch verschiedene Hilfsmittel erfolgen. Tastaturen in unzähligen Ausführungen, die von sehr groß bis zu sehr klein reichen sowie besondere Tastenbelegungen für die einhändige Bedienung aufweisen. Tastaturen können manuell oder über andere Körperteile gesteuert werden. Auch Touchpads und Joysticks sind beliebte Bedienungshilfen.
Abschließend
Die Benutzerfreundlichkeit von Websites rückt immer weiter in den Vordergrund. Sie ermöglicht nicht nur allen User:innen eine barrierefreie Nutzung, sondern erhöht auch die Verweildauer auf deiner Seite. Wenn die Bedienung zu kompliziert oder unübersichtlich ist, verlassen User:innen deine Seite schon in den ersten Sekunden. Dadurch schwindet auch die Wahrscheinlichkeit, neue Kund:innen für dich zu gewinnen.
Somit spielt Barrierefreiheit auch für den Erfolg deines Unternehmens eine große Rolle.