Barrierefreie Website programmieren: Im folgenden Text erläutern wir die wichtigsten Funktionen barrierefreier Webanwendungen. Darüber hinaus erklären wir, warum wir bei robole der Programmierung barrierearmer Anwendungen besondere Aufmerksamkeit schenken.
Im allgemeinen Sprachgebrauch bedeutet "barrierefrei", dass sich Menschen mit kognitiven Einschränkungen oder Behinderungen ohne fremde Hilfe in ihrer Umwelt zurechtfinden können. Beispiele dafür sind ein treppenloser Zugang zu einer Wohnung, Blindenstreifen an den S-Bahnen oder die Möglichkeit, sich eine Übersetzung in Gebärdensprache parallel zu den Fernseh-Nachrichten anzeigen zu lassen.
7,9 Millionen Menschen in Deutschland leben mit einer anerkannten Schwerbehinderung. 95% aller Behinderungen werden erst im Laufe des Lebens erworben. Das kann eine Einschränkung der Sehnerven oder eine Konzentrationsschwäche sein. Viele Menschen haben auch Schwierigkeiten, komplizierte Texte zu lesen bzw. zu verstehen, zum Beispiel wenn deutsch nicht ihre Muttersprache ist. Andere wiederum sind in ihren motorischen Fähigkeiten eingeschränkt oder hören schlechter.
Bei robole legen wir großen Wert darauf, mit barrierearm programmierten Websites und Apps alle Menschen miteinzubeziehen. "Wir sprechen lieber von barrierearm statt von barrierefrei. Vollkommene Barrierefreiheit gibt es nicht, dafür sind Interessen und Voraussetzungen zu unterschiedlich", sagt Felix Albroscheit, Frontend-Entwickler bei robole und zuständig für barrierearme Entwicklung, "wir verwenden aber eine große Auswahl technischer Tricks, um den Zugang zu unseren Webanwendungen so einfach wie möglich zu gestalten."
Im folgenden Artikel sprechen wir weiterhin von barrierefrei, denn der Begriff der Barrierearmut hat sich im deutschen Sprachgebrauch noch nicht durchgesetzt.
Diese Faktoren braucht man für eine barrierefreie Website:
Websites mit angemessener Schriftgröße und Typografie barrierefrei gestalten
Menschen mit Sehbehinderung oder Senior:innen benötigen große, einfach lesbare Buchstaben. Eine verschnörkelte Überschrift mag schön aussehen - aber ist sie auch für alle lesbar? Zusätzlich kann mit Visualisierungshilfen in Form von Grafiken, Icons, Pfeilen und Symbolen gearbeitet werden, um komplexe Zusammenhänge einfach zu erklären.
Barrierefreies Webdesign durch hohen Kontrast
Bei Webanwendungen darf nicht vergessen werden, dass jeder Bildschirm je nach Betriebssystem, Hersteller oder Browser unterschiedliche Farb-Charakteristika zeigt. Ein Bildschirm lässt sich zwar kalibrieren, um Farbunterschiede auszugleichen. Trotzdem ist es nicht möglich, dass Farben überall gleich aussehen. Wichtige Inhalte sollten deshalb möglichst kontrastreich dargestellt werden. Dies führt automatisch zu besserer Lesbarkeit und damit zu zufriedenen Nutzenden. Weiße Schrift auf schwarzem Untergrund oder schwarze Schrift auf weißem Untergrund? Beide Versionen bieten maximalen Kontrast.
Barrierefreiheit garantieren durch Screenreader-Optimierung
Menschen mit Seheinschränkungen nutzen häufig sogenannte Screenreader. Das sind Programme, welche Websites von oben nach unten vorlesen. Beim Erstellen der Website muss man sich also fragen: macht die Website noch Sinn, wenn alle Text-Elemente der Reihe nach vorgelesen werden? Gibt es Elemente, die rein struktureller oder gestalterischer Natur sind und für diese Programme ausgeblendet werden müssen?
Damit Bilder vorgelesen werden können, benötigt es die "alt-Texte": Alternative Beschreibungen, die erklären, was auf dem Bild zu sehen ist. Zudem ist eine semantische Auszeichnung aller HTML-Elemente wichtig. Das heißt, dass z.B. eine Zwischenüberschrift nicht einfach fett markiert wird, sondern im Code als <H2> ausgezeichnet wird, was für eine Überschrift der zweiten Hierarchie steht. Screenreader erkennen eine fett markierte Schrift nicht, eine ausgezeichnete Überschrift jedoch schon.
Mehrsprachigkeit: Englisch, einfache Sprache, kindgerechte Sprache
Ist eine Anwendung auf Mehrsprachigkeit konzipiert, erreicht sie nicht nur mit Englisch ein breiteres Publikum. Es können dann auch Versionen in einfacher oder kindgerechter Sprache veröffentlicht werden.
Tabulatorsteuerung und Tabulatornavigation
Die Tabtaste diente ursprünglich dem Umschalten zwischen verschiedenen Spalten (lateinisch "Tabulator" = "Spalte"), wie es auch heute noch in Excel möglich ist. Mittlerweile bietet sie mehrere Anwendungsmöglichkeiten. Unter anderem erlaubt sie Menschen mit motorischen Einschränkungen, sich auf Websites ohne die Benutzung einer externen Maus zurechtzufinden. Hierfür ist eine bestimmte Auszeichnung im Code notwendig, der sogenannte tabindex.
Ist eine Seite richtig ausgezeichnet, können die Nutzenden durch einfaches Tastendrücken von Element zu Element springen. Das können die Eingabefelder eines Formulars oder die Reiter eines Menüs sein, oder aber auch das Hin- und Herschalten zwischen aktiven Browserfenstern.
Untertitel und Textalternativen bei Audio/Video
Nicht alle Menschen mit Beeinträchtigungen des Hörvermögens können perfekt Lippen lesen. Videos mit gesprochener Sprache sollten grundsätzlich untertitelt sein, um sie einem breiten Publikum zugänglich zu machen. Der Video-Dienstleister Youtube bietet mittlerweile eine automatisierte Untertitelung an, diese zeigt aber oftmals noch Fehler. Besser ist es, sich die Mühe zu machen und Videos direkt im Schnitt zu untertiteln. Dies hat noch einen weiteren Vorteil: Auf Plattformen wie Facebook oder Instagram werden Videos oft ohne Ton geschaut, beispielsweise in der S-Bahn. Mit Untertiteln werden die Videos verhältnismäßig deutlich öfter geschaut.
Einfache Bedienbarkeit für Menschen mit motorischen Einschränkungen
Wenn die motorischen Fähigkeiten von Menschen eingeschränkt sind, ist das Bedienen einer Maus oder einer Tastatur oft nicht mehr so einfach. Interaktive Elemente wie Buttons und Links sollten groß genug sein, sodass auch Menschen mit motorischen Einschränkungen oder Sehbehinderungen sie eindeutig als solche wahrnehmen und bedienen können. Die Bestimmung der Button-Größe fällt in den Aufgabenbereich von UX-Designer:innen.
Für ein barrierefreies Gesamtpaket: auch Formulare und CTAs beachten!
Barrierefreie Funktionen müssen sich für ein stimmiges Nutzungserlebnis durch die ganze Seite ziehen. Es wäre ungünstig, wenn es die betroffene Person durch die Anwendung geschafft hat und schlussendlich an der Kontaktaufnahme scheitert. Deshalb gilt auch bei Kontaktformularen:
- Ist der Kontrast hoch genug?
- Verfügen alle Eingabe- und Auswahlfelder über beschreibende Labels?
- Können ggfs. Hilfetexte eingeblendet werden, um die korrekte Bedienung zu unterstützen?
- Gibt es aussagekräftige Fehlermeldungen und/oder ist das System ausreichend fehlertolerant?
- Können Screenreader die Formulare problemlos vorlesen?
- Sind alle Schaltflächen groß genug?
Barrierefreie Websites programmieren lassen bei robole Leipzig
"Bei robole arbeiten wir daran, das gesellschaftliche Bewusstsein für mehr Inklusion zu fördern", erklärt Felix die Zukunftsperspektive, "sowohl auf der Seite der Programmierenden, als auch auf der Seite der Nutzenden. Bald schon wird es eher die Außnahme als die Regel sein, dass eine Website nicht barrierearm konzipiert wird."
Damit spielt der 29-Jährige auf das Barrierefreiheitsstärkungsgesetz (BFSG) an, welches ab Juni 2025 in Kraft tritt. Von da an haben Anbieter:innen von Dienstleistungen und Produkten 5 Jahre Zeit, um die gesetzlichen Richtlinien umzusetzen. "Das Gesetz ist ein wichtiger Schritt zu einer inklusiven und gleichberechtigten Gesellschaft", bestätigt Felix zufrieden.
Rüsten Sie Ihre Website jetzt nach oder bauen Sie neue Websites und Software-Anwendungen direkt barrierefrei! Wir beraten unverbindlich. Sprechen Sie uns an.