Barrierefreiheit ist wichtig – auch im Internet.
Bei dem Thema Barrierefreiheit geht es nicht nur um Inklusion. Die Sichtbarkeit der Herausforderungen, die Menschen mit Behinderung haben und die auf die Mitarbeit der Gesellschaft auch im Web angewiesen sind. Dabei blieb mir ein Satz aus einer Unterhaltung hängen: Auch Menschen mit einer Behinderung sind deine Kunden und wollen an deinem Angebot teilhaben.
Das Internet ist trotz regionaler Gesetzgebung „eigentlich“ ein Ort ohne Grenzen. Besonders im Bezug auf Sprachbarrieren und unterschiedlichen Lesarten wurde hier in den letzten Jahren mit browserintegrierten Übersetzungstools vermehrt nachgearbeitet.
In der Welt des klassischen Webdesigns ist Barrierefreiheit auch schon lange ein Thema. Bereits mit dem Erlernen von HTML werden bestimmte Tags und Attribute integriert. Diese unterstützen Screenreader dabei, durch die Seite und den Content zu lenken.
Als ich meine Webseite aufgebaut und die ersten Analysen durchgeführt hatte, begegnete auch mir das Thema Barrierefreiheit in viel mehr Bereichen als nur HTML Tags. Mir wurde klar, dass der Glaube an: „Internet ohne Grenzen“ nicht so ganz stimmte. Auch wenn Besucher weltweit auf Webseiten Zugriff haben, gibt es Menschen, die im Web nicht so teilhaben können, wie wir es kennen.
Mit dem Barrierefreiheitsstärkungsgesetz, das 2025 kommt, wird es gesetzlich verpflichtend, seine eigene Webpräsenz nach barrierefreien Richtlinien zu optimieren. Google setzt sich jetzt schon dafür ein und belohnt die Eigeninitiative mit mehr Reichweite.
Aber nicht nur bei Google wurde die Aufmerksamkeit auf Barrierefreiheit über die Core Web Vitals eingeführt. Nach ein bisschen Recherche findet man unzählige Quellen und Hilfsmittel, mit denen man Grafik- und Webdesign barrierefreier gestalten kann.
In diesem Artikel findest du davon 6 hilfreiche Tools, mit denen du nicht nur Unterstützung erhältst, sondern dich auch selbst in die Situation der betroffenen Nutzergruppe versetzen kannst. Damit generierst du nicht nur mehr Reichweite und neue Zielgruppen, sondern arbeitest aktiv an der Teilhabe im Web mit.
Easy Checkliste
Bei BIK Für Alle bekommst du eine Checkliste an die Hand, was du alles auf deiner Webseite beachten musst. Mit Unterstützung von Partnern der Handlungsfelder Aus- und Weiterbildung, Wirtschaft und Handel, Kommunen und soziale Organisationen sowie Luftverkehr.
Hier wirst du auf Deutsch und Englisch mit weiteren ausführlichen Erklärungen, Beispielen und Bildern versorgt, die dir genau verdeutlichen, weshalb die Optimierung wichtig ist.
Quick Tool, um Farbkontraste zu prüfen
Die Webseite Barrierefreies Design wurde von einer Agentur aus Brandenburg ins Leben gerufen. Ein sehr hilfreiches, schnelles Tool ist der Farbkontrast-Checker. Dieses bietet dir zwei Eingabefelder, in dem du deine ausgewählten Webfarben via Color-Picker eingeben kannst. Zusätzlich zeigt es das Kontrastverhältnis in verschiedenen Stufen mit unterschiedlichen Schrift- und Linienstärken auf. Das Ganze ist sehr übersichtlich und leicht zu bedienen.
Auf der Seite findest du noch weitere Tools, um Barrierefreiheit interaktiv zu testen. Unter anderem eine weitere Checkliste, um Farbfehlsichtigkeit zu veranschaulichen und Pagespeed zu messen.
Detail Analyse über WebAIM
Mit dem Tool von WebAIM kannst du deine Seite via Link-Eingabe über eine ausführliche Analyse testen. Du siehst nicht nur, bei welchen Komponenten du nacharbeiten musst, sondern bekommst auch die zugehörigen Labels angezeigt. Damit kann man sich Schritt für Schritt durch die Webseite arbeiten. Zusätzlich bietet WebAIM an, dir ein Zertifikat auszustellen, das allerdings nur auf Anfrage. Die Seite wird von der Initiative Institut für Behindertenforschung, Politik und Praxis aus Utah betrieben.
Farbpaletten Builder
Zwei Farben sind schon mal leichter zu prüfen, aber wie sieht es mit einer ganzen Farbpalette aus? Solltest du für Unternehmen Corporate Design entwickeln, schau unbedingt mal bei der Accessible Color Matrix vorbei. Hier kannst du nämlich im direkten Vergleich prüfen, welche Kombinationen funktionieren und damit auch deinen Styleguide bestücken. Damit kannst du deine Kunden für barrierefreies Design sensibilisieren. Das Ganze ist aktuell ein Non-Profit GitHub Tool, nutze es also so lange es da ist.
Farbenblindheit selbst erleben
In der App Color Blind Pal kann man verschiedene Farbschwächen direkt durch die Kamera testen. Auch wenn du in anderen Bereichen tätig bist, schau mal durch die Augen anderer. Ob Gamedesign, Fashion oder Grafikdesign für Editorial & Print, hier kannst du dir einen anderen Blick auf deine Kreation erlauben. Damit wird auch sehr schnell sichtbar, wo du Farben nachjustieren könntest, um so in Zukunft inklusiver zu gestalten.
Lerne kostenlos barrierefrei zu coden
Mit der Seite A11yphant kannst du in mehreren Bereichen lernen, Barrierefreiheit einzubinden. Das betrifft Tags für die Struktur in HTML, Headings, Formulare und Seiten. Wenn du einen GitHub Account hast, kannst du dich auch ganz einfach darüber verbinden und loslegen.
Stephan Königk hat in diesem Blog auch dazu schon mal einen sehr guten Artikel zum Thema Barrierefreiheit und Nachhaltigkeit im Web geschrieben. Er bietet hierzu auch Beratung an. Hier kannst du ihn kontaktieren.
Über Google verlinkte Quelle – Hast du schon mal einen Screenreader getestet? Nein?
Dann schau doch mal auf diesen Blogbeitrag. Hier findest du nicht nur weiteres tieferes Wissen zu den Tags und warum sie so wichtig sind, sondern weitere Ressourcen, wie die technologischen Hilfsmittel genau funktionieren.
Wenn du dich mal durch die Tools durchgeklickt hast, wirst du vielleicht auch sehr schnell merken, dass man mit Themen konfrontiert wird, an die man nie gedacht hatte. Besonders, wenn man keine oder selten Schnittpunkte mit Menschen mit Behinderungen hat. Sie gehören aber zu unserer Gesellschaft und es ist wichtig sich selbst und andere für das Thema zu sensibilisieren.
Hier auf der Seite von Design Netzwerk findest du in unserem FAQ Link-Fundus noch weitere hilfreiche Ressourcen. Bookmark dir am besten den Link und wenn du Fragen zu dem Thema hast, schreib sie gern in die Kommentare.
Grüße aus der Design-Netzwerk Community
Anja Fritz
Design, Media & Music
www.anjafritz.de
Ganz wichtiger Beitrag, liebe Anja! Wir können nicht genug sensibilisieren und deine vorgestellten Tools kannte ich zum Teil noch gar nicht, die werde ich mir genauer anschauen, super!