An der Bauhaus-Universität Weimar ist mit TYPO3 ein Content Management System (CMS) etabliert, mit dem barrierefreie Internetseiten erstellt werden können.
Seit dem 23. September 2020 müssen alle neuen Internetseiten und alle im Internet verfügbaren Dokumente barrierefrei zugänglich sein. D.h. Inhalte müssen mit assistiven Technologien für blinde und sehbehinderte Menschen erfassbar sein. Die Steuerung über die Website muss auch für körperlich eingeschränkte Menschen über Tastatur möglich sein.
Das können Sie als Redakteurin oder Redakteur tun
Sie bearbeiten Teile der Website? So können Sie einen Teil zur Barrierefreiheit unserer Website beitragen:
- Verwendung von Alternativtexten bei Grafiken und Verlinkungen (TYPO3-Tutorial)
- Gute Strukturierung Ihres Textes durch die Verwendung von Absätzen und Zwischenüberschriften
- Verwendung der Aufzählungsfunktion des Rich Text Editors (TYPO3-Tutorial Nr. 3: Anlegen von Texten)
- Tabellen nur gezielt einsetzen, wenn eine andere Darstellung des Textes nicht möglich ist
- Sprachwechsel möglichst nicht auf einer Seite, sondern eine neue Sprachversion der Seite in TYPO3 anlegen und englische Texte dort einfügen (TYPO3-Tutorial zum Anlegen englischer Seiten)
2020 wurden folgende Verbesserungen umgesetzt:
Sprungmarken
Sprungmarken wurden eingefügt, sodass Menschen mit Screen Readern schnell zu den Kernstrukturelementen der Seite springen können (Hauptmenü, Unterseiten Menü).
Aria Labels
Die Seitenstruktur wurde überarbeitet und schlanker gemacht, um die Kompatibilität für diverse Systeme zu erhöhen. Ein schöner Nebeneffekt war die Verkürzung der Ladezeiten der Seite, die wir durch Komplexitätsabbau erreichten. Zusätzlich wurde das HTML großflächig durch Aria Labels erweitert, ebenfalls um die „Screenreadability“ zu verbessern. Dabei wurden auch veraltete Standards überholt und überarbeitet und auf den letzten Stand der Definitionen dieser Markup Syntax gehoben. Typo3 Plugins wurden getestet und wo notwendig auf den neuen Standard gebracht.
Keyboard-Navigation
Weiterhin sind die Hauptnavigationselemente für Keyboard-Navigation nutzbar gemacht worden. Ein großes Problem war das enorm umfangreiche Menü der Homepage, resultierend aus den vielen Unterseiten. Nun ist es schwer möglich, relevante Einträge aus dem Menü zu nehmen um den Umfang zu reduzieren und gleichzeitig die Erreichbarkeit der Inhalte zu gewährleisten. Im Rahmen der Mobile-first Kampagne wurde die Navigation um eine Menü-Suche erweitert. Neben der Keyboard-Navigation mit Pfeil und der Escape-Taste wurde ein „Input Listener“ für die Suche eingebaut. Durch das Drücken der Taste "s" wird die Suche-Funktion im Menü aktiviert.
Nach Rücksprache mit der Behinderten-Vertretung wurde diese Herangehensweise sehr gerne angenommen.
Kontraste
Grenzgängige Kontraste wurden adaptiert, was eine marginale visuelle Abänderung des ursprünglich Designs zu Folge hatte, aber ästhetisch kaum als Abstrich gewertet werden kann.
Eindeutigkeit von Link-Zielen
Wo Inhaltselemente multiple Links auf das gleiche Ziel enthielten, wurden die aussageschwachen Links aus der Tabulator-Folge entfernt, sodass Screenreader schneller durch die Seite springen können, was ebenfalls eine zentrale Forderung der WCAG darstellt.
Menü auf Startseite zur Einstellung von Barrierefreiheit
Individuelle Einstellungen am Webdesign können in folgenden Punkten vornehmen werden:
- Änderung der Kontrastansicht: Wechsel zwischen Farb- und Schwarz-Weiß-Ansicht,
- Wechsel in den Dark-Modus für lichtsensitive Augen: Wechsel der Hintergrundfarbe von Weiß zu Schwarz,
- Klick- und Fokus: Fokussierte Elemente werden schwarz hinterlegt und so visuell hervorgehoben
- Animation auf der Website: Beenden der Animation im Startslider oder im Banner-Bereich
In Planung
- Erweiterung um eine reizarme Leseansicht
- Untertitelung bzw. Transkription von Tonbeiträgen und Videos
- Video-Tutorials über die Erstellung von barrierefreien Dokumenten mit verschiedenen Programmen