Barrierefreiheit Tutorial und Checkliste

Von 19. Dezember 2011 Barrierefreiheit 4 Kommentare

In diesem Tutorial möchte ich Ihnen in kurzen Punkten die verschiedenen Lösungsansätze vorstellen, um barrierefreies Webdesign umzusetzen. “Kurz” weil die Fülle an Einzelheiten sicher den Rahmen sprengen würde. Dazu gibt es Bücher und das zurecht, denn dieses Gebiet ist wirklich sehr umfangreich. Hier nun ein kleiner Überblick.

In 2011 war ich als externer Mitarbeiter bei einem DAX-Unternehmen im Einsatz, es musste ein Projekt im Webumfeld barrierefrei gestaltet werden. Der zeitliche Aufwand ist mit einigen hundert Personentagen wirklich sehr umfangreich aber auch nötig. Manch einer denkt mit der Möglichkeit, die Schriftgröße über entsprechende Buttons auf der Webseite zu verändern, ist die halbe Miete getan. Mal abgesehen davon, dass diese Funktion jeder gängige Browser von Haus aus beherrscht und dies somit auch keine Barriere mehr darstellt, ist noch Einiges mehr zu tun.

Etwas Wichtiges vorweg. Barrierefreiheit wird fälschlicher Weiße dahingehend interpretiert, die Webseiten für Menschen mit Behinderungen unterschiedlichster Art zugänglich zu machen. Gerade auch für Blinde. Dies ist jedoch nicht ganz Richtig. Denn “barrierefrei” bedeutet, dass sämtliche Barrieren aus dem Weg zu schaffen sind. Es gibt eine Vielzahl an Barrieren für Menschen ohne körperliche oder geistige Einschränkungen.

Somit muss eine Seite zum Beispiel kurze Ladezeiten besitzen, da nicht jeder über eine ständige und potente Internetverbindung verfügt. Gerade weltweit gesehen ist dies nicht der Fall. Aber auch müssen die verschiedenen Auflösungen der Endgeräte bedacht werden. Die in der westlichen Welt gängige durchschnittlichen Auflösungrn (Stichwort 960px) sind in anderen Bereichen der Welt eine ganz andere. Ganz zu schweigen von den geringeren Auflösungen und vor allem Abmessungen von Displays bei Smartphones.

Auch erwähnt werden muss, dass einige Barrieren ohne tiefgreifende Einschnitte nicht aus der Welt zu schaffen sind. Dazu zählt zum Beispiel das Nachladen von Inhalten ohne Seiten-Reload, wie es durch AJAX möglich ist. Es ist für Blinde nicht möglich, solch einen neu geladenen Inhalt zu erkennen.

Einige Punkte sind zwar nicht zwingend nötig und werden auch allgemein nicht als Barriere gesehen, erleichtern aber zum einen alle weiteren Arbeiten und bieten zum anderen den verschiedenen Programmen wie Browsern, Screenreader und sonstigen Hilfsprogrammen für behinderte Benutzer die beste Grundlage.

Hier also einige ToDos:

  • Ein standardkonformer und valider Quellcode sollte die Grundlage sein.
  • Die Browserkompatibilität sollte gewährleistet werden. Alle Webinhalte sollten in den gängien Browsern gleich aussehen.
  • Verminderung zu hoher Ladezeiten.
  • Auf ein Tabellen-gestützes Design sollte verzichtet werden.
  • Alle Inhalte müssen per Tastatur zugänglich und bedienbar sein.
  • Eine logische Taboulatoren-Reihenfolge muss gegeben sein.
  • Auf Frames sollte verzichtet werden.
  • Die Bedienung bestimmter Bereiche oder Funktionsweisen sollte zentral in einer Hilfeseite erklärt werden. Bei PC-Programmen Standard, bei komplexen Web-Anwendungen leider noch nicht.
  • Grafiken, Videos und Animationen müssen sollten Alternativtexte besitzen.
  • Dateinamen (z.B. bei Bildern und Downloads) sollten passend zur Datei gewählt werden.
  • Eingabefelder sollten immer mit einem Label verknüpft werden. Beispiel: <label for=”eingabe”>Benutzername:</label> <input type=”text” name=”benutzername” id=”eingabe” />
  • Gerade branchenspezifische Abkürzungen sollten gekennzeichnet werden. Beispiel: <abbr title=”Content Management System”>CMS</abbr>
  • Überschriften sollten hirarisch und lückenlos von <h1> bis <h6> gekennzeichnet werden.
  • Listen sollten auch als solche gekennzeichnet werden (Stichwort <ul> und <li>).
  • In Datentabellen sollte der Kopfbereich gekennzeichnet sein (Stichwort <thead>, <tbody> und <th>) und möglichst keine leeren Spaltenüberschriften existieren.
  • Definierung eines noscript-Bereiches für Benutzer mit deaktiviertem Javascript.
  • Tastaturfokus sollte gut sichtbar sein.
  • Alle wichtigen Inhalte wie Text, Links, Schaltflächen oder Eingabefelder sollten in einem guten Kontastverhältnis zum Hintergrund erscheinen.
  • Die vorherschende Sprache muss im Markup gekennzeichnet sein.

Die Liste wird von mir ständig erweitert. Wenn Sie Ergänzungen haben, bitte einfach einen Kommentar verfassen.

Über Peter

Ich bin seit 2008 selbständiger Web-Entwickler und Inhaber von Design-Insel.de. Ich versorge meine Kunden mit anspruchsvollen und erfolgsorientierten Weblösungen. Dazu zählen mittelständische aber auch größere Unternehmen wie T-Systems und Zalando.

4 Kommentare

Hinterlasse eine Antwort