Barrierefreies Webdesign

Foto eines Labyrinths
Überblick statt Labyrinth

Barrierefreies Webdesign heißt, Webseiten so zu gestalten, dass jeder sie nutzen kann.

Dabei sorgt die strenge Einhaltung von Webstandards für höchstmögliche Geräteunabhängigkeit. Ob Browser, Handy, Suchmaschine oder Braillezeile: Keiner bleibt außen vor. Standardkonformes Arbeiten schafft ein stabiles Fundament.

Werden zusätzlich hohe Anforderungen an Barrierefreiheit erfüllt, wird Ihre Webpräsenz einer breiteren Öffentlichkeit zugänglich gemacht. Häufig entscheiden Kleinigkeiten darüber, ob Besucher sich wohlfühlen oder ob bestimmte Gruppen von vorneherein ausgeschlossen werden. Sie könnten auch zu Ihrer Zielgruppe gehören.

Betroffen sind häufig:

  • Menschen mit Sehschwäche, die zum Beispiel auf vergrößerbare Schriften angewiesen sind, beginnend mit leichter Weitsichtigkeit,
  • motorisch eingeschränkte Menschen, darunter viele ältere Menschen,
  • Nicht-Muttersprachler,
  • Fehlsichtige wie zum Beispiel Farbenblinde und
  • blinde Menschen.

Anforderungen an Barrierefreiheit – Ihre Vorteile

Um möglichst viele Besucher anzusprechen, werden barrierefreie Websites unter den verschiedensten Bedingungen getestet. Die aufgeführten Anforderungen sollen einen Überblick darüber vermitteln, was barrierefreies Webdesign im Einzelnen bedeutet und worin Ihre Vorteile liegen.

Text-Alternative für Grafiken

Grafische Ansicht: Foto und Untertitel werden angezeigt
Der Alternativtext "Auschnitt: japanischer Holzschnitt einer Fledermaus" wird statt des Bildes angezeigt.

Wenn Grafiken zusätzliche Informationen enthalten, werden diese in Textform hinterlegt. Falls ein Gerät keine Grafiken anzeigen kann, erscheint stattdessen die Beschreibung.

Neben Screenreadern und Braillezeilen, die von Blinden genutzt werden, profitieren davon vor allem auch die Suchmaschinen. Auch deren textbasierte Datenbanken können mit Bildern nichts anfangen.

Skalierbarkeit: Layout und Schriften können vergrößert werden

Mit der Tastenkombination strg + bzw. strg – können Sie in den meisten Browsern den Text vergrößern. Das Layout barrierefreier Seiten ist so beschaffen, dass dies ohne Einschränkung möglich ist. Wird der Text vergrößert oder verkleinert, darf sich nichts überlappen.

Geräteunabhängigkeit

Wenn Ihre Seiten für Screenreader, Braillezeilen und andere Hilfsmittel zugänglich sind, werden sie auch für Kiosksysteme ohne Tastatur oder Handys bedienbar sein …

Barrierefreie Seiten können ohne Maus und nur mithilfe der Tastatur bedient werden.

Abwärtskompatibel

Barrierefreie Websites funktionieren auch in älteren Ausgabemedien. Nach der Browser-Statistik der PC-Welt verwendeten im August 2010 immerhin 16,18% der Leser den veralteten Internet Explorer 6.

Während Heimanwender tendenziell aktuelle Browser haben, sind die Erneuerungszyklen in Firmennetzwerken und Behörden eher lang.

Anforderungen an Farben und Kontraste

Die Farbfehlsichtigkeit ist eine häufig unterschätzte Barriere: 8% der Männer und 0,4% der Frauen sind davon betroffen.

Ampelkennzeichnung von Frühsücksflocken mit Schokolade aus der Sicht eines rotblinden Menschen (Protanopie).
Ampelkennzeichnung bei Rotblindheit (Protanopie).

Während der Tests barrierefreier Internetseiten werden solche Bedingungen simuliert, um Barrieren aufzuspüren und zu beseitigen.

Die Abbildung links zeigt die Simulation von Rotblindheit bei mit Ampel gekennzeichneten Frühstücksflocken. Die grüne Ampel für Fett lässt sich nicht vom gelb für Salz unterscheiden.

In der Praxis werden solche Kennzeichnungen daher immer auch mit Text hinterlegt.

  • Barrierefreie Websites sind auch ohne Farben nutzbar. D.h., dass keine Information ausschließlich durch Farbe vermittelt wird. Ein Beispiel: Links im Text sind rot und unterstrichen.
  • Grafiken weisen ausreichende Kontraste auf.
  • Der Kontrast zwischen Text und Hintergrund ist nicht zu hoch und nicht zu gering.
  • Barrierefreie Websites erlauben die Wahrnehmung auch mit Farbfehlsichtigkeiten.

Gute Orientierung

Gut gegliederte Informationen sind leichter zu erfassen. Ihre Besucher profitieren von

  • der besseren Gliederung von Texten mit Überschriften,
  • Zusammenfassungen zu Beginn längerer Texte,
  • leicht bedienbaren Formularen.

Sie profitieren von einer geringeren Abbrecherquote.

Einfache Bedienung

Navigationselemente werden übersichtlich und schlüssig gestaltet. Das Angebot erschließt sich leicht von jedem Einstiegspunkt.

Einige Vorteile einer barrierefreien Navigation:

  • Die Linktexte in der Navigationsleiste sind verständlich und selbsterklärend.
  • Orientierungshilfen wie beispielsweise eine Sitemap.
  • Nachvollziehbare Gliederung der Navigation mit klarer Struktur.
  • Verschiedene Möglichkeiten zu navigieren. Je nach Umfang des Angebots werden zusätzlich zur Navigationsleiste eine Sitemap, Skip Links und eine Breadcrumb-Navigation angeboten.
  • Je nach Umfang ist eine Suchfunktion sinnvoll.

Möglichst einfache Sprache

Die meisten Besucher profitieren von einfachen Texten. Der Text am Bildschirm liest sich mühsamer als eine gedruckte Buchseite.

Komplizierte Texte machen ungeduldig. Sie bauen selbst bei geübten Lesern unnötige Barrieren auf. Nicht-Muttersprachler, Ungeduldige, ungeübte oder weniger gebildete Leser bleiben ohnehin aussen vor, ebenso Menschen mit Sehschwäche, darunter viele Angehörige der älteren Generation.

Mehr zu webgerechten und einfachen Texten finden Sie unter „Inhalte vorbereiten“.

Simulationen

colorfilter.wickline.org
Internetseiten bei Farbfehlsichtigkeit. Der Filter braucht etwas Zeit. Angebot in englischer Sprache.

absv.de, Sehbehinderungen
Sehbehinderungen wie Grauer Star und Makuladegeneration