Barrierefreies Webdesign
Eine inklusive digitale Erfahrung für alle Menschen
Bei der Planung einer neuen Website oder einem Relaunch spielen sehr viele Dinge eine tragende Rolle. Barrierefreiheit ist ein entscheidendes Thema und soll in diesem Blogbeitrag beleuchtet werden. Unser Ziel als Agentur ist es, Ideen und Projekte digital erfolgreich zu machen, die gut für Mensch und Umwelt sind. Deshalb ist es für uns von zentraler Bedeutung, Websites so zu gestalten, dass sie von Menschen mit verschiedensten Einschränkungen problemlos genutzt werden können, darunter Seh- oder Hörbehinderungen, motorische Beeinträchtigungen oder kognitive Einschränkungen.
Wir möchten (digitale) Barrieren abbauen, um eine digitale Welt zu schaffen, die für alle Menschen zugänglich ist.
Barrierefreies Webdesign erweitert die Zielgruppe und Reichweite einer Website, da Menschen mit Behinderungen einen beträchtlichen Teil der Bevölkerung ausmachen. Alleine in Deutschland haben knapp 10 Millionen Menschen eine Behinderung, aber ungleich viel mehr Menschen profitieren von einfachen und zugänglichen Websites. Zudem verbessert es die User Experience für alle Zielgruppen.
Die Bedeutung von Barrierefreiheit im Webdesign geht über die bloße Zugänglichkeit für Menschen mit Behinderungen hinaus.
Menschen mit Behinderungen sind nicht die einzigen, die von barrierefreiem Webdesign profitieren. Auch Personen mit altersbedingten Einschränkungen oder anderen Beeinträchtigungen können davon profitieren. Es ist wichtig, eine Website für alle zugänglich zu machen, unabhängig von den individuellen Fähigkeiten oder Einschränkungen.
Häufig denken wir bei Barrierefreiheit nur an Menschen mit offensichtlichen Behinderungen. Allerdings gibt es eine Vielzahl von Menschen, die nicht jede Website nutzen können. Dazu gehören zum Beispiel Brillenträger:innen, ältere Menschen, die krankheits- oder altersbedingt an Sehstärke verlieren oder Menschen mit einer Farbfehlsichtigkeit.
Die Grundprinzipien des barrierefreien Webdesigns
- Klare und strukturierte Gestaltung: Die Struktur des Inhalts sollte klar und hierarchisch organisiert sein, um die Lesbarkeit und Verständlichkeit für alle Benutzer:innen zu verbessern.
- Alternativtext für Bilder: Jedes Bild sollte einen präzisen Alternativtext enthalten, um Menschen mit Sehbehinderungen die Inhalte zu vermitteln.
- Farbkontraste und Lesbarkeit: Die Auswahl von Farben und Schriftgrößen sollte einen ausreichenden Kontrast gewährleisten und die Textlesbarkeit verbessern, insbesondere für Menschen mit Sehbehinderungen oder Farbenblindheit. Dabei spielt neben der Schriftgröße auch die Wahl der Schriftart eine wichtige Rolle.
- Tastaturzugänglichkeit: Alle Funktionen der Website sollten auch mit der Tastatur zugänglich sein, um Menschen mit motorischen Beeinträchtigungen zu unterstützen.
- Barrierefreie Formulare: Formulare sollten übersichtlich gestaltet und mit der Tastatur ausfüllbar sein, um eine einfache und verständliche Interaktion zu gewährleisten.
- Video-Untertitel und Transkripte: Videos sollten mit Untertiteln und Transkripten versehen werden, um Menschen mit Hörbehinderungen den Zugang zu den Inhalten zu erleichtern.
- Barrierefreie Navigation: Die Navigation sollte klar und intuitiv sein, mit klaren Links und einer konsistenten Strukturierung der Inhalte.
- Barrierefreie Technologien und Tools: Die Verwendung von Technologien wie Screenreadern, Sprachsteuerung und Vergrößerungssoftware kann dazu beitragen, Websites barrierefrei zu machen. Besonders empfehlen können wir hier JAWS oder NVDA.
Die Top 5-Tipps von unseren Designerinnen
- Zwei-Kanal-Prinzip: Um sicherzustellen, dass Informationen wahrgenommen werden können, sollten diese über mindestens zwei “Kanäle” dargestellt werden, zum Beispiel Text und Farbe.
- Bei Feldern in einem Formular muss immer auch textlich deutlich gemacht werden wo die Felder liegen oder Links sollten nicht nur farblich gekennzeichnet werden, sondern benötigen eine weitere Auszeichnung wie Fettungen oder Unterstreichung.
- Animationen sollten abschaltbar sein. Diese Funktionalität sollte zudem leicht erreichbar und auffindbar sein wie zum Beispiel im Header.
- Funktionen und Informationen sollten auch bei Interaktion sichtbar sein. Wenn man zum Beispiel Eintragungen in ein Formular macht, sollten die Formularlabels nicht verschwinden.
- Links sollten sprechende Bezeichnungen haben. Nicht erlaubt wäre: „Klicken Sie hier“, um zum Kundenkonto zu gelangen. Die bessere und barrierefreie Alternative wäre diese: „zum Kundenkonto“.
Unsere erfolgreichen Projekte im Bereich barrierearme Websites
Wir haben bereits im Jahre 2021 die Seite von KOFA (Kompetenzzentrum Fachkräftesicherung) barrierearm gestaltet. Hier wurden wir mit einem Relaunch betraut, der User:innen die Orientierung erleichtern sollte. Es wurden gewachsene Strukturen aufgebrochen und die Navigation komplett neu konzipiert. Seitdem ist es möglich, die komplette Website nur noch mit Hilfe der Tastatur durchzunavigieren. Die Bildsprache haben wir direkt für den Screenreader optimiert.
Unser Fazit
Insgesamt ist barrierefreies Webdesign entscheidend, um eine inklusive digitale Erfahrung für alle Benutzer:innen zu gewährleisten. Webdesigner:innen und Entwickler:innen sollten die Bedürfnisse aller potentiellen Zielgruppen berücksichtigen und sicherstellen, dass Websites so barrierefrei wie möglich sind. Nur so kann eine wirklich inklusive digitale Erfahrung für alle geschaffen werden. Und nicht zu vernachlässigen: So kann die Zielgruppe am einfachsten erweitern werden und Kundengruppen angesprochen werden, die bisher noch nicht berücksichtigt wurden.
