Barrierefreie Website: Surfen ohne Hindernisse

Für viele Menschen ist es völlig normal, uneingeschränkt im Netz zu surfen und dabei die Weiten des Internets zu erkunden. Wir bedienen die Maus, sehen uns Bilder an, lesen Texte und klicken auf die verschiedensten Buttons. Für Menschen mit Seh- oder motorischen Störungen ist das nicht immer so selbstverständlich, denn oft stellen schon einfache Dinge eine große Hürde dar. Wie ihr eine barrierefreie Website programmieren und gestalten könnt, erfahrt ihr hier bei uns.

Barrierefreie Website

Eine barrierefreie Website ist für viele Menschen ein große Hilfe im Alltag. Hierzu zählen:

  • Blinde (sie benötigen einen sogenannten „Screenreader“, der den Seiteninhalt in eine Blindenschrift umsetzt oder vorliest)
  • Menschen mit Sehbehinderung (sie sind auf eine Lesehilfe, wie z.B. eine starke Vergrößerung des Textes, angewiesen)
  • Farbenfehlsichtige/-blinde (sie brauchen kontrastreiche und farbfreie Texte)
  • Menschen mit motorischen Einschränkungen, die z.B. die Maus nicht bedienen können

Welche Websites MÜSSEN barrierefrei sein?

Seit 2002 gibt es die „Barrierefreie Informationstechnik-Verordnung, kurz BITV. Sie regelt ganz grob gesagt die Gleichstellung von behinderten Menschen speziell für das Thema Internetauftritte. In 14 Punkten wird hier genauer definiert, was unter Barrierefreiheit im Zusammenhang mit Websites zu verstehen ist.

Gesetzlich ist seit dem 01.01.2006 geregelt, dass Internetauftritte von Behörden und anderen öffentlichen Einrichtungen „barrierefrei“ sein müssen. Sie sind also fest an das BITV gebunden.

Auch wenn es sich bei eurer Website nicht um einen behördlichen Webauftritt handelt, könnt ihr trotzdem dafür sorgen, dass sie auch für Menschen mit Behinderungen zugänglich ist.

5 einfache Schritte für eine barrierefreie Website

Es gibt ein paar ganz simple Maßnahmen, um eure Website barrierefrei zu gestalten. Hierzu gehören:

  1. Deaktiviert die Anzeige von Grafiken in eurem Browser.
  2. Gewährleistet eine „mausfreie“ Steuerung der Website, d.h. ausschließlich mit der Tastatur.
  3. Macht die Schrift auf eurer Website groß genug und setzt sie in einem hohen Kontrast zum Hintergrund.
  4. Gebt die Schriftgrößen nicht absolut in „pt“ oder „px“ an, sondern relativ in „em“. So können sehbehinderte Menschen die Größe der Schrift in den Browsereinstellungen variieren.
  5. Installiert einen Screenreader, lasst euch die Inhalte eurer Website vorlesen und notiert alle Fehler.  So bekommt ihr ein Gefühl dafür, wie Blinde eure Website wahrnehmen.

Bei der Nutzung eines Screenreaders wird euch auffallen, wie schwer es ist, eine Website und ihre Inhalte nur durch Vorlesen zu verstehen.  Achtet daher schon bei der Programmierung auf folgende Punkte, um blinden Menschen das Verstehen eurer Website mithilfe eines Screenreaders zu erleichtern:

  • Separate Kennzeichnung von Überschriften und sonstigen Texten durch das Einfügen von Zusatzinformationen (Beispiel: „Überschrift“, „Liste mit drei Einträgen“)
  • Hinterlegen von Informationen zu den jeweiligen Bildern
  • Abkürzungen durch korrekte HTML-Elemente ersetzen (Beispiel: „( c )“ würde der Screenreader nicht als Copyright vorlesen, sondern als „Runde Klammer auf, C, runde Klammer zu“, korrekt also: ©)
  • Beschriftung der verschiedenen Menü-Buttons (ansonsten heißt es im Screenreader „Button 1, Button 2, etc.)
  • Zuordnung verschiedener Tasten(-kombinationen) für jeden einzelnen (Menü-)Button, ansonsten sind sie mit der Tastatur nicht ansteuerbar

Was darf ich einbetten und worauf sollte ich verzichten?

Wie oben schon erwähnt, gibt es beim Verfassen der Texte einiges zu beachten, damit das Vorlesen durch den Screenreader nicht gestört wird. So sollte man den Gebrauch von Bindestrichen, Sonder- und Satzzeichen genauestens überdenken und sie nur dann verwenden, wenn es absolut notwendig ist.

Oft wird außerdem angenommen, dass das Intergrieren von Bildern auf einer Website eine Barriere darstellt. Dies ist jedoch falsch, denn die Kombination aus Text und Bild ist genau das, was das visuelle Medium Internet ausmacht. Für sehbehinderte und blinde Menschen muss lediglich eine entsprechende Alternative zur Verfügung gestellt werden. Bei einem Sound oder Video können dies Untertitel sein, bei Grafiken und Bildern können die Bildinformationen mit Hilfe eines kurzen Textes zur Verfügung gestellt werden. Hierbei spielt die korrekte Verwendung des <img>-Tags eine Rolle, denn dahinter lässt sich ein Alternativtext eingeben, z.B. <img src=“oldenburg.jpg“ alt=“Bild vom Oldenburger Schloss“>. Dieser Text wird bei der Betrachtung der Seite ohne Bilder angezeigt oder bei der Verwendung eines Screenreaders vorgelesen. Der Text sollte kurz und knackig das Kernmotiv des Bildes beschreiben.

Geht den ersten Schritt!

Wie ihr seht, wird eure Seite nicht großartig optisch verändert, nur weil ihr sie barrierefrei gestaltet und programmiert. Mit ein paar kleinen Tricks könnt ihr zahlreiche Hürden für behinderte Menschen entfernen und ihnen so ein barrierefreies Surfen auf eurer Website ermöglichen. Probiert es aus!

- Ein Artikel von Laura Willenborg -

Facebook-Marketing für KMU

Titelbild: © pixabay.com
 Kategorien: Website