DigitalMedien
3 Min

Barrierefrei surfen: Wie Sie Ihre Website barrierearm gestalten und welche unerwarteten Wettbewerbsvorteile Sie dadurch gewinnen können.

Barrierefreiheit ist ein Thema, das bei Entwickler und Unternehmen häufig wenig Enthusiasmus auslöst. Oftmals wird das Thema eher stiefmütterlich behandelt und gilt als Zwang und Kostentreiber bei digitalen Projekten. Dabei ist es gar nicht so aufwendig, zumindest für grundlegende Zugänglichkeit zu sorgen. Das sorgt sogar für ein besseres Suchmaschinen-Ranking.

Was bedeutet Barrierefreiheit:

Barrierefreiheit bei digitalen Medien bedeutet, dass beispielsweise Menschen mit Sehbehinderungen oder anderen körperlichen oder geistigen Einschränkungen eine Website, eine App oder einen Social-Media-Kanal problemlos nutzen können. 

Ein einfaches Beispiel für eine Barriere ist ein Bild, in dem relevanter Text steht – vielleicht ein Screenshot einer Präsentation mit Bullet Points oder ein Sliderelement mit einem Aktionsangebot. Der Text ist jedoch Teil der Pixel des Bildes. Sehende können diesen Text lesen, Blinde können ihn nicht lesen. 

Bei einer barrierearmen Gestaltung wird das Bild mit einem aussagekräftigen Alt-Text versehen. Noch besser ist es, wenn Bilder nur rein dekorativ sind und textliche Inhalte Teil des gut strukturierten Fließtextes sind. Neben Menschen mit einer Behinderung  profitieren aber auch eine steigende Anzahl älterer Nutzer und auch Menschen mit Verständnisschwierigkeiten aufgrund von sprachlichen Barrieren von einer möglichst barrierefreien Gestaltung von Angeboten im Netz.

Die 3 Stufen der Barrierefreiheit

In den WCAG-Richtlinien sind drei Stufe definiert. Um eine Stufe zu erfüllen, müssen alle Punkte der Stufe erfüllt werden – oder es gibt eine Alternativversion der Website oder App, die diese Anforderungen erfüllen.

A: 
Dies beinhaltet unteranderem folgende Maßnahmen:

  • Korrekte Reihenfolge der Inhalte
  • Die Webseite ist mit der Tastatur bedienbar
  • Eindeutige Texte für Links
  • Der Inhalt von Bildern wird in Alt-Texten beschrieben
  • Untertitel oder Transkript für Videos und Audioinhalte

AA:
Hierzu zählen unter anderem:

  • dass der Kontrast zwischen Fließtext und Bild oder Hintergrund mindestens 4,5 zu 1 sein soll
  • dass der Text um 200 Prozent skalierbar ist, ohne dass das Design der Seite darunter leidet

AAA:
Dies betrifft zum Beispiel: 

  • Kein Blocksatz
  • Bilder sind nur dekorativ, haben also keine Bullet Points oder Botschaften
  • Gebärdensprache in Videos
  • Informationen über die Seite in Gebärdensprache
  • Gebärdensprache bei Live-Videos
  • Version in Leichter Sprache

Um eine erste Bewertung der Website zu erhalten kann man Tools wie Tenon.io oder den Chrome-Browser-Extensions AxeLighthouse und dem WCAG Accessibility Audit Developer UI nutzen. 

5 Prinzipien für mehr Barrierefreiheit:

1. Wahrnehmbar
Informationen und Bestandteile der Website müssen den Usern so präsentiert werden, dass sie diese wahrnehmen können. Ganz gleich ob blind, farbenblind, Brillenträger oder schwerhörig, jeder sollte den Inhalt erfassen.

2. Bedienbar
Bestandteile der Website und Navigation müssen bedienbar sein. Das bedeutet, dass beispielsweise das Menü gut strukturiert sein soll und dass die Bedienung auch rein mit der Tastatur funktioniert.

3. Verständlich
Informationen und Bedienung der Website müssen verständlich sein. Beispielsweise sollten auch Angebote in „Leichter Sprache“ angeboten werden und Formulare aufgeräumt und klar sein.

4. Robust
Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl von Technik interpretiert werden können, also auf dem Smartphone, auf dem Desktop-PC, mit Screenreadern und vielem mehr. 

5. Trennung von Technik, Design und Inhalt
Die Technik sollte der Website dienen und das Design sollte wirklich nur Design sein, damit die Inhalte für jeden erfassbar sind. Das bedeutet ganz einfach, dass die Website auch ohne CSS gut funktionieren muss. Dennoch darf sie selbstverständlich CSS nutzen!

Barrierefreiheit bietet echte Vorteile:

Was oftmals als lästig tituliert wird kann echte Wettbewerbsvorteile bringen: 

  1. für alle Menschen am PC, Tablet und Smartphone perfekt nutzbar, und das selbst bei vergessener Lesebrille oder bei einer ernsthaften Behinderung – so wird aus den Zielgruppen niemand ausgeschlossen
  2. für alle Suchmaschinen perfekt lesbar, denn Suchmaschinen sind blind – barrierefreie Gestaltung ist also Suchmaschinenoptimierung, die für mehr Traffic sorgen kann
  3. technisch schlank, wodurch die Ladezeiten reduziert werden – das verbessert das Nutzererlebnis und dient der Suchmaschinenoptimierung
  4. komplett durchdacht, weil Inhalte, Inhaltsaufbau und Formulare auf Nutzbarkeit optimiert wurden – die Seite ist sprichwörtlich blind bedienbar, was das Nutzererlebnis optimiert und dazu beiträgt, dass die kommunikativen Ziele erreicht werden

TYPO3 ist perfekt für barrierefreie Webseiten

Eine barrierefreie Website benötigt einen technischen Unterbau, der für die vielfältigen Anforderungen an Barrierefreiheit gerüstet ist. Die Wahl des Content Management Systems (CMS) am Anfang des Webseiten-Projekts ist eine wichtige Weichenstellung. Die Entscheidung irreversibel, sobald die technische Umsetzung startet.

Aus diesem Grund sollten Entscheider bei barrierefreien bzw. barrierearmen Website-Projekten sehr großen Wert auf die Auswahl der Web-Technologien legen, damit Limitationen schon in der Planungsphase auffallen und zum Ausschluss des CMS aus dem Rennen führen. 

DigitalMedien