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

Barrierefrei 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 barrierefreien oder 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. Die Grenzen zwischen barrierearm und barrierefrei sind fließend. 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.

In den WCAG-Richtlinien sind drei Stufen definiert, um Barrieren auf Websites abzubauen. 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. 

Barrierefrei, Stufe 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

Barrierefrei, Stufe 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

Barrierefrei, Stufe 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 Axe, Lighthouse und dem WCAG Accessibility Audit Developer UI nutzen. 

Um eine Seite barrierefrei zu gestalten, sollte man sich mit den Grundprinzipen vertraut machen anstatt einfach nur Checklisten abzuhaken. 

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.

Das Wort "Barriefrei" sorgt bei Website-Projekten nicht immer für gute Laune. Was oftmals als lästig tituliert wird, kann jedoch echte Wettbewerbsvorteile bringen: 

1. Die Website ist 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. Die Website ist für alle Suchmaschinen perfekt lesbar, denn Suchmaschinen sind blind – barrierefreie Gestaltung ist also Suchmaschinenoptimierung (SEO), die für mehr Traffic sorgen kann
3. Die barrierefreie Website technisch schlank, wodurch die Ladezeiten reduziert werden – das verbessert das Nutzererlebnis und dient der Suchmaschinenoptimierung
4. Die barrierefreie Website ist 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

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 oder 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, wenn es um eine neue Website oder einen Relaunch geht. TYPO3 ist seit vielen Jahren dafür bekannt, dass sich barrierefreie Websites einfach realisieren lassen. Auch bei kleineren Projekten lässt sich ein barrierefreies Design effizient umsetzen, beispielsweise mit dem schlanken CMS Kirby.