Do’s and Don’ts für inklusives Webdesign/
Hier geben wir Einblicke zu den meistgemachten Fehlern im Design und Aufbau von Webseiten in Bezug auf Barrierefreiheit und wie man sie vermeidet.
Unsere Gesellschaft ist vielfältig und braucht diverse Lösungen für unterschiedliche Menschen. Durch das neue Barrierefreiheitsstärkungsgesetz (BFSG), das in Deutschland im Juni 2025 in Kraft tritt, sollen vollumfängliche Lösungen für eine digitale Teilhabe geschaffen werden.
Barrierefreiheit zeichnet sich nicht nur dadurch aus, Oberflächen zugänglich zu gestalten, sondern auch darüber, wie einfach es Menschen mit Behinderung gemacht wird, diese zu nutzen.
Hier haben wir sieben bedeutende Aspekte für gute Accessibility im Web aufgelistet.
Die 7 wichtigsten Do’s und Dont’s für barrierefreie Websites:
1 Struktur und Layout:
Do: Klare Hierarchien und eine konsistente Seitenstruktur (wie z.B. die Vergabe strukturierter Headlines mit H1, H2 usw.) verwenden. Das navigieren durch die Website sollte bekannten Mustern folgen (z.B. „Startseite“, „Produkte“, „Kontakt“).
Don’t: Vermeidung von chaotischem Layout und unstrukturierten Inhalten durch fehlende visuelle Content-Hierarchien, einer chaotischen Anordnung von Inhalten im Layout oder inkonsistenten Seitenelementen, z.B. Link-Buttons mal links- und mal rechtsbündig.
2 Alternative Texte für Bilder:
Do: Verwendung von aussagekräftigen, beschreibenden Alternativtexten um Bildinhalte für Screenreader-Nutzer zugänglich zu machen, die sich die Inhalte der Seite aufgrund von visuellen Einschränkungen vorlesen lassen. Um Bildinhalte trotzdem greifen zu können, lesen Screenreader die im HTML hinterlegten Alternativtexte zum Bild vor.
Don’t: Vermeidung von schmückenden Bildern ohne kontextuelle Bedeutung zum Thema der Website.
3 Farbkontraste und Schriftgrößen:
Do: Auf ausreichend hohe Farbkontraste zwischen Schrift, Bild und Hintergrund achten (WCAG-Kontrastvorgaben beachten!). Kontraste können z.B. hier überprüft werden: https://webaim.org/resources/contrastchecker/
Ausreichend große Schriftgrößen verwenden und mindestens den 1,5-fachen Zeilenabstand einhalten.
Don’t: Geringe Kontraste oder zu kleine Schriftgrößen wählen, z.B. zu helle Schriften auf weißem Hintergrund, die schwer lesbar sind.
Auch bestimmte Farbkombinationen können für Personen mit einer Sehschwäche schwierig zu erkennen sein. Beispielsweise haben immerhin 10% der Bevölkerung in Europa eine Rot-Grün-Sehschwäche.
4 Bedienbarkeit:
Do: Webseiten müssen mit verschiedenen Hilfsmitteln wie Tastatur und Screenreader bedienbar sein. Nutzer sollen z.B. mit der Tab-Taste durch die Website navigieren, Formulare ausfüllen und Schaltflächen erreichen können. Der Tastatur-Fokus soll visuell erkennbar sein, z.B. durch Einrahmung des aktuell anvisierten Inhalts.
Don’t: Nur auf Mausbedienbarkeit bzw. Fingerbedienbarkeit am Smartphone setzen, z.B. Dropdown-Menüs, die sich nur durch Klick öffnen lassen.
5 Formulare und Interaktionselemente:
Do: Klare Beschriftungen für Formulareingabefelder verwenden, z.B. statt „Name“ besser zwei Felder mit „Vorname“ und „Nachname“ verwenden, um Fehler zu vermeiden. Formulare sollten allgemein so gestaltet sein, dass Error-Meldungen möglichst vermieden werden und ihr Aufbau einer logischen Reihenfolge folgt.
Don’t: Komplexe oder nicht eindeutige Formulare. Fehlermeldungen bei nicht korrekt eingegebene Daten sollten eindeutige Hinweise zur Fehlerbehebung liefern, z.B. „Das Passwort muss mindestens 8 Zeichen lang sein.“. Zusätzlich sollten alle Hinweise farblich kodiert sein.
6 Video-Untertitel und Audiodeskription:
Do: Untertitel und Audiodeskriptionen für Videos bereitstellen, um Videos für Menschen mit auditiven und visuellen Einschränkungen zugänglich zu machen.
Don’t: Videos und Bewegtbild, die Informationen nur akustisch überliefern. Auf Videos ohne Informationswert oder nur als Schmuckelement sollte verzichtet werden, da beides vom eigentlichen Inhalt der Website ablenkt oder für Frustration sorgt.
7 Aussagekräftige Verlinkungen:
Do: Links und Überschriften sollten immer beschreibend und aussagekräftig benannt werden und den Inhalt der verlinkten Seite klar wiedergeben (statt “hier klicken” besser “mehr Informationen zu Barrierefreiheit lesen”).
Don’t: Nichtssagende Linktexte, die für Menschen, die Screenreader verwenden, nicht klar vermittelt wohin die Verlinkungen führen.
Links, die neue Seiten im Browser öffnen, sollten vermieden werden, da sie ein Zurückspringen zur vorherigen Seite erschweren.
Mit diesen Tools können Sie checken, wie barrierefrei Ihr Webauftritt ist:
https://wave.webaim.org/, Google Lighthouse und auch Google Page Speed Insights generieren innerhalb kürzester Zeit konkrete Verbesserungsvorschläge für Ihre Website.
Warum ist Barrierefreiheit so wichtig?
Zugänglichkeit für alle Nutzer:
In Deutschland leben laut dem Statistischen Bundesamt ca. 10 Millionen Menschen mit einer Behinderung, 7,6 Millionen davon sind schwerbehindert. Hinzu kommen noch ca. 18 Millionen Menschen über 65 Jahre, die aufgrund ihres Alters Einschränkungen haben können. Die Arten der Einschränkungen und Behinderungen können sehr vielfältig sein, unter anderem Seh- bzw. Hörbeeinträchtigungen oder körperliche/motorische und kognitive Beeinträchtigungen.
Es ist gut zu erkennen, dass viele Menschen von einem barriereärmeren Internet profitieren würden und sich somit für Unternehmen auch die Chance bietet, neue Nutzergruppen zu erschließen.
Zum Vergleich: 2017 nutzten nur rund 65% der Menschen mit Behinderung das Internet, die Zahl der Menschen ohne Behinderung lag bei etwa 90%.
Positive Auswirkungen auf die Gesellschaft:
(Digitale) Barrierefreiheit sorgt dafür, dass alle Menschen gleichermaßen am gesellschaftlichen Leben teilhaben können und unterstützt somit die Idee der Gleichberechtigung und Chancengleichheit. Von digitaler Barrierefreiheit profitieren also auch Menschen ohne anerkannte Behinderung, die aber dennoch in manchen Lebenslagen eine Einschränkung spüren (z.B. Rot-Grün-Schwäche). Auch Menschen mit Migrationshintergrund, deren Muttersprache nicht Deutsch ist, profitieren von Barrierefreiheit.
Außerdem werden auch langfristige gesellschaftliche Vorteile geschaffen, z.B. für Innovationen in der Gestaltung, bessere Produkte und Dienstleistungen für alle.
Positive Auswirkungen auf die Usability:
Barrierefreiheit verbessert nicht nur die Erfahrung von Menschen mit Behinderungen, sondern auch die Nutzerfreundlichkeit der Website für alle Besucher. So profitieren nicht nur Menschen mit Behinderung von einfachen Interaktionselementen, hohen Kontrasten zwischen Schrift und Hintergrund oder Video-Untertiteln in lauten Umgebungen wie in der U-Bahn.
Außerdem werden Produkte und Dienstleistungen durch inklusives Design neuen Nutzergruppen zugänglich gemacht.
Logic Joe builds accessible
Wir unterstützen Sie gerne dabei, Ihre Webpräsenz barrierefrei zu gestalten – vollkommen unabhängig davon, wo Sie derzeit stehen. Für einen Website-Relauch gehört es zu unseren Grundsätzen, die Grundlagen der Barrierefreiheit in Konzept und Design und eben auch auf Code-Ebene von Beginn an zu etablieren. Wenden Sie sich auch gerne an uns, wenn wir Ihre Webpräsenz im Rahmen eines Quick-Screenings und nötiger Korrekturen barrierefrei machen sollen.
About Post Author
