Unsere Gesellschaft ist vielfältig und braucht diverse Lösungen für unterschiedliche Menschen. Durch das Barrierefreiheitsstärkungsgesetz (BFSG), das in Deutschland seit dem 28. Juni 2025 gilt, 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 Don'ts 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!). 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 eingegebenen 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 vermitteln 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
wave.webaim.org, Google Lighthouse und auch Google PageSpeed 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-Relaunch 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.