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.

Websites barrierefrei gestalten
(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.


Screenreader lesen Website-Inhalte vor.
(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


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


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:

Kommentare

Emma hat gesagt…
Hey ho,

ich bin gerade auf deinen Artikel aufmerksam geworden. Ich betreibe selbst einen Blog bei Blogger und habe schon mehrfach die Info bekommen, dass meine Kommentarfunktion für Blinde nicht barrierefrei sei. (Es gibt blinde Nutzer, die es hinbekommen, andere haben Schwierigkeiten mit dem Kommentieren). Da ich keine HTML Kenntnisse habe, wollte ich mich mal bei dir erkundigen, welche Möglichkeiten es gibt, die Kommentarfunktion barrierefreier zu machen.

Als Tipp bekam ich bereits, das Ganze so einzurichten, dass das Kommentarfeld in einem separaten Fenster aufklappt. Allerdings ist danach nicht mehr optisch zu erkennen, wann sich Kommentare aufeinander beziehen und wann nicht. Deswegen bin ich da etwas ratlos. Zudem wird für alle Nutzer, die nicht in Besitz eines Google Kontos sind, ein Captcha Feld angezeigt, dass man, wenn man die Audioversion nicht versteht, nicht bedienen kann. Das bekomme ich ebenfalls nicht deaktiviert. Wie hast du das gelöst?

viele Grüße

Emma
Mathias Sauermann hat gesagt…
Hi Emma,

vielen Dank für dein Feedback.

In deinem Backend von blogger.com kannst du unter "Einstellungen" >> "Posts, Kommentare und geteilte Inhalte" einiges ausprobieren. Dort müsstest du gemeinsam mit sehbehinderten Usern verschiedene Einstellungen einfach mal testen.

Ich habe diesbezüglich bei meinem Blog noch kein Feedback bekommen, deshalb weiß ich leider nicht, wie barrierearm meine Kommentareinstellungen sind.

Noch ein Tipp: Frage mal im deutschsprachigen (https://plus.google.com/communities/110908772045475990831) und im englischsprachigen (https://productforums.google.com/forum/#!forum/blogger) Blogger-Hilfeforum nach.

Viele Grüße
Mathias
Emma hat gesagt…
Guten Abend Matthias,

vielen Dank für deine schnelle Antwort und den Tipp mit dem Google Forum.
Ich bleibe dran :)

Hier bloggt Mathias Sauermann:

NEWSLETTER:

Erhalte die besten Beiträge meines Blogs >gratis und freibleibend!

Vernetze dich mit mir auf LinkedIn Xing FacebookInstagram.

Weitere spannende Beiträge dieses Blogs findest du in den Rubriken:
Online-Marketing-Tipps
Digitalisierung

Meinung!
Onliner-Allerlei


Titelbild: Digital Art unter CC0 1.0