Barrierefreie Websites
Mit Franziska Radek haben wir uns zum Thema Barrierefreiheit unterhalten. Franzi ist Frontend Entwicklerin bei dotfly und seit 4 Jahren an Bord.
Was bedeutet Barrierefreiheit im Internet?
Barrierefreiheit im Internet bedeutet, dass auf jeder Form einer Website keine Barrieren herrschen. Also konkret:
Es werden verschiedene Arten von Beeinträchtigung berücksichtigt, z.B. Sehbeeinträchtigung und Blindheit, Hörbeeinträchtigung und Gehörlosigkeit, Kognitive Beeinträchtigung und Lernbehinderung, Motorische Beeinträchtigung und Photosensibilität.
In all diesen Belangen wird der optimale Zustand angestrebt, damit das Internet endlich inklusiv wird und jeder Mensch auf jeder Seite zurechtkommt. Egal ob es ein Onlineshop ist oder eine Unternehmensseite, sodass jede User:in alle Infos in Erfahrung bringen oder jeden Artikel in den Warenkorb legen kann.
Aber was heißt das jetzt genau in der Umsetzung?
Alle Informationen, die sehend erfasst werden können, auch hörbar machen. Alle Informationen, die hörend erfasst werden können, auch sichtbar machen. Und auch Informationen nicht nur über Farben transportieren.
Es gibt schon viele unterstützende Maßnahmen, wie zum Beispiel den Screenreader bei Sehbeeinträchtigung oder eine Maus, die mit dem Mund bedient wird bei motorischen Beeinträchtigungen.
Nehmen wir zum Beispiel Tabellen. Werden Tabellen als Bild dargestellt, können diese Bilder nicht ausgelesen werden. Sie können zwar barrierearm mit Worten beschrieben werden, aber somit fällt der Vorteil einer übersichtlichen Tabelle natürlich weg. Als Lösung empfehle ich immer die Tabelle als HTML-Format darzustellen, damit diese von dem Screenreader richtig ausgelesen werden kann. Bedeutet also eine Tabelle als Bild darzustellen ist nicht barrierearm.
Was ist denn generell mit Bildern?
Bilder an sich sind kein Problem, da diese so ausgeschmückt werden können, sodass sie vom Screenreader ausgelesen werden können. Wir stellen die nötigen Felder im Backend zur Verfügung, sodass beim Pflegen der Seite genaue Beschreibungen gemacht werden können. Dies ist zumeist kein Pflichtfeld, aber beim Hochladen des Bildes tauchen die zwei oder drei Felder für den Input und die genaue Beschreibung auf.
Ab dann liegt es in der Hand der zuständigen Redakteure, bzw. der Seitepflegenden; bei uns liegt ja „nur“ die Technik, danach muss die Seite redaktionell auf dem Laufenden gehalten werden. Damit eine Seite langfristig barrierearm gehalten wird, muss das ganze Team zusammenspielen.
Wenn Du zum Beispiel ein Bild mit einer Blumenwiese und einer Frau auf Deiner Seite verwendest beschreibst du es genau: "Hier sehen wir eine Frau mit langen braunen Haaren, die auf einer hügeligen Blumenwiese mit gelben Blumen steht." Man sollte keine wichtigen Daten und Fakten nur mit Bildern transportieren, sondern diese auch textlich beschreiben.
Langfristige Kundenbeziehungen sind deshalb super wichtig für uns, damit das Zusammenspiel zwischen Technik und Redaktion funktioniert und immer wieder der Content gegengecheckt werden kann. Ebenso die Fragestellung, was wir auf Backend-Seite liefern müssen, damit die Seite weiterhin barrierearm gepflegt werden kann. Welche Module müssen wir zur Verfügung stellen? Der Bedarf wechselt natürlich auch auf Seite der Kund:innen und damit auch die Anforderungen für uns.
Was bedeutet das für Onlineshops?
Beim Shop gibt es andere Schwerpunkte als bei einer Corporate Seite. Hier liegt der Schwerpunkt auf dem Bestellverlauf, also dem Auswählen der Produkte, das „in-den-Warenkorb-legen“ und dem Bestellformular. Es geht also weniger um den Informationsfluss, sondern vielmehr um die Bestellstrecke.
Außerdem sollte darauf geachtet werden, dass alle angebotenen Bezahlvarianten ebenfalls barrierearm aufgebaut sind, wenn also beispielsweise zu eine Bezahldienst wie Paypal weitergeleitet wird. Bisher haben wir schon immer darauf geachtet. Die Beratung unserer Kund:innen geht also ganzheitlich in diese Richtung: Wenn mit externen Seiten zusammengearbeitet wird, dann auch darauf achten, dass diese Barrierearm sind.
Was sind die Vorteile und Chancen einer barrierearmen Seite?
Wir holen die komplette Gesellschaft ab. Im besten Fall wird keine Gruppe bevorzugt oder benachteiligt. Bisher gilt es noch als Wettbewerbsvorteil, wenn Onlineshops barrierefrei sind.
Ganz viele Dinge werden jetzt optimiert, die vielen Kund:innen bisher noch nicht bewusst waren. Zum Beispiel ist vielen Redakteur:innen nicht klar, dass man Tabellen mit Animationen und Hover-Effekten abbilden kann, anstatt nur ein verschwommenes Bild, welches im worst case auch responsiv nicht lesbar ist.
Viele Themen supporten die Barrierearmut und machen die Seite häufig auch besser und vom Design her ansprechender. Dann ist der Hinweis „Du musst aber jetzt barrierearm sein“ auch einfacher für uns zu verargumentieren.
Was bedeutet das Barrierefreiheitsstärkungsgesetz (BFSG)?
Das Gesetz tritt zum 28.06.2025 in Kraft. Mit dem BFSG wird die EU-Richtlinie zur Barrierefreiheit (Europan Accessibility Act, kurz: EAA) umgesetzt.
Das Ziel des sperrigen Begriffs Barrierefreiheitsstärkungsgesetz ist einfach formuliert: Man wünscht sich eine inklusive Gesellschaft, allerdings sind die Maßstäbe noch nicht 100%ig geklärt. Wie hoch darf zum Beispiel der Grad der Barrierearmut noch sein? Und was sind die expliziten Folgen für nicht-barrierefreie Websites?
Ich wünsche mir einen einheitlichen Test mit einheitlichen, öffentlich einsehbaren Parametern. Momentan arbeiten wir lediglich mit Richtlinien.
Hast du noch Beispiele von barrierefreien Websites?
Wir haben schon im Jahre 2021 die Seite von KOFA (Kompetenzzentrum Fachkräftesicherung) barrierearm gestaltet. Hier wurden wir mit einem Relaunch betraut, der den Benutzer:innen die Orientierung erleichtern sollte. Es wurden gewachsene Strukturen aufgebrochen und die Navigation komplett neu konzipiert. Seitdem ist es möglich, die komplette Website nur noch mit Hilfe der Tastatur durch zu navigieren. Die Bildsprache haben wir selbstverständlich direkt für den Screenreader optimiert.
Seit wann arbeitest Du schon so?
Ganz bewusst arbeite ich schon immer so, dass die Seiten bestmöglich barrierefrei sind. Zum Beispiel haben wir schon immer auf Bildbeschreibungen sehr großen Wert gelegt.
Seit zwei Jahren legen wir agenturweit den höchsten Wert bei unseren Projekten auf das Thema und versuchen auch alle unsere Kund:innen davon zu überzeugen. Beispielsweise haben wir das sogenannte „Starterkit“ für Coprorate Seiten entwickelt, welches ein schnelles und kostengünstigeres Aufsetzen von Websites ermöglicht, die komplett barrierefrei sind. Und das schon lange Zeit, bevor das neue Gesetz in Kraft tritt.
Nach besten Wissen und Gewissen und mit verfügbaren Accessibility-Tests, überprüfen wir uns und unserer Arbeit. Aber eigentlich bräuchten wir ein anerkanntes und EU-weit gültiges Testverfahren.
Was empfiehlst Du Kund:innen?
Barrierearmut sollte schon ganz am Anfang mit eingeplant werden, denn wenn es konzeptionell implementiert ist, hilft es natürlich mir in der Technik enorm. Wichtig ist, dass alle einzelnen Gewerke involviert sind und wir uns so ein “Ausbessern im Nachgang” ersparen.
Außerdem ist eine Empfehlung von uns immer, dass die Redakteur:innen auf Kundenseite nicht ständig switchen, sondern nur wenige Zugriff haben. So können wir vernünftig schulen und die jeweiligen Personen sensibilisieren.
Noch nicht genug?
Von uns gibt's noch mehr. Zu Technologie, Design, Marke, Kultur und einigem mehr. Übrigens auch ab und zu per Newsletter. Oder einfach hier auf unserer Seite: