Barrierefreiheit bei der Website: BITV/WCAG-Test und Barriere­frei­heits­stärkungs­gesetz (BFSG)

Wer zur Barrierefreiheit bei seiner Website verpflichtet ist - beispielsweise Behörden oder staatlich finanzierte oder co-finanzierte Websitebetreiber - hat das Thema Barrierefreiheit natürlich auf dem Radar. 

Doch immer mehr Organisationen und Unternehmen, für die Barrierfreiheit aktuell noch Kür ist, erkennen die Vorteile der Barrierefreiheit. Schon allein aus SEO-Sicht ist eine barriefreie Website ein Wettbewerbsvorteil. Doch aus dieser Kür wird bald Pflicht: Im März 2021 verschärften sich die Regeln des BITV-/WCAG-Tests, und im Juli 2021 wurde das neue Barrierefreiheitsstärkungsgesetz - BFSG - veröffentlicht, das Barriefreiheit für die allermeisten Online-Shops und selbst E-Book-Anbieter verpflichtend macht. Das gilt zwar erst ab 2025, aber wer heute einen neuen Artikel oder ein Produktfoto in seinen Online-Shop einstellt, der auch 2025 noch im Sortiment sein könnte, sollte schon heute auf Barrierefreiheit achten. 

Bei Websites bedeutet Barrierefreiheit, dass das Informationsangebot, der Shop sowie Online-Dienstleistungen selbst dann nutzbar sind, wenn Nutzer Beeinträchtigungen haben. Denken Sie hierbei nicht nur an lebenslange Behinderungen, sondern auch an temporäre Beeinträchtigungen wie eine verlorene Lesebrille oder eine gebrochene Mouse-Hand, die in Statistiken zur Barrieren nur unzureichend abgebildet werden. Das zeigt, dass Barrierefreiheit ein großes Thema ist. 30 Prozent der Bevölkerung sind auf eine Brille angewiesen. Wer die Brille verlegt hat, bekommt schon Probleme mit vielen mobilen Websites auf dem Smartphone. Und selbst mit 120 Prozent Sehkraft sind zu kleine Buttons oder schlecht lesbare Schrift ein Ärgernis. Ebenso freut sich jeder im Büro über Videountertitel – und nicht nur die Gehörlosen. Der Barriereabbau ist also ein Usability-Thema, das für alle Menschen interessant ist. Essenziell notwendig ist es jedoch für die vielen Menschen mit Behinderungen, die im Web und bei Apps mit zu berücksichtigen sind.

Typische Beeinträchtigungen und Abhilfen auf dem Weg zur Barrierefreiheit sind:

• Sehschwächen in vielen Abstufungen und Varianten: Bei einer kleinen Sehschwäche genügen größere Schriftarten sowie Texte und Bilder mit gutem Kontrast plus eine Skalierungsfunktion, bei Farbenblindheit kommt es auf die Farbwahl an, und bei Blindheit auf eine Seitenstruktur und alternative Bildbeschreibungen, mit denen ein Screenreader umgegen kann.
• Körperliche Beeinträchtigungen: Von der gebrochenen Mouse-Hand bis zum Tetraplegiker gilt, dass die Benutzung einer Website nicht allein mit der Maus funktionieren sollte, mit der man Mini-Buttons treffen muss.
• Gehörlose: Videos ohne Untertitel und Podcasts ohne Verschriftlichung sind für Gehörlose unbenutzbar. Beachten Sie auch das Thema Gebärdensprache - sie ist die Erstsprache von Gehörlosen.
• Geistige Beeinträchtigungen und Sprachbarrieren: Deutsches Fachchinesisch versteht man nicht gut, wenn man eine Leseschwäche hat oder nicht gut Deutsch kann. Abhilfe schaffen leicht verständliche Texte, eventuell auch in leichter Sprache.

Nach dem Website-Launch oder Website-Relaunch, bei dem Barrierefreiheit von Anfang an mitgedacht wurde, erfolgt am Ende der erlösende Test gemäß BITV und WCAG. Dieser Test besteht aus einigen Prüfschritten, mit denen die Barrierefreiheit sozusagen zertifiziert wird.

Jedoch wurde dieser Test im März 2021 verschärft. Statt 60 Prüfschritten gibt es nun 92 Prüfschritte. Das bedeutet: Der Test nach BITV 2.0 in der aktuellen Fassung enthält nun alle Elemente des weltweit einheitlichen WCAG-2.1-Tests und geht sogar darüber hinaus, um die Standards der Europäischen Union zu erfüllen. Auch die EN 301 549 ist damit natürlich abgedeckt. Wer also bei der eigenen Website oder App noch auf dem Barrierefreiheits-Stand vom Februar 2021 hängt, sollte einen externen Dienstleister - beispielsweise die Digitalagentur - beauftragen, um ein Audit zu starten.

Ein Auszug aus den Änderungen und Erweiterungen:

• Zusätzliche Barrierefreiheitsfunktionen sollen einfach auffindbar sein, wie ein High-Contrast-Modus. Bereits der Button für den High-Contrast-Modus muss einen hohen Kontrast aufweisen, damit man ihn erkennen kann – das ist absolut logisch. Ein Button für die Unterseiten in Leichter Sprache oder in Gebärdensprache sollte nicht im Footer versteckt werden, damit diese leicht auffindbar sind. Außerdem ist es fraglich, ob ein Icon als Button für Leichte Sprache ausreicht – was dieses Icon bedeutet, muss man ja auch erst mal gelernt haben. Die Kombination aus dem gängigen Icon für leichte Sprache plus Text erscheint ratsam. 
  Tipp: Ein High-Contrast-Modus muss nicht unbedingt sein, eine durchdachte barrierefreie Gestaltung achtet auf gute Farbkontraste. Gute Farbkontraste machen Websites ohnehin besser bedienbar, denken Sie an die Lesbarkeit von Inhalten auf einem Smartphone-Display bei Sonnenschein. 
• In Videos sollte die Untertitelfunktion so klar bedienbar sein wie Pause und Play. Die Untertitelfunktion sollte nicht in einem Untermenü des Videoplayers versteckt sein.
  Tipp: Aktivivieren Sie Untertitel bei Videos standardmäßig. Das hilft übrigens auch Hörenden, die sich Videos im Büro ohne Ton ansehen. 
• Im Backend des Content Management Systems sollte es einfach möglich sein, mittels Templates barrierefreie Seiten zu erstellen – TYPO3 bringt dafür alle technischen Voraussetzungen und Funktionen serienmäßig mit. Redakteuren soll, wenn möglich, durch sinnvolle Fehlermeldungen angezeigt werden, wenn ein Alt-Tag bei Bildern vergessen wurde.
  Tipp: Bilder mit Alt-Tags versehen ist immer ein bisschen lästig, aber es ist immer auch ein wichtiges Element der Suchmaschinenoptimierung. Außerdem sollten Bilder sowieso verständlich benannt werden und verschlagwortet werden, damit sie im CMS leicht auffindbar sind. 
• In der Erklärung zur Barrierefreiheit sollte erläutert werden, welche barrieremindernden Funktionen die Website anbietet. Wenn eine Vorlesefunktion eingebaut wurde, dann muss sie beschrieben werden. Wenn nur die Vorlesefunktion vom Browser oder Betriebssystem genutzt wird, muss das nicht erwähnt werden.
• Kommunikationsangebote für Menschen mit Behinderungen machen: E-Mail und Telefon sind hilfreiche Kommunikationskanäle für Menschen mit Sehbehinderung oder gehörlose Menschen. Wer einen Schritt weitergehen will, kann auch einen Gebärden-Videochat anbieten. Dieser Videochat muss nicht 24 Stunden am Tag erreichbar sein, eine funktionierende Möglichkeit zur Termin-Vereinbarung genügt bereits. Für den Videochat selbst können Sie auf externe Gebärdendolmetscher zurückgreifen.
  Tipp: Hinterfragen Sie Ihre Kommunikationsangebote für alle Arten von Interessenten oder Kunden. Bauen Sie Barrieren ab, damit Menschen mit Ihrer Organisation oder Ihrem Unternehmen einfacher in Kontakt treten können. Wäre ein Live-Chat oder ein Chat-Bot attraktiv? Könnten Video-Beratungen attraktiv sein? Haben Sie gute Kontaktformulare oder Termin-Vereinbarungs-Tools? Wie gut sind Ihre Informationsangebote oder Self-Service-Tools?

Schon seit 2019 gibt es eine EU-Richtlinie 2019/882 zur Barrierefreiheit, auch bekannt als European Accessibility Act (EAA), und diese wurde im Juli 2021 in ein deutsches Gesetz gegossen - mit dem Namen Barrierefreiheitsstärkungsgesetz, abgekürzt BFSG. Der Knackpunkt ist die Ausweitung der Barrierefreiheits-Pflicht auf deutlich mehr Anbieter, die ab 28. Juni 2025 sehr viele Website-Betreiber, App-Anbieter und Online-Shops treffen wird. Die Regeln sind EU-weit einheitlich. Wer außerhalb der EU wirtschaftlich aktiv ist, beispielsweise in der Schweiz, im Vereinigten Königreich oder den USA, muss natürlich die lokalen Länderbestimmungen beachten. Kontrolliert wird die Einhaltung der Bestimmungen mittels Marktüberwachung durch die Bundesanstalt für Arbeitsschutz und Arbeitsmedizin. In manchen Fällen können Bußgelder bis 100.000 Euro verhängt werden.

Das Schlüsselbegriff im BFSG ist im Paragraph 1, Absatz 3, Punkt 5 die Verpflichtung zur Barrierefreiheit bei "Dienstleistungen im elektronischen Geschäftsverkehr".

Was sind denn Dienstleistungen im elektronischen Geschäftsverkehr? Das ist Behördendeutsch für E-Commerce. 

Das bedeutet: Wer E-Commerce betreibt, muss seinen Shop barrierefrei machen. 

Betroffen sind:

• Der Online-Verkauf von Waren oder Dienstleistungen, vor allem an Privatkunden. Ob diese Ware oder Dienstleistung anschließend offline ausgeliefert oder erbracht wird, ist unerheblich. 
• Eingeschlossen sind unter anderem:
  • Käufe bei Online-Shops
  • Hotel- und Reisebuchungen
  • Kauf von Digitalabos oder digitalen Publikationen bei Verlagen
  • E-Books

Das bedeutet: Wer einen Online-Shop hat, muss seinen Shop auf Barrierefreiheit prüfen. 

Ausnahmen:

• Wenn Bestellungen manuell abgewickelt werden - also die Auftragsbestätigung von Hand per E-Mail versendet wird - ist es kein E-Commerce. 
• Alte Office-Dokumente, PDFs und Videos, die vor dem 28. Juni 2025 auf die Website hochgeladen wurden, müssen nicht barrierefrei gemacht werden. 
• Externe Inhalte, auf die man keinen Einfluss hat.
• Kleinstunternehmen bis 10 Mitarbeiter und bis zu 2 Millionen Euro Jahresumsatz oder Bilanzsumme sind befreit.

Was wird geprüft?

• Die Startseite
• Die Seite mit den Angaben zur Barrierefreiheit
• Die Log-in-Funktion
• Sitemap, Kontaktseite, Hilfeseite, Impressum, Datenschutzseite
• Suchfunktion
• Hauptfunktionen der Seite, beispielsweise ein Artikel im Online-Shop
• PDFs, auch Bedienungsanleitungen von Produkten

Bis Mitte 2025 muss ein Online-Shop komplett barrierefrei sein. Fangen Sie doch schon heute mit den Maßnahmen an, die Sie mit Bordmitteln hinbekommen. Ein guter Anlass ist das Einpflegen neuer Artikel:

• Auf eine saubere Struktur der Artikelseite achten, mit H1, H2 und so weiter
• Produktbilder verständlich benennen und Alt-Texte hinzfügen, vielleicht auch Bildunterschriften. Beschreiben Sie ruhig, was man auf dem Bild sieht. Das hilft Menschen mit Beeinträchtigungen genauso wie Suchmaschinen.
• Vermeiden Sie Farben mit schwachen Kontrasten, also beispielsweise hellgraue Schrift auf dunkelgrauem Hintergrund.
• Vermeiden Sie "Kleingedrucktes".
• Schreiben Sie verständliche Produkttexte.

Zusätzlich sollten Sie schon bald ein Audit der Seite machen oder machen lassen. Ein Audit bei einer Digitalagentur, die sich mit Barrierefreiheit auskennt - wie wir - hat den Vorteil, dass direkt ein Stufenplan mit Umsetzungsmaßnahmen entwickelt werden kann. Manche technische Problemen sind relativ schnell behebbar. 

Erste Tests in Eigenregie:

• Ist die Seite mit der Tastatur bedienbar?
• Lassen sich die Inhalte der Seite im Browser vergrößern?
• Sind Ihre Linktexte verständlich?

Hierbei hilft eine Agentur:

• Empfehlung von Tools, mit denen Sie Ihre Website zuerst selbst grob prüfen können. Da wenige Tools auf die EU-Spezifika ausgelegt sind, muss man die Ergebnisse mit Sachverstand interpretieren. Ein "katastrophales" Ergebnis kann manchmal mit einfachsten Mitteln in ein "sehr gut" verwandelt werden, und umgekehrt bedeutet ein "sehr gut" bei einem für die Seite suboptimalen Test vielleicht das Gegenteil. 
  Mögliche Tools sind:
  • W3C-Validator
  • Google Lighthouse
  • Silktide
  • Web Accessibility Checker
  • Colorblindly für Chrome
  • Color-Contrast-Accessibility Validator
  • Contrast Checker
  • Safari Reader-Mode
  • CSS im Browser abschalten
  • Tipp: Das Tool Wave ist für einen ersten Test gut geeignet. "Fehler" werden rot angezeigt. Wave ist allerdings sehr, sehr streng - vor allem bei der Bewertung von Textkontrasten - und erkennt trotzdem nicht alles, was für die deutsche Rechtslage wichtig ist.
• Erstellung der Unterseite "Erklärung zur Barrierefreiheit". Es ist durchaus möglich, dort viele Barrierefreiheits-Lücken aufzulisten, womit sie fast zu einer To-Do-Liste wird.
• Design-Optimierungen. Manchmal genügen schon eine erhöhte Schriftgröße und angepasste Farben. Das kann sogar die Darstellung des Shops auf Smartphones verbessern.   
• Technische Optimierungen wie das Setzen ARIA-Attributen oder Anpassungen bei Log-in- und Checkout-Prozessen.
• Responsive-Design-Anpassungen. Im Audit kann man herausfinden, ob Menüs und Inhalte auf allen Bildschirmgrößen perfekt dargestellt werden. Anpassungen sind manchmal unaufwändig.