Accessibility Code Sprint bei CPS mit großer Wirkung
Von Alexa Kreßmann und Sarah Edding, 29.08.2023
Gemeinsam mit einem engagierten Team aus insgesamt 15 TYPO3-Enthusiasten haben wir im Juni 2023 vier intensive Sprint-Tage in unseren Räumlichkeiten in Berlin genutzt, um die Barrierefreiheit von TYPO3 in Bezug auf das Introduction Package und das Backend nachhaltig zu verbessern.
Zum Hintergrund
TYPO3 wird in Deutschland stark im öffentlichen Sektor genutzt. Öffentliche Stellen des Bundes und der Länder, die TYPO3 nutzen, sind seit 2018 auf barrierefreie Themes und Module angewiesen. Auf bitvtest.de ist TYPO3 das Content-Management-System mit der höchsten Anzahl zertifizierter Webauftritte. Durch das Barrierefreiheitsstärkungsgesetz werden ab 2025 auch Produkte und Dienstleistungen aus dem wirtschaftlichen Bereich zur Barrierefreiheit verpflichtet. Sie müssen im laufenden Betrieb jederzeit einen BITV-Test bestehen.
Das TYPO3 Introduction Package ist ein Set von Modulen, Templates und Platzhalterinhalten, das es den Betreiber*innen von Websites erlaubt, eine fertig gestaltete Seite „auf Knopfdruck“ auszurollen. Die Erstellung von Websites auf TYPO3-Basis ist durch das Package mit deutlich weniger Entwicklungsarbeit verbunden.
TYPO3 möchte es Entwickler*innen ermöglichen, Webseiten auf TYPO3-Basis von Anfang an barrierefrei zu gestalten. Dazu sollte das TYPO3 Introduction Package als grundlegende Vorlage dienen und barrierefrei nutzbar gemacht werden.
Das Sprint-Team
CPS war bei diesem spannenden Projekt direkt mit an Bord. Mit einem mehr als sieben Jahre bestehenden Accessibility Team fühlen wir uns in der digitalen Barrierefreiheit wie zu Hause. Wir haben schon Fachartikel zur Barrierefreiheit des TYPO3-Backends publiziert und zuletzt auch eine Kunden-Website erfolgreich mit dem BIK-BITV-Prüfsiegel zertifizieren lassen.
Das Sprint-Team bestand aus einer vielfältigen Gruppe: Neben Alexa Kreßmann und Sarah Edding aus dem CPS-Accessibility-Team sowie einige unserer Kolleg*innen (Elias Häußler, Juliane Wundermann, Marno Schmigotzki und Ralf Hoffmann) waren auch Kolleg*innen von undkonsorten, Jasmina Ließmann (3pc), Christian Kuhn, Lina Wolf, Oliver Thiele sowie Benjamin Kott vom TYPO3-Core-Team beteiligt.
Das Ziel: Ein barrierefreies CMS-Theme erschaffen
Das Ziel des Sprints war, den BIK-BITV-Test zu bestehen und damit einen Beitrag zur Barrierefreiheit von Content-Management-Systemen (CMS) zu leisten. Durch die Barrierefreiheit des TYPO3 Introduction Packages kann eine darauf aufgebaute Website eine barrierefreie Nutzung ermöglichen, zum Beispiel mit assistiven Technologien wie Braille-Geräten, Bildschirmvergrößerung, Vorlesesoftware und Sprachsteuerungsfunktionen. Somit können mehr Menschen an digitalen Web-Angeboten partizipieren.
Der Weg zum Ziel: Accessibility Code Sprint
In dem Projekt ging es darum, das TYPO3 Introduction Package auf eine Prüfinstanz einzuspielen, es auf Barrierefreiheit zu testen, Tickets zu formulieren und innerhalb eines viertägigen Code Sprints nachhaltig Verbesserungen im Frontend und Backend des Themes umzusetzen.
In Vorbereitung auf den Sprint haben wir alle 84 Seiten der Instanz einer BITV/WCAG-Prüfung unterzogen. Dabei wurden auch die Ergebnisse der Bachelorarbeit „Umsetzung barrierefreier Websites anhand des TYPO3 Introduction Package“ von Carolin Jacob (mittlerweile Bachelor of Science, Gratulation!) mit einbezogen. Das Ergebnis: 55 Tickets. Diese wurden nach redaktioneller oder entwicklungsseitiger Umsetzbarkeit sortiert und den jeweiligen WCAG-Erfolgskriterien zugeordnet.
Die vorgeschlagenen Lösungsansätze stießen auf gewisse Grenzen, da Änderungen am System weitreichendere Auswirkungen hatten als erwartet. Auch bestehende Live-Seiten, die auf dem Introduction Package basieren, würden beeinflusst werden. Daher wurden in Absprache Breaking Changes umgesetzt, die über Updates nachträglich in das Package eingespielt werden.
Die Betreiber*innen der Websites haben so die Kontrolle darüber, welche Änderungen sie für ihre Instanz übernehmen möchten.
Barrierefreie Umsetzungen
Wir möchten im Folgenden einige Beispiele nennen, welche Komponenten wir barrierefrei gestaltet haben.
Beispiel 1: Die barrierefreie Farbpalette
Eine besondere Herausforderung bestand darin, barrierefreie Farbkontraste instanzübergreifend sicherzustellen. Im TYPO3 Introduction Package stellen die Autor*innen der einzelnen Instanzen nach ihren Vorstellungen Farbpaletten zusammen. Auf der Basis dieser Farbsets werden Kombinationen von Schrift- und Hintergrundfarbe berechnet, die den barrierefreien Kontrastanforderungen entsprechen. Die Berechnung der Farbkombinationen musste angepasst werden, damit die Anforderungen für Textkontraste erfüllt werden können.
Beispiel 2: Die barrierefreie Hauptnavigation
Die Hauptnavigation barrierefrei zu gestalten, war eine weitere große Anpassung. Die Menüpunkte werden nun bei Tastaturfokus mit einem kontrastreichen Rahmen versehen. Die Ansteuerung eines Menüpunkts wird zusätzlich zur veränderten Schriftfarbe über ein Symbol gekennzeichnet. Nach der Auswahl eines Menüpunkts und erneutem Öffnen des Menüs wird der aktive Menüpunkt ebenfalls entsprechend markiert.
Beispiel 3: Nicht sichtbare Beschriftungen und Labels
Ein großes Problem vieler Websites sind fehlende Beschriftungen und Labels für Screenreader-User. Im TYPO3 Introduction Package haben wir daher in Komponenten wie Karussell, Lightbox und im Footer Anpassungen zur Verbesserung der Barrierefreiheit vorgenommen.
Im Karussell sind die Controls nun kontrastreich gestaltet, die Buttons verändern je nach Status ihre Farbe und Größe. Eine unsichtbare Beschriftung für Screenreader-User benennt ab sofort in der jeweiligen Systemsprache die Aktion: Zu welchem Slide gelange ich und wie heißt dessen Überschrift.
In der Lightbox existieren ab sofort ebenfalls Beschriftungen der interaktiven Elemente: Es wird Screenreader-Usern mitgeteilt, dass sich das Bild in einer vergrößerten Darstellung öffnet und bei mehreren Bildern in der Slider-Ansicht sind die Controls und der Schließen-Button entsprechend beschriftet.
Im Footer-Bereich sind die Social-Media-Icons vor Screenreadern versteckt und beschriftet worden. Die Nutzer*innen von Vorlesetechnologien wissen somit, dass sie beispielsweise zur Facebook-Seite von TYPO3 abspringen.
Weitere Benefits
Nur, um noch einige Benefits zu nennen: Im Backend wurde das Styling von Überschriften von der Hierarchie entkoppelt. Das heißt, Autor*innen können nun eine H2 als H4 auszeichnen. Das Risiko von fehlerhaft eingesetzten Überschriften aus gestalterischen Motiven sinkt.
Zudem wurde der Rahmen des Tastaturfokus im gesamten Theme vereinheitlicht und gut sichtbar gemacht.
Gemeinsam haben wir es geschafft
Nach vier Sprint-Tagen, drei Wochen weiterer Entwicklungs- und Testingaufwände und insgesamt 62 Tickets hat das TYPO3 Introduction Package am 17. August 2023 das BIK-BITV-Prüfsiegel erhalten und ist somit offiziell barrierefrei zertifiziert.
Fazit: Was bedeutet das für die Nutzung des Packages?
Laufende Instanzen des Introduction Packages werden mit den anstehenden Updates deutlich besser nutzbar. Viele Verbesserungen sind mit dem bloßen Auge nicht sichtbar, haben aber deutliche Auswirkungen auf die Barrierefreiheit.
Weitere Verbesserungen, wie die optimierten Farbkontraste oder die neue Hauptnavigation, stehen den Autor*innen in Zukunft als Teil eines Feature-Sets zur Barrierefreiheit zur Verfügung.