Mitte 2025 wird es eine Neuerung für Websites und Apps geben: eine gesetzliche Pflicht zur Barrierefreiheit – das sogenannte Barrierefreiheitsstärkungsgesetz (BFSG). Dieses setzt die EU-Richtlinie des European Accessibility Act (EAA) um, damit in ganz Europa die gleichen Vorgaben zur Barrierefreiheit gelten. Das Ganze basiert auf der europäischen Norm EN 301 549 – und diese orientiert sich größtenteils an den internationalen Richtlinien für barrierefreie Webinhalte (WCAG). Wirkt zunächst wie ein undurchsichtiger, dunkler Wald, aber wir haben es für euch auseinander gefriemelt.
Folgend findet ihr eine Checkliste zur Barrierefreiheit auf eurer Website.
Jeder der nachstehenden Punkte kann Änderungen an der Website bedingen – sowohl im Code als auch hinsichtlich des Inhalts und der Gestaltung.
Eine bzw. mehrere Informationen werden nicht ausschließlich durch Farbe(n) übermittelt.
Hinsichtlich des Kontrastverhältnisses der Schriftfarbe zur Hintergrundfarbe muss mindestens der Wert 4,5:1 (Level AA) bzw. 7:1 (Level AAA) eingehalten werden.
Bei großer Schrift (ab 18 Punkt oder 14 Punkt in fett) ist das Kontrastverhältnis zur Hintergrundfarbe mindestens 3:1 (Level AA) bzw. 4,5:1 (Level AAA).
Text ist als links- oder rechtsbündiger Flattersatz ausgerichtet.
Die Zeilenlänge beträgt maximal 80 Zeichen.
Es ist möglich, dass Vorder- und Hintergrundfarben durch die Anwender*innen gewechselt werden können.
Der Zeilenabstand in Fließtexten ist mindestens 1,5-fach innerhalb von Absätzen. Der Abstand zwischen Absätzen ist mindestens 1,5-fach so groß wie der Zeilenabstand.
Die Sprache ist im HTML-Element als Attribut angelegt; hier ein Beispiel: <html lang=”de”>
Dieses Sprachen-Attribut ist bei Zitaten im Blockquote-Element angegeben, das kann exemplarisch so aussehen: <blockquote lang=”es”>.
Es wird eine Version in leichter Sprache zur Verfügung gestellt.
Fachwörter oder andere Begriffe, die nicht eindeutig sind, werden in einem Glossar, einer Definitionsliste oder ähnlichem aufgeführt und erklärt.
Abkürzungen werden bei der ersten Verwendung ausgeschrieben. Sollte die Aussprache elementar sein, folgt diese direkt nach dem Wort, über eine Verlinkung oder über ein Glossar.
Elemente im HTML-Quelltext müssen eine logische Reihenfolge haben, damit Screenreader und andere Dienste diese nachvollziehbar wiedergeben können.
Eine inhaltliche Verwirrung durch positionierte Elemente mit CSS werden ausgeschlossen.
Die Website erhält durch Überschriften eine Struktur und wird durch sie gegliedert.
Alle Überschriften sind im HTML-Quelltext mit dem Überschriften-Element (h1, h2, h3 usw.) ausgezeichnet.
Sämtliche Überschriften dienen dazu Inhaltsabschnitte einzuleiten (nur Level AAA).
Im HTML-Quelltext sind Aufzählungen als Listen (ul, ol, dl) formatiert.
Zitate werden als <blockquote>- und <cite>-Elemente im HTML-Quelltext eingebunden.
Bei Datentabellen werden beispielsweise Spalten-, Zeilen- und Tabellenüberschriften als solche gekennzeichnet. Inhalte werden linearisiert.
Wenn Inhalte um 200% skaliert oder lediglich mit einer Breite von 320 Pixeln angezeigt werden, bleibt die Lesbarkeit und Funktionalität erhalten. Hierfür wird in den meisten Fällen ein responsives Design benötigt.
HTML-Quelltext ist fehlerfrei sowie standardkonform.
Inhalte, die generiert oder selbst programmiert wurden, werden so ausgezeichnet, dass eine Unterstützung der Barrierefreiheit gegeben ist.
Mithilfe des ALT-Attributs werden Bildelemente passend mit einem alternativen Text beschrieben.
Sollte der alternative Text nicht genügen, um relevante Inhalte zu transportieren, so wird eine ausführliche Beschreibung zur Verfügung gestellt. Im alternativen Text wird auf diese Option hingewiesen.
Dekorative Bilder und Grafiken enthalten ein leeres ALT-Attribut. Sie sind entweder über das aria-hidden-Attribut ausgeblendet oder werden durch CSS als Hintergrund eingebunden.
Frames sowie Iframes sind beide entsprechend betitelt.
Anstelle von Schriftgrafiken wird Text für Inhalte verwendet (Logos sind dabei ausgenommen).
Für alle relevanten Audio-Inhalte (MP3-Dateien, Podcasts etc.) wird ein Transkript zur Verfügung gestellt.
Formate wie Videos, Webcasts, Webkonferenzen, Videostreams etc. sind synchron untertitelt.
Sollten in einem Video relevante Inhalte nur visuell verständlich sein, werde hierfür Audiobeschreibungen bereitgestellt.
Bei Sprachwiedergaben sind entweder keine oder sehr leise Hintergrundgeräusche erlaubt – bzw. lassen sich diese abschalten.
Wenn Inhalte (bspw. Laufschriften, Slideshows) mehr als fünf Sekunden automatisch blinken oder sich bewegen, können sie pausiert, gestoppt oder ausgeblendet werden.
Inhalte, die sich automatisch aktualisieren (Newsticker, Chatnachrichten usw.), können pausiert, gestoppt, ausgeblendet oder manuell kontrolliert werden.
Eine Zeitlimitierung gibt es nicht. Ausnahme ist, dass Nutzer:innen die zeitliche Begrenzung abschalten oder anpassen können, bevor sie darauf treffen.
Es gibt die Möglichkeit Audio- und Video-Inhalte zu stoppen, wenn diese automatisch länger als 3 Sekunden dauern.
Auch wenn ein Inhalt fokussiert wird, verändert er sich nicht.
Wenn Nutzer:innen eine Eingabe tätigen, verändert sich der Inhalt nicht ohne Ankündigung.
Der Kontext kann ausschließlich durch eine Bestätigung (nur Level AAA) verändert werden.
Eine Website enthält keine Inhalte oder Elemente, die öfter als drei Mal in der einer Sekunde blitzen (nur Level AAA).
Formularfelder sind mit einer sinngebenden Beschriftung im <label>-Element verknüpft. Sogenannte „Placeholder“/Platzhalter-Texte innerhalb der Formularfelder sind keine Beschriftungen.
Mehrteilige Formulare bestehen aus inhaltlich zusammengehörigen Gruppen mit dem <fieldset>-Element im HTML-Quelltext.
Es wird auf grafische Captchas verzichtet bzw. wird eine Alternative bereitgestellt.
Sollte eine Sitzung auslaufen, können Nutzer:innen nach einer erneuten Anmeldung ihre Aktivität ohne Datenverlust weiterführen (nur Level AAA).
An Nutzer:innen geht eine Warnmeldung, falls eine Unterbrechung zum Datenverlust ihrer Eingaben führen könnte (sofern die Eingaben nicht für mindestens 20 Stunden Inaktivität erhalten bleiben).
Automatisch erkannte Eingabefehler veröffentlichen in einer schriftlichen Fehler-Meldung einen Hinweis auf das fehlerhafte Element.
Wenn Eingaben erwartet werden, sind Beschriftungen oder Hinweise entsprechend angegeben.
Sollten Nutzer:innen falsche Eingaben tätigen, werden Korrekturempfehlungen gegeben.
Sollten Eingaben rechtliche oder finanzielle Folgen nach sich ziehen können, müssen diese Eingaben vor dem Absenden bestätigt bzw. überprüft, geändert oder gelöscht werden können.
Müssen Eingaben in einem bestimmten Format erfolgen, so werden Hilfen angeboten (nur bei Level AAA).
Die Navigation ist auf der gesamten Website optisch und inhaltlich identisch.
Elemente, die die gleiche Funktion haben, sind auf der gesamten Website identisch.
Elemente, die sich wiederholen, sind entweder als Gruppe zusammengefasst oder durch Überschriften gekennzeichnet. Sie können mit Sprungmarken übergangen werden.
Links in der Navigation und im Inhalt sind logisch aufgebaut und folgen einer Fokus-Reihenfolge.
Link-Texte sind alleinstehend und auch ohne Kontext verständlich.
Neben der Navigation gibt es mindestens eine weitere Möglichkeit, um auf Inhalte zuzugreifen. Dies kann z.B. eine Suchfunktion und/oder ein Inhaltsverzeichnis sein.
Sämtliche Anweisungen müssen eindeutig verständlich sein. Das heißt, es gibt keine optischen oder akustischen Anweisungen (Beispiel: “Drücke den grünen Button.”).
Über die Tabulatortaste können alle Seitenfunktionalitäten und -elemente, Formularfelder, Kontrollelemente sowie Schalter angesteuert werden.
Elemente, die sich durch Ansteuerung über die Tastatur im Fokus-Zustand befinden, sind gekennzeichnet.
Eine bestimmte Zeiteinteilung für einzelne Tastanschläge ist für die Bedienung nicht erforderlich.
Kein Element der Website ist vom Tastaturfokus ausgeschlossen.
Jedes Element der Website kann von Nutzer:innen über die Tastatur angesteuert und verlassen werden.
Sollten andere Tastaturtasten als die gebräuchlichen Tabulator- oder Pfeiltasten verwendet werden, wird der/die Nutzer:in darüber informiert.
Beim “Antabben” (Navigieren mit der Tabulator-Taste) werden die Sprungmarken sichtbar.
Wie aufwändig die Umsetzung der Richtlinien zur Barrierefreiheit auf deiner Website ist, ist erst nach einer eingehenden Analyse belastbar einschätzbar – deswegen ist sie zwingend als erster Schritt notwendig. Die folgenden Arbeitspakete können einzelne Schritte zur Barrierefreiheit auf deiner Website abdecken.