Eine Webseite für Alle – barrierefreies Design für Webseiten

Im Alltag erkennt man Barrierefreiheit relativ leicht und es ist offensichtlich wieso es eine Rampe für Rollstuhlfahrer und Kinderwagen braucht. Barrierefreiheit ist aber auch im Internet wichtig. Das Ziel einer Webseite ist es ein möglichst großes Publikum ansprechen und mit ihren Inhalten zu erreichen. Dabei werden häufig unbewusst bestimmte Nutzergruppen ausgeschlossen. Wer nicht sehen, hören oder wer keine Maus bedienen kann, ist auf Hilfe angewiesen. Assistive Technologien können das Leben für diese Menschen deutlich einfacher machen.

In diesem Blog zeigen wir Ihnen worauf Sie achten müssen in der Gestaltung aber auch in der Programmierung von Webseiten die barrierefrei sein sollen. Damit der Onlinegang für jeden Menschen eine selbstverständliche Annehmlichkeit wird gilt es ein paar grundlegende Dinge zu beachten.

Barrierefreies Webdesign

Das Layout

Was eigentlich bei jeder Webseite Standard sein sollte, ist für eine barrierefreie Seite besonders von Bedeutung: Bei der Gestaltung sollte man auf klare Strukturierung der Inhalte achten, denn Hilfsmittel wie Screenreader müssen den Inhalt einer Seite serialisieren, um ihn wiederzugeben. Dazu muss die Seite nicht nur optisch, sondern auch im Code gut geordnet sein. Barrierefreies Webdesign ist also in seinen Grundzügen gar nicht viel komplizierter als „normales“ Design, wenn man ein paar Kniffe beachtet.
Überschriften fungieren beispielsweise als klare Strukturierung der Textinhalte. So können Nutzer von Screenreadern leichter durch die Seite navigieren. Es stehen die Tags „h1“ bis „h6“ zur Verschachtelung der Überschriften zur Verfügung. Es sollte immer mit „h1“ begonnen und dieser Tag auch nur einmal pro Seite verwendet werden. Wird zwischendurch eine Ebene ausgelassen, ist dies der Barrierefreiheit ebenfalls abträglich und blinde Nutzer können sich sogar auf der Seite „verlaufen“.

Skalierbarkeit

Entscheidend ist es außerdem, dafür zu sorgen, dass die Skalierbarkeit der Seite gewährleistet ist, also bei einer Größenänderung die Struktur der Seite nicht verändert wird. Dies wird auch als responsive design bezeichnet. Besonders Nutzer mit einer Sehschwäche müssen häufig die Darstellung vergrößern, um Texte gut lesen zu können.

Farbe als Barriere

Grundsätzlich sollte immer ein ausreichender Kontrast zwischen Vorder- und Hintergrund vorhanden sein, damit alles problemlos erkennbar ist. Eine Möglichkeit wäre es, den Kontrast verstellbar zu machen. Aber auch bestimmte Farbkombinationen sollten von Anfang an komplett vermieden werden. Fünf Prozent aller Männer haben eine Rot-Grün-Schwäche. Roter Text auf grünem Grund wäre für sie also nicht erkennbar. Weitere Farbkombinationen, die (seltener) zu Problemen führen können, sind gelb/weiß, rot/blau und blau/orange.
Daher sollte Farbe auch nie allein zur Gestaltung eingesetzt werden. Möchte der Designer beispielsweise ein Diagramm darstellen, sollten die Linien nicht nur unterschiedliche Farben haben, sondern eventuell zur Unterscheidung auch gestrichelte oder gepunktete Linien genutzt werden. Auch Anweisungen wie „Füllen sie die roten Felder aus“ sind zu vermeiden.

Dynamische Inhalte

Dynamische Inhalte werden meist mit Javascript erzeugt. Dieses wird von Screenreadern aber nicht unterstützt, da ihnen das verwendete Ereignismodel nicht zugänglich ist. Ein häufiges Beispiel für diese Problematik sind Schieberegler.
Dies kann aber relativ leicht umgangen werden, wenn man ARIA (Accessible Rich Internet Application) nutzt. Auf diese Weise können nicht nur Labels erstellt werden, die semantische Rollen für viele HTML-Elemente angeben können, sondern auch value-basierte Eingabemöglichkeiten geschaffen werden, die nur per Tastatur bedient werden können.
So gibt es für jedes Problem eine passende Lösung.

Barrierefreie Inhalte

Es sollte stets darauf geachtet werden, dass Inhalte auf unterschiedliche Weise multimedial präsentiert werden. Besteht eine Webseite nur aus Bildern, ist sie für eine blinde oder sehbehinderte Person nicht relevant. Gibt es zu viele Audio-Inhalte, erreicht die Seite keine Gehörlosen oder Hörbehinderten Menschen. Es muss also immer eine Alternative geben. Für ein Audio-File bietet sich eine Transkription an und für Bilder eine textuelle Beschreibung (dazu später mehr).
Die Texte auf einer Seite sollten auch immer so einfach wie möglich und so komplex wie nötig gehalten werden. Einfache Sprache ermöglicht es häufig sogar Dyslexikern, bestimmte Inhalte erfassen zu können.

Valides HTML

Das Wichtigste für barrierefreie Webseiten zuerst: Valides HTML ist unerlässlich um die Kompatibilität einer Webseite mit diversen assistiven Technologien zu gewährleisten. Grobe Fehler können die Webseite für Nutzer, die solche Hilfen benötigen, unbenutzbar machen.

Auszeichnung von Elementen

Grundsätzlich gilt: Es sind immer die passenden HTML-Tags als Markup zu verwenden. Listen sollen also beispielsweise mit „ol“ oder „ul“ kenntlich gemacht werden und nicht einfach als mit CSS formatierter Text vorhanden sein. Das Gleiche gilt für Tabellen oder Überschriften. Nur so kann der Inhalt auch richtig interpretiert werden.
Für Formulare ist eine assoziierte Beschriftung „label“ von Vorteil. So wird sichergestellt, dass die richtigen Informationen auch in die dafür vorgesehenen Felder eingetragen werden.

Verlinkungen

Barrierefreie Webseiten benötigen natürlich auch eine barrierefreie Navigation. Die kann mithilfe von Breadcrumb trails realisiert werden. Breadcrumb trails stellen den bisher gegangenen Pfad von Seite zu Seite dar und sorgen für eine gute Orientierung. Eine gut auffindbare Sitemap und sinnvoll gesetzte Ankerpunkte fördern eine frustfreie Navigation für die Benutzer.

Pflege von Alt-Attributen

Ein Jedes „img“ Tag benötigt einen Wert für das „alt“-Attribut. Der in diesem Attribut enthaltene Text wird nicht nur angezeigt, wenn ein Bild aus irgendeinem Grund nicht geladen werden kann, sondern wird auch von Screenreadern ausgegeben. Im Attribut sollte die Grafik angemessen für ihren Zweck beschrieben werden. Schmuckgrafiken brauchen keine Beschreibungen, während normale Fotos kurz und bündig beschrieben werden sollten.
Komplizierter wird das Ganze schon bei Diagrammen oder Graphen. Um eine zu lange Beschreibung zu vermeiden, sollten hier nur die wichtigsten Daten genannt werden.
Aber gleich um welche Art Bild es sich nun handelt: Die Pflege von Alt-Attributen ist essentiell, um blinden und sehbehinderten Benutzern eine zugänglich Webseite zu ermöglichen.

Überprüfung von Webseiten auf Barrierefreiheit

Sobald der Prototyp einer Webseite steht, muss sich der Entwickler natürlich auch versichern, dass wirklich keine Barrieren mehr vorhanden sind. Dafür stehen verschiedene Evaluations-Methoden zur Verfügung.
Die einfachste Variante ist sicherlich ein direkter Test mit den Benutzern. So kann man beispielsweise einer blinden Person den Auftrag geben, mithilfe ihres Screenreaders durch die Webseite zu navigieren und prüfen, ob sie auf Probleme stößt.
Der Grad der Barrierefreiheit kann aber auch automatisch getestet werden. Ein schneller Helfer dafür ist das WAVE-Tool. Dieses ist ein Browser Add-on, welches mit nur einem Klick diverse Fehler aufzeigen kann. Hier sieht man unter anderem sofort, wenn ein Bild oder ein Formular nicht beschriftet oder die Überschrift-Tags nicht richtig verwendet wurden.
Bereits während der Entwicklung bieten die internationalen WCAG 2.0-Richtlinien (Web Content Accessibility Guidelines) wichtige Anhaltspunkte für eine zugängliche Webseite.
Eine Kombination aus all diesen Maßnahmen bietet natürlich die höchste Zuverlässigkeit.

Möchten auch Sie ihre Seite für alle Menschen zugänglich machen, kontaktieren sie uns – wir beraten sie gern! Wir sind ihre Spezialisten für professionelle barrierefreie Programmierung. Barrierefreies Design geht Jeden an!