Auf dem Weg zur barrierefreien Website – ein Erfahrungsbericht

Im Dezember 2023 ging nach intensiver Zeit der Entwicklung mit unserer Agentur ressourcenmangel die neue Accso-Website live. Unser Marketing-Team verabschiedete sich von historisch gewachsener Unübersichtlichkeit im Backend und technischer Komplexität und freute sich auf ein neues CMS (Craft), ein neues Corporate Design, eine höhere Benutzerfreundlichkeit. So weit so gut. 

Alle, die schon einmal einen Website-Relaunch begleitet haben, wissen: Damit ist es nicht getan. Seit dem Livegang ist einiges passiert und ein kleines Team kümmert sich kontinuierlich um die Weiterentwicklung und Optimierung unserer Website. 

Vor einigen Monaten zeichnete sich dann ein größeres Projekt ab: Auch wenn von Anfang an die Barrierefreiheit der Website mitgedacht wurde, fielen immer wieder Punkte auf, die noch nicht ideal waren. Die Expert:innen unserer hauseigenen UX-Community haben sich ebenfalls intensiv mit der neuen Website auseinandergesetzt. Für unser Entwicklungsteam, aber auch für mich als Product Ownerin und die Redakteurinnen, war es dabei häufig schwer einzuschätzen, wie groß die Baustelle hier wirklich ist, welcher Aufwand dahintersteckt und ob es sich lohnt, Zeit in das Thema zu investieren. Spoiler: es lohnt sich! 

Nach einem Besuch der Java User Group Darmstadt und einem Erfahrungsbericht von Matthias Bünger zur Umsetzung von Barrierefreiheit stand der Entschluss fest: wir widmen uns dem Thema intensiv und führen den BITV-Test durch. 

6 Wochen und 98 Prüfschritte in Richtung Barrierefreiheit – Status quo mit dem BITV-Test ermitteln 

Der BIK BITV- / EN 301 549-Test (Web) ist ein Verfahren zur umfassenden und zuverlässigen Prüfung der Barrierefreiheit von Websites, Webanwendungen und Apps. Grundlage sind die Anforderungen der BITV 2.0 , die die europäische Norm EN 301 549 V3.2.1 (PDF) referenziert. Die EN 301 549 enthält neben den WCAG 2.1-Kriterien für den Bereich Web weitere verpflichtende Anforderungen. 

Anhand verschiedener Schritte lässt sich prüfen, wie der Stand der Barrierefreiheit von Web-Produkten ist. Das Ergebnis ist ein detaillierter Prüfbericht, der aufzeigt, welche Maßnahmen als nächstes ergriffen werden sollten. Die perfekte Grundlage also für die Einschätzung unserer Ausgangslage. 

Der Test kann entweder beauftragt oder selbst durchgeführt werden. Wir entschieden uns, den Test selbst durchzuführen, um dabei gleich ein Grundverständnis für Barrierefreiheit im Redaktionsteam zu entwickeln.  

Disclaimer: Bei der Selbstbewertung findet keine unabhängige Qualitätssicherung statt. Das bedeutet, die Ergebnisse hängen stark vom Wissensstand und der Sorgfalt der testenden Person ab. Wer wirklich sichergehen will, benötigt verschiedene Tester:innen mit verschiedenen Einschränkungen.  

Ablauf der Prüfung 

Auf Rat von Tobias Holstein – Community-Lead UX – der den Test bereits bei Kunden durchgeführt hat, blockte ich mir einen Tag pro Woche in den nächsten 5 Wochen. Eine gute Empfehlung, da die Prüfung durch die 98 kleinteilige Prüfschritte und den Einsatz verschiedener Tools, die installiert und wieder deinstalliert werden müssen, sehr mühsam ist. Am Ende hat sich die gesamte Prüfung der Website über 6 Wochen erstreckt, wovon ich jeweils einen halben bis ganzen Tag pro Woche dafür aufgewendet habe.  

Für die Selbstprüfung loggt man sich auf der Website des Tests ein und legt einen Prüfauftrag an. Anschließend wird man durch die verschiedenen Prüfschritte geführt und erhält detaillierte Beschreibungen, was wann, wo und wie überprüft werden muss. Hierzu gehören beispielsweise Untertitel bei Videos, Alternativtexte, Farbkontraste, Tastaturbedienbarkeit aber auch die Dokumentation nicht-barrierefreier Bereiche.  

Besonders hilfreich sind dabei die verschiedenen Tool-Tipps, die man auf der Seite des BITV-Tests erhält. Diese ermöglichen es auch Personen ohne Entwicklungserfahrung, die meisten Prüfschritte durchzuführen. Die Ergebnisse jedes Schritts lassen sich komfortabel in der Webanwendung festhalten. 

Ich installierte mir also verschiedene Tools wie Screenreader, Colour Contrast Analyser und ein Web Accessibility Evaluation Tool und legte los. Parallel zum Test erstellte ich Jira-Tickets für das Entwicklungsteam und To-Dos für unsere Redakteurinnen. 

Viele Jira-Tickets und Learnings für das Redaktions-Team für mehr Barrierefreiheit bei Accso 

Das Ergebnis waren 22 Jira-Tickets und einige Erkenntnisse über notwendige Änderungen in der Arbeitsweise des Redaktionsteams. Es hat mich aber sehr gefreut, dass wir eine Vielzahl der Prüfschritte bereits erfüllten. Hier ein paar Einblicke: 

Technische Verbesserungen: 

Die für uns größte Baustelle aus technischer Sicht war die Tastatur-Bedienbarkeit der Seite. Slider und Karussell-Elemente waren nur schwer erreichbar, konnten nicht mehr verlassen werden, oder nicht geklickt werden. Elemente waren zwar anwählbar aber wurden nicht fokussiert, Dropdowns ließen sich nicht öffnen.  

Auch bei der Beschriftung von Elementen mit HTML oder durch aria-Labels gab es noch einige offene Punkte. 

Redaktionelle Verbesserungen: 

Auch auf technischer Ebene waren noch einige Verbesserungen durchzuführen. Für die redaktionelle Arbeit unseres Marketingteams bedeutet die Berücksichtigung von Barrierefreiheit zudem ein Umdenken im täglichen Arbeiten. Unsere Erkenntnisse: 

• Untertitel in Videos helfen nicht nur Menschen mit Beeinträchtigung, sondern machen auch den Konsum ohne Ton bspw. auf Social Media überhaupt erst möglich.
• Alternativ-Texte bei Bildern sind schnell erstellt – hier kann KI super unterstützen! Nachpflegen macht weniger Spaß.
• Kontraste bei der Farbauswahl von Anfang an mitdenken, erleichtert einiges.
• Abschauen lohnt sich: viele Einrichtungen aus dem öffentlichen Bereich sind durch die BITV 2.0 verpflichtet ihre Services barrierefrei zu gestalten. Hieran kann man sich orientieren und Inspirationen für Erklärungen zur Barrierefreiheit sammeln. 

Tipps für mehr Barrierefreiheit: 

• Lieber halbe oder einzelne Tage über einen längeren Zeitraum zum Prüfen einplanen, statt alles an einem Stück zu erledigen.
• Es ist von Vorteil, wenn man die Website und die verwendeten Module kennt. So kann man die für die Prüfschritte relevanten Seiten schnell identifizieren.
• Als unerfahrene Person hilft es, Expert:innen zu Details befragen zu können. 

Hilfreiche Tools für die tägliche Arbeit: 

• Colour Contrast Analyser für kontrastreiche Grafiken und die passende Farbauswahl
• ChatGPT & Co für das Erstellen von ALT-Texten bei komplexen Bildern und Grafiken
• Wave als Hilfsmittel für das Aufzeigen und Erklären von Barrieren
• JavaScript Library – KoliBri als Komponentenbibliothek für die Barrierefreiheit

Fazit: 

Der BITV-Test hat mein Bewusstsein für das Thema Barrierefreiheit enorm gesteigert und war der ideale Start, unsere Website weiterzuentwickeln. Wir wissen jetzt, welche offenen To-Dos wir noch haben und können diese Stück für Stück abarbeiten. Unsere Website ist zwar an einigen Stellen noch nicht barrierefrei, aber wir wissen jetzt, wo wir anfangen können.  

Vielen Dank an Tobias Holstein und Jonas Brüggen für die fachliche Unterstützung!