Barrierefreiheit

zuletzt aktualisiert am 3. Februar 2025

Die WCAG soll es Menschen mit Behinderungen ermöglichen, das Internet möglichst ohne Einschränkungen zu nutzen.

Da Webseiten vor allem ein visuelles Medium sind, bedeutet Barrierefreiheit in diesem Fall vor allem, die Webseiten so zu gestalten, dass auch Menschen mit Seheinschränkungen, blinde Menschen aber auch Menschen mit motorischen oder kognitiven Einschränkungen Ihre Website nutzen können.

Um beispielsweise eine probemlose Navigation ohne Maus oder die Verwendung von Screenreadern zu ermöglichen, muss eine Webseite an der einen oder anderen Stelle angepasst werden.

Vieles davon ist für einen Benutzer, der sehen kann und die Maus benutzt, nicht erkennbar. Erst wenn man assistive Technologien nutzt/nutzen muss, um eine Website zu besuchen, werden diese Erweiterungen der Website sichtbar. Andere Hilfen wie eine zweite Navigationsmöglichkeit oder noch deutlicher kenntlich gemachte Links werden zum Standard für uns alle werden.

Wir haben hier einige Beispiele für Sie aufgelistet:

Beschreibung von Bildinhalten

Sehender Benutzer

Seebrücke Zinnowitz in violettes Abendlicht getaucht.

Blinder Benutzer

Der Screenreader liest den nicht sichtbaren Text vor: „Seebrücke Zinnowitz in violettes Abendlicht getaucht“

Formulare

Formulare müssen so gestaltet sein, dass eine Handhabung mit assistiven Technologien möglich ist.

Ein Beispiel wäre die Frage: „Sind Sie bereits Kunde?“ Antwortmöglichkeiten: ja/nein. Die Frage „Sind Sie bereits Kunde?“ muss im Kontext zu den Antwortmöglichkeiten stehen. Wenn nicht klar ist, dass Frage und Antworten zusammengehören, lässt sich die Frage nicht beantworten.

Zu Inhaltsbereichen navigieren

Stellen Sie sich vor, Sie lesen eine Restaurantbeschreibung und darunter ist ein Link zur Tischreservierung. Wenn Sie eine Maus zur Navigation benutzen, können Sie einfach auf den Link klicken. Wenn Sie mit der Computertastatur navigieren, müssen Sie oben an der Seite anfangen und jeden Menüpunkt durchgehen bis Sie irgendwann an der Stelle angekommen sind, an der Sie klicken möchten. Auf der nächsten Seite fangen Sie wieder oben an.

Um nicht jedes Mal alles durchgehen zu müssen, ist eine Abkürzung sinnvoll, die einen mit seinem Tastaturcursor direkt zum Inhalt bringt (er ist für Maus-Benutzer nicht sichtbar):

Screenshot einer Website mit einem Skip-to-content-button

Tabellen

Tabellen müssen so aufgebaut sein, dass Screenreader sie lesen können. Beispielsweise müssen Tabellenzellen, in denen sich eine Überschrift befindet, für den Screenreader als Überschrift erkennbar sein. Bei einfach aufgebauten Tabellen ist das vielfach bereits der Fall. Bei Tabellen die komplexer aufgebaut sind, muss der Aufbau für Screenreader erweitert werden.

Farbkontraste müssen ein bestimmten Mindestverhältnis aufweisen

Text und Hintergrund haben in diesem Screenshot ausreichend Kontrast, wie das Prüftool anzeigt.

In diesem Beispiel haben Text und Hintergrund ausreichend Kontrast um die Stufe AA der Richtlinien zu erfüllen.

Farbe als Unterscheidungsmerkmal für Links reicht nicht aus

Screenshot von 3 Buttons, einer farblich hervorgehoben bei mouse over.
So sieht der gleiche gehoverte Button für jemanden aus, der farbenblind ist.

Der aktive Button ist auch für eine Person mit Farbenblindheit (zweiter Screenshot) klar von den anderen Buttons zu unterscheiden.

Sichtbaren Fokus für anklickbare Elemente 

Screenshot einer Website, fokusierter Menüpunkt ist mit einer gestrichelten Linie umrandet

In diesem Beispiel sieht man eine gestrichelte Linie um den aktiven Menüpunkt. So bleibt die Cursorposition erkennbar – die Navigation mit Tastatur statt einer Maus wird ermöglicht.

Textalternative für Icons, die keine Beschriftung haben oder rein dekorativ sind

Sehender Benutzer

Blinder Benutzer

Der Screenreader ignoriert das Icon und liest stattdessen den nicht sichtbaren Text vor: „Doppelbett“

Doppelbett

Hier hat das Icon eine allgemein lesbare Beschriftung und braucht deshalb keine Alternative.

Höhere Zoomstufen

Screenshot einer Website auf 400% gezoomt

Website gezoomt auf 400%. Die Seite wächst automatisch mit, es kommt zu keinen Textüberlappungen oder horizontalen Scrollbalken wenn der Text durch das Zoomen größer wird.

Textliche Alternative für Nicht-Text Inhalte

Nicht-Text Inhalte wie Grafiken, Videos ohne Dialoge oder Animationen brauchen eine textliche Zusammenfassung was zu sehen ist. Videos mit Dialogen brauchen Untertitel.

Textalternativen für Steuerelemente

Wie das so genannte „Hamburger-Menü“ (siehe Screenshot), die Pfeile eines Bildsliders oder auch die Steuerelemente eines Videos brauchen Beschriftungen als Alternative (diese können aber müssen nicht sichtbar sein)

Sehender Benutzer

Screenshot einer Website mit einem Buttom zum Aufklappen der Navigation

Blinder Benutzer

Der Screenreader ignoriert das Icon und liest stattdessen den nicht sichtbaren Text vor: „Menü aufklappen“

Sensibilisierung für dieses Thema

Bedenken Sie bitte, dass die Barrierefreiheit nicht nur Ihre Website betrifft sondern externe Ressourcen, die in die Webseite eingebunden werden sollen, barrierefrei sein müssen. Das betrifft beispielsweise Buchungssysteme aber auch Videos. Diese müssen zukünftig transkribiert sein und verlinkte PDF-Dokumente müssen ebenfalls barrierefrei sein.