Barrierefrei: So optimiert ihr eure Website für Menschen mit Behinderung

In Deutschland leben mehr als zehn Millionen Menschen mit Handicap, rund 80 Prozent von ihnen nutzen das Internet. Je barriereärmer ihr euren Web-Auftritt gestaltet, desto benutzerfreundlicher wird er für diese User. Wie das geht, lest ihr hier.

(Access unter CC0 1.0)

Wann gilt ein Mensch als behindert? Es gibt mehrere Definitionen, anbei die des Sozialgesetzbuches:

„Menschen sind behindert, wenn ihre körperliche Funktion, geistige Fähigkeit oder seelische Gesundheit mit hoher Wahrscheinlichkeit länger als sechs Monate von dem für das Lebensalter typischen Zustand abweichen und daher ihre Teilhabe am Leben in der Gesellschaft beeinträchtigt ist.“


Das Web ist für Menschen mit Behinderung eine wichtige Hilfe, um am gesellschaftlichen Leben teilhaben zu können. Damit ihnen das gelingt, braucht es barrierearme Webseiten.

Eine hochwertige Checkliste kommt aktuell aus Großbritannien: Der Government Digital Service (GDS) ist der Digitaldienst der britischen Regierung. Auf der Website gov.uk bietet er Tipps rund um das Thema barrierefreies Webdesign. Here we go (eine frei übersetzte Auswahl):

1. Websites für autistische User optimieren

Autistische Menschen haben Schwächen bei der Informations- und Wahrnehmungsverarbeitung. Sozial sind sie nur eingeschränkt handlungsfähig, ebenso ist ihre Kommunikationsfähigkeit reduziert.

Gutes Webdesign für autistische User:

• einfache Farben
• leicht verständliche Texte
• selbsterklärende Buttons
• einfaches und einheitliches Design

Schlechtes Webdesign für autistische User:

• grelle, zu kontrastreiche Farben
• bildhafte, schnörkelige Texte
• ausufernde Textblöcke
• überladene Layouts

Ergänzt und optisch aufbereitet findet ihr diese und weitere Tipps im englischsprachigen PDF „Designing for users on the autistic spectrum„.

2. Websites für User gestalten, die einen Screenreader nutzen

Ein Screenreader ist ein Programm, das sehbehinderten Menschen die Inhalte einer Webseite vorliest.

(Voice unter CC0 1.0)

Gutes Webdesign für Screenreader:

• Bildbeschreibungen mittels Alt-Texte sowie Video-Transkripte
• geradliniges, logisches Layout
• mittels HTML5 strukturierte Inhalte (HTML5 ist die neueste Version der Hypertext Markup Language – die Standard-Programmiersprache, um Website-Inhalte zu beschreiben und darzustellen)
• Möglichkeit, die Website ausschließlich über Tastatur zu nutzen
• beschreibende Link-Texte

Schlechtes Webdesign für Screenreader:

• Informationen nur als Bild oder Video verfügbar
• Website kann nur über Maus oder Touchscreen genutzt werden
• Link-Texte sind nicht beschreibend

Diese und weitere Tipps als Schaubild bietet das englischsprachige PDF „Designing for users of screen readers„.

3. Websites für sehbehinderte User gestalten

Gutes Webdesign für sehbehinderte Menschen:

• gute Farbkontraste und lesbare Schriftgrößen
• geradliniges, logisches Layout, das auch bei einer Vergrößerung auf 200 % noch leserfreundlich ist

Schlechtes Webdesign für sehbehinderte Menschen:

• schwache Farbkontraste und kleine Schriftgrößen
• Informationen in Downloads verstecken
• Inhalte über die ganze Seite streuen und beim Vergrößern waagrechtes Scrollen erzwingen

Diese und weitere Infos findet ihr als Schaubild im englischsprachigen PDF „Designing for users with low vision„.

4. Websites für körperlich oder motorisch behinderte User gestalten

(Accessibility unter  CC0 1.0)

Gutes Webdesign für körperlich/motorisch behinderte Menschen:

• klickbare Elemente großflächig gestalten
• Websitenutzung sollte komplett tastatur- oder sprachgesteuert möglich sein

Schlechtes Webdesign für körperlich/motorisch behinderte Menschen:

• klickbare Bereiche zu klein gestalten
• dynamische Inhalte nutzen, die viele Maus-Aktionen erfordern
• User zwingen, viel zu tippen und zu scrollen

Diese und weitere Infos findet ihr als Schaubild im englischsprachigen PDF „Designing for users with physical or motor disabilities„.

5. Websites für taube oder hörbehinderte User gestalten

(Ear unter CC0 1.0)

Gutes Webdesign für taube oder hörbehinderte User:

• Videos mit Untertitel oder Transkription
• geradliniges, logisches Layout
• bei Kontaktanfragen den User wählen lassen, wie er kommunizieren möchte (z. B. Mail/WhatsApp statt Telefon)

Schlechtes Webdesign für taube oder hörbehinderte User:

• Inhalte ausschließlich in Audio- oder Video-Form
• ausschließlich telefonische Kontaktmöglichkeiten

Diese und weitere Tipps findet ihr optisch aufbereitet im englischsprachigen PDF „Designing for users who are deaf or hard of hearing„.

6. Websites für legasthenische User gestalten

Legasthenische Menschen leiden unter einer Lese- und Rechtschreibstörung.

Gutes Webdesign für legasthenische User:

• Bilder und Diagramme, die den Text ergänzen
• Inhalte kurz, klar und leicht verständlich gestalten

Schlechtes Webdesign für legasthenische User:

• große Textblöcke
• unterstrichene und kursive Worte sowie Worte in Großbuchstaben
• zu viel Information auf der Seite

Als Schaubild findet ihr diese und weitere Infos im englischsprachigen PDF „Designing for users with dyslexia„.

Fazit: Barrierefreies Webdesign bedeutet Arbeit…

…die sich lohnt. Denn barrierefrei bedeutet benutzerfreundlich – und somit profitieren auch User ohne Behinderung davon.

Lasst es mich wissen: Wie barrierearm ist das Web?

Link-Tipps & Quellen:

• „Es ist noch ein weiter Weg, aber es wird besser!“ – ein Interview zu den Themen Inklusion & Barrierefreiheit im Web
• Aktion Mensch: Barrierefreiheit umsetzen
• Government Digital Service: Accessibility blog
• Statistisches Bundesamt: Behinderte Menschen
• Barrierefreier Online-Auftritt: Wer ihn ab 2025 bieten muss
• Online-Content barrierefrei gestalten: Die 9-Punkte-Checkliste