Wie bereits in den letzten Jahren wird es auch in 2025 täglich im Advent einen Tipp geben, um digitale Angebote barrierefrei und für alle zugänglich zu gestalten.
Die Serie wird tagesaktuell auf LinkedIn gepostet.
Die Tipps der letzten Jahre werden wir dazu täglich wieder neu für Euch öffnen, denn teilweise werden die diesjährigen Tipps die Tipps der letzten Jahre vertiefen oder ergänzen.
Somit könnt Ihr täglich gleich fünf Tipps lesen. Wir wünschen Euch viel Spaß und viele neue Erkenntnisse.
Ihr könnt jedes Türchen einzeln öffnen oder alle Türen gleichzeitig öffnen zur besseren Übersicht oder falls Ihr Euch die Inhalte ausdrucken oder archivieren möchtet.
Digitale Barrieren blockieren nicht nur Menschen mit Schwerbehindertenausweis.
Es sind deutlich mehr Personen betroffen, als man denkt.
Hier ein paar Statistiken dazu:
Wie viele Personen verliere ich durch mangelnde digitale Barrierefreiheit?
Wie genau Menschen durch digitale Barrieren behindert werden, erzählen sie euch in der Video-Reihe: Eine digitale Barriere weniger des Vereins Inklusion durch Bildung.
In den nächsten Tagen des Adventskalenders werden wir uns mit konkreten Beispielen und Lösungsansätzen beschäftigen, um digitale Barrieren abzubauen und digitale Teilhabe für alle zu ermöglichen. Bleibt gespannt!
Wusstest du, dass digitale Barrieren viele Menschen im Alltag und im Arbeitsleben einschränken?
Der Leitfaden "Barrieren digitaler Teilhabe erkennen und überwinden" des Forschungsinstituts Betriebliche Bildung beleuchtet genau dieses Problem, zeigt, wie wichtig digitale Barrierefreiheit für eine inklusive Gesellschaft ist und lässt Betroffene zu Wort kommen.
Zum leichten Einstieg in das Thema Digitale Barrierefreiheit können wir Euch den Film „Digitale Barrierefreiheit für jeden jederzeit überall.“ empfehlen.
Begleitend findet Ihr hier eine Übersicht der Kontaktadressen der im Film genannten Überwachungsstellen der einzelnen Bundesländer.
Direktlink zur Vimeo-Seite: Digitale Barrierefreiheit für jeden jederzeit überall.
Ein barrierefreier Internetauftritt, barrierefreie Dokumente und auf Social Media barrierefrei zu posten, nutzt allen und schafft Zugänge, denn Barrieren kann es auch im digitalen Raum geben.
In einem Blogpost bei Inklupreneur haben wir für Euch sehr kurz und knapp die wichtigsten Grundregeln zusammengefasst.
Digital barrierefrei in der Praxis – Die wichtigsten Grundregeln
Bereits in 2007 waren die meisten digitalen Barrieren bekannt, wie dieser Kalender beweist.
Setzt dem endlich ein Ende und hebt die Barrieren auf. Es ist nicht so schwer!
In den nächsten Tagen gibt es hier ein paar grundlegende Tipps.
Was ist bei der Gestaltung von Diagrammen und Datenvisualisierungen zu beachten und wie betextet man diese für Screenreadernutzung?
Hier gibt es gleich mehrere Stolperstellen, die es zu vermeiden gilt.
Kontraste und Schrift
Verständlichkeit
Bildbeschreibung
Wieso sollte man sich die Mühe machen, Bildbeschreibungen auf Social Media oder Webauftritten noch selbst zu schreiben? Das nervt! Kann das nicht heutzutage einfach die KI, die künstliche Intelligenz übernehmen? Das ist doch nicht so schwer, wenn sie einfach nur beschreiben muss, was auf dem Bild zu sehen ist!
Solche Kommentare hört oder liest man öfter. Und ja, manche Bilder werden zufällig automatisch gut beschrieben. Andere nicht.
Oder ist für Euch eine Bildbeschreibung wie „Ist möglicherweise ein Bild von sieben Personen“ ausreichend?
Was für Personen? Was machen sie? Ist es wichtig zu wissen, wie sie angezogen sind?
Es fehlt jeglicher Kontext.
Ihr verwendet Bilder im Internet, um Eure Nachricht hervorzuheben.
Um längere Texte aufzulockern. Um bildlich etwas zu verdeutlichen.
Um eine Stimmung zu erzeugen.
Ihr wählt die Bilder sorgfältig aus. Es hat einen Sinn, warum Ihr ausgerechnet diese Bilder verwendet.
Dann nehmt Euch auch die Zeit, diese Bilder angemessen zu beschreiben.
Bleibt objektiv, Interpretationen, Meinungen oder gar Nennung des Urhebers haben in einer Bildbeschreibung nichts zu suchen.
Hier als Beispiel ein kurzer Leitfaden, wie die BBC unterschiedliche Bilder betextet (englisch).
Heute wagen wir uns etwas tiefer in die Grafik-Design-Jagdgründe und befassen uns mit Texteinblendung auf Bildhintergründen, wie man es oft auf Bildkacheln oder im Kopfteil eines Webauftritts vorfindet.
Idealerweise liegen Bild und Text getrennt vor.
Möchte man doch einmal Bilder mit überlagernden knackigen Claims barrierefrei auszeichnen, gilt es einiges zu beachten.
Folgender Artikel bietet gute visuelle Beispiele für die unterschiedlichen Techniken: Designing Accessible Text Over Images: Best Practices, Techniques, And Resources
Bilder müssen über einen Alternativtext verfügen. Es soll kurz und knapp beschrieben werden, was auf dem Bild zu sehen ist. Dabei immer den Zweck eines Bildes beachten!
Siehe dazu auch Jan Hellbusch: Vier Typen von Textalternativen
Zu allgemeine Beschreibungen vermeiden wie z.B. "Konferenz Bild 1".
Ausnahmen:
Wenn es Bilder sind, die Texte enthalten (z.B. Slogans) und der Text wird direkt daneben im Text wiederholt (z.B. durch eine Überschrift), sollte der Alternativtext leer bleiben.
Wenn es rein dekorative Elemente (bunte Kreise, Pöppel, Schnörkel etc.) sind, sollte der Alternativtext leer bleiben.
In allen digitalen Anwendungen, auch in sozialen Medien, brauchen Bilder Bildbeschreibungen.
Wenn Ihr mit Euren Bildern eine Botschaft senden wollt, dann garantiert mit Bildbeschreibungen, dass diese auch von allen Menschen wahrgenommen werden kann.
Wie das am Besten geht lest ihr z.B. hier:
Artikel Bildbeschreibung (Alternativtext) in Social Media – vier einfache Regeln des DBSV
Auch in 2025 der Hinweis: Bitte überprüft Eure automatisiert erstellten Untertitel.
Oft gibt es bei den Untertiteltools (z.B. auch bei Youtube) die Möglichkeit, sich das komplette Transkript als Text anzeigen zu lassen.
Lest das noch einmal durch! Nehmt Euch die Zeit für Korrrekturen!
Audiodeskriptionen sind ein weiteres oft vernachlässigtes Thema.
Das heisst es wird noch einmal zusätzlich als Tonspur eingesprochen, was sonst nur zu sehen ist.
Überlegt einmal, ob Eure Videos auch verständlich sind, wenn man nur den Ton hört, oder ob Zusatzinformationen sinnvoll sind.
Ja, die gibt es z.B. auf dem neuen Webauftritt von leserlich.info des Deutschen Blinden- und Sehbehindertenverbands. Auch weitere Hinweise zur Schriftgestaltung und Kontrasten findet man dort.
Und natürlich auch nicht vergessen: Der eingesetzte Videoplayer muss barrierefrei bedienbar sein. Die Schalter müssen per Maus und Tastatur genutzt werden können und sie müssen gut betextet sein für Screenreadernutzung.
Hier findet Ihr weitere allgemeine Infos zu barrierefreien Videos beim Bundesministerium des Innern und für Heimat (BMI).
Ein barrierefreies Video braucht nicht nur Untertitel, sondern auch Audiodeskriptionen für die Inhalte, die nicht zu hören sind.
Das bezieht sich zum Beispiel auf nicht gesprochene Texteinblendungen im Video oder sonst nur sichtbare, aber für das Verständnis wichtige Inhalte.
Noch besser ist es, wenn vor dem Filmen daran gedacht wird und gleich alles gut erzählt wird.
Hier findet Ihr 5 Tipps für ein barrierefreies Video.
Für die Erstellung von Untertiteln bietet sich der Einsatz von Künstlicher Intelligenz (KI bzw. AI) an. Mit der Open Source Lösung Whisper AI ist das am eigenen Rechner kostenlos möglich. Die Technik ist schon ausgereift, Satzzeichen und Groß-/Kleinschreibung werden unterstützt. Dennoch muss der Text nach der automatischen Übersetzung noch einmal manuell nachbearbeitet werden. Die so erzeugte Textspur lässt sich auf den gängigen Portalen der Videoanbieter hochladen oder bei Verwendung eines eigenen Videoplayers auf dem Webauftritt problemlos zuschalten.
Hier findet Ihr eine Anleitung für Whisper AI.
Nicht vergessen, Videos brauchen Untertitel, Audios (Podcasts) brauchen Transkripte.
Wie man Spotify-Podcast-Transkripte im Jahr 2022 erhält
Bei Untertiteln sind closed captions zu bevorzugen, d.h. Untertitel, die man bei Bedarf zu- oder abschalten kann und die auch selbst gestaltet werden können (größere Schrift, andere Farbe etc.)
Wenn Ihr Videos veröffentlicht, sollten diese zuschaltbare Untertitel haben.
Bei Youtube zum Beispiel könnt ihr einfach die automatisch erzeugten Untertitel nachbearbeiten und Inhalte, Satzzeichen und Großschreibung anpassen.
Anleitung für Untertitel auf Youtube
Für barriererefreie Dokumente braucht man nicht zwingend Microsoft-Office-Programme. Auch mit Libreoffice können Dokumente barrierefrei erstellt und als PDF exportiert werden.
Hier gibt es eine beispielhafte Videoanleitung dazu: Youtube-Playlist zur Behebung von Mängeln in der Barrierefreiheit von Office-Dokumenten mithilfe von LibreOffice
Wer keine Videos mag, es gibt auch viele gute Textanleitungen zum Thema.
Z.B. Barrierefreie PDF-Dokumente erstellen der bayrischen Beratungsstelle Barrierefreiheit.
Heute wenden wir uns mal direkt an die Entwickler*innen, die barrierefreie PDF/UA2-Dokumente dynamisch aus Webseiten oder Software heraus erzeugen möchten.
Die Well-Tagged PDF-Spezifikation (englisch) hilft direkt weiter. Der Schwerpunkt liegt auf dem Dokumentformat (Syntax) und nicht auf dem Inhalt selbst.
Vereinfacht ausgedrückt, hilft WTPDF dabei, PDF-Dokumente zu erstellen, die
Gerade auf Verwaltungswebseiten, aber auch im Schul- und Hochschulbereich finden wir viele Dokumentformate auf Webauftritten.
Statt die Inhalte barrierefreier direkt als Text auf einer Webseite anzuzeigen, wird einfach schnell eine Powerpoint-Präsentation oder ein eingescanntes Formular als PDF hochgeladen.
Leider sind diese Inhalte meistens nicht barrierefrei.
Damit die Mitarbeitenden, die Bürger*innen, die Schüler*innen- und Studentenschaft diese Dokumente problemlos nutzen können, muss bei der Erstellung einiges beachtet werden.
BFIT Bund hat eine Handreichung aus der Praxis für die Praxis herausgegeben, zur Orientierung bei der Erstellung barrierefreier Dokumente im Hochschulkontext.
Der Inhalt und die umfangreiche Linksammlung dieser Handreichung nützen aber natürlich auch allen außerhalb der Hochschule.
Handreichung Barrierefreie Dokumente in Lernkontexten
Ihr erstellt ein PDF, lasst in Adobe die Prüfung auf Barrierefreiheit durchlaufen, es werden keine Fehler angezeigt, also ist das Dokument barrierefrei.
Wirklich? Leider nein...
In dem frei verfügbaren Tool PAC 2024 gibt es eine Screenreaderansicht, die viele Fehler sehr gut visualisiert.
Wenn der Tag-Baum in Adobe nur aus Absätzen besteht, wie im Bild rechts zu sehen ist, obwohl Überschriften deutlich sichtbar im PDF vorhanden sind, ist etwas schiefgelaufen.
Die Überschriften müssen manuell nachgetaggt werden.
Auf Webauftritten veröffentlichte Dokumente müssen ebenso barrierefrei sein, wie der Webauftritt selbst. Dies lässt sich am besten sicherstellen, wenn in allen Prozessen die Barrierefreiheit von Dokumenten bereits berücksichtigt wird. Achte dabei auch auf eine verständliche Sprache und gute Überschriftenstrukturen.
Tipps, Tools und Anleitungen für barrierefreie Dokumente
Wie schafft ihr es, Barrierefreiheit in Eurer Organisation zu verankern? Im Vorjahr haben wir Euch auf gute Reifegradmodelle hingewiesen. Ganz pragmatisch läuft es aber darauf hinaus, dass Barrierefreiheit von jedem Mitarbeitenden immer mitgedacht wird. Bei der Erstellung von Broschüren, von Dokumenten, von Geschäftsberichten, von Webseiten, auf Social Media Auftritten, bei Videos, bei Podcasts, bei Online-Meetings, bei der Durchführung von Veranstaltungen, bei der Weiterbildung, bei der Arbeitsplatzausstattung, im täglichen Miteinander, in der Kommunikation, in Einstellungsverfahren, bei der Beschaffung, bei der Zuwegung, bei Küchen, bei Toiletten und so weiter.
Und dass es auch gewollt ist, dass Barrieren aufgedeckt und behoben werden. Jeden Tag ein kleines Stückchen besser, eine Barriere weniger. Ja, es macht Arbeit. Aber es macht weniger Arbeit, wenn man weiß, worauf man achten muss. Wenn man Textvorlagen verwendet, wenn man generelle Ablaufpläne für Veranstaltungen hat, wenn passende Tools zur Verfügung gestellt werden, wenn es Rezepte gibt, die nur noch leicht angepasst werden müssen von Fall zu Fall, wenn sich auch über Abteilungsgrenzen hinaus geholfen wird, wenn es Ansprechpersonen gibt, die bei der Umsetzung helfen können, wenn man den Barrierefreiheitsgedanken einfach in seinen Alltag integriert.
Einfach machen!
Hier ein schöner Artikel (auf englisch) zum Thema:
Fostering An Accessibility Culture
Nehmen wir einmal an, der Webauftritt Eurer Organisation ist barrierefrei.
Super! Ein erster Schritt ist geschafft! Aber wie geht es weiter?
Wie verankert Ihr Barrierefreiheit organisationsweit und nachhaltig?
Als Werkzeug und Messinstrument könnt Ihr hierfür Reifegradmodelle nutzen.
Zum Beispiel das Accessibility Maturity Model.
Es soll Organisationen dabei helfen, ein solides Programm für die Barrierefreiheit zu etablieren und Bereiche mit Verbesserungspotenzial zu identifizieren. Unabhängig von spezifischen Standards oder Richtlinien kann damit die Reife einer Organisation in Bezug auf die Barrierefreiheit bewertet werden.
Dieses Modell ist in sieben Dimensionen gegliedert, die für die Barrierefreiheit in einer Organisation von Bedeutung sind
Ein alternatives Reifegradmodell findet Ihr z.B. hier:
businessdisabilityforum.org.uk
Darüberhinaus bieten auch die verschiedenen Toolkits des Business Disability Forums zu Führungsthemen, wie Recruitement oder Onboarding gute Umsetzungshilfen:
Für Microsoft ist inklusives Design ein wichtiges Thema.
Aber was heißt das eigentlich genau?
Ziel ist es, Verantwortliche aus Design und Entwicklung dabei zu unterstützen, Innovationen auf eine Weise zu entwickeln, die den Menschen in den Mittelpunkt stellt.
Hier findet Ihr einige erklärende und inspirierende Videos sowie Handbücher und Anleitungen.
Microsoft Inclusive Design
Ihr möchtet Eure Projekte in effektiver Planung und fairer Teamarbeit angehen und wissen, wie Ihr diese am besten inklusiv und möglichst barrierefrei gestalten könnt?
Die Sozialheld*innen Akademie bietet dazu vier Schulungsvideos zu dem Themen barrierefreier Medienarbeit, Sprache und Bildsprache über Behinderungen, Kampagnen-Arbeit und Projektmanagement.
Update 2025: Leider stehen diese Videos nicht mehr zur Verfügung. Schade!
Wie gendert man barrierefrei? Es gibt noch keine technisch barrierefreien Genderzeichen.
Die Handreichung Gendersensible Sprache in der Bremer Verwaltung hilft weiter.
Hohoho... wir wünschen Euch einen schönen Nikolaustag und hoffen, Eure Stiefel waren heute bunt gefüllt!
Apropos bunt, bunt sind sicher auch Eure Webauftritte. Denkt Ihr aber auch daran, Informationen nicht nur über Farbe zu vermitteln?
Angenommen, Ihr verwendet ein Statussystem und abgeschlossene Einträge haben grüne Punkte und offene Einträge haben rote Punkte. Könnt Ihr Euch vorstellen, wie Menschen mit Rot-Grün-Sehschwäche das sehen? Richtig, grau und grau.
Falls Ihr Farben nutzt, um etwas zu kennzeichnen, nutzt deswegen bitte zusätzlich aussagekräftige Symbole, z.B. einen grünen Haken oder ein rotes X. Beides natürlich mit Farbkontrast von mindestens 3:1. Nutzt konsistente leicht verständliche Symbole. Oder schreibt daneben, was mit der Farbe jeweils gemeint ist.
Sind in Formularen Eingabefelder fehlerhaft ausgefüllt, dann färbt nicht nur das betreffende Feld rot ein. Platziert zusätzlich ein gut sichtbares Icon am Feld oder gebt eine passende Tex-Fehlermeldung am Feld aus.
Natürlich verwendet Ihr auch nicht solche Formulierungen wie „Klickt auf das blaue Quadrat für weitere Informationen und auf das grüne Quadrat für den nächsten Artikel.
Online sind viele Tools erhältlich, um Farbkontrastwerte zu ermitteln.
Dieses Jahr möchten wir Euch den Contrast Calculator vorstellen.
Hiermit lassen sich die Farbpaletten üblicher CSS-Frameworks anwählen. Ihr gebt Eure gewünschte Textfarbe an und seht, wie kontrastreich diese zu allen Farben des Frameworks ist. Das hilft, sich schnell einen Überblick zu verschaffen und ein Gefühl dafür zu bekommen, welche Farbkombinationen für alle lesbar sind. Ausprobieren!
In der WCAG sind feste Kontrastwerte für Farben vorgegeben.
Die Schriftgröße und -dicke, die sich ebenfalls auf die Sichtbarkeit auswirken, werden dabei allerdings nicht betrachtet.
Nutzt man zur Messung hingegen den APCA Algorithmus, der voraussichtlich in die WCAG3 einfließen wird, werden auch diese Faktoren berücksichtigt.
Spannend dabei ist zum Beispiel, dass ein Schwarz-Weiß-Kontrast (der die WCAG Bedingungen immer erfüllt!), bei dünner Schriftstärke von unter 300 eben nicht mehr gut sichtbar ist.
Oft findet man kleine und dünnere Schriften im Fußbereich eines Webauftritts für Impressum, Datenschutz und Erklärung zur Barrierefreiheit.
Achtet darauf, dass auch diese Elemente kontrastreich genug sind!
Ein Farbtools zum Ausprobieren:
achecks.org/apca-accessible-colour-contrast-checker
Farbkontraste sind nicht nur in Kontext mit Schriften wichtig (siehe unten) sondern auch, wenn über Farbe Information vermittelt wird.
Bei Veranstaltungen findet man auf Webauftritten oft bunte Saalpläne.
Haben die einzelnen Farben zueinander aber einen Kontrast von weniger als 3:1, sind die Kategorien nicht mehr voneinander unterscheidbar.
Tipp: Prüft Farbkontraste auch in einer Grauansicht. Sind alle Informationen noch erkennbar?
Wichtig ist, mit guten Farbkontrasten zu arbeiten und im Text zu einem Saalplan mit anzugeben, wo sich die Kategorien befinden. Im Beispiel: Kategorie rot: Reihe 1 - 3 Parkett vor der Bühne, Platz 1-5 Parkett rechts von der Bühne, jeweils Reihe 2 auf dem Rang etc.
Nicht nur Schriften und Links müssen einen guten Farbkontrast haben, auch Formularelemente müssen sich gut erkennbar vom Hintergrund abgrenzen.
Hier reicht ein Kontrast von 3:1.
Deswegen: Gute Rahmenfarben vergeben, damit Eure Formularfelder auch als solche sofort gesehen werden können.
Wenn ihr Diagramme präsentiert, achtet darauf, dass die Diagrammelemente nebeneinander auch kontrastreich genug (oder unterschiedlich gemustert) sind.
Im Zweifel hilft auch mal ein Schwarz-Weiß-Ausdruck. Lassen sich Unterschiede hier erkennen?
Weitere Infos zum Thema:
Barrierefreie Kontraste
Die Schriften einer digitalen Anwendung sollten mindestens einen Kontrast von 4.5:1 zum Hintergrund haben. Besser wäre 7:1.
Überprüfen könnt Ihr es z.B. mit diesem Tool:
Colour Contrast Analyser (CCA)
Im Firefox könnt Ihr z.B. über die "Werkzeuge für Webentwickler – Barrierefreiheit – Simulieren" in der Menüleiste oben eure Webseite betrachten, wie manche Farbfehlsichtige sie sehen.
Auf Webauftritten finden sich immer wieder die gleichen Elemente. So z.B. die sogenannten Karten bzw. Kacheln. Um auf einen Artikel zu verlinken, bietet man gleich drei Links an. Eine Überschrift, ein Bild und ein „Mehr erfahren“-Link am Ende der Kachel. Für sehende Menschen praktisch, je nach Präferenz klickt man auf das Bild (große Klickfläche!) oder den Mehr erfahren Link oder die Überschrift. Viele Wege führen zum Artikel, prima!
Für Screenreader-oder Tastaturnutzende ist das nicht so praktisch. Man muss dreimal tabben, dreimal wird Text vorgelesen, beim Bild wahrscheinlich sogar die Bildbetextung, die oft lang ausfällt, weil die Redaktion denkt, das sei hilfreich, die aber nicht das Linkziel angibt. Es entsteht viel unnötiger Audiospam. Wie schafft man es, dass alle Nutzenden gut zum Ziel kommen und nicht genervt sind?
Kein Problem! Man lässt die drei Links für sehende Mausnutzende bestehen, entfernt aber für Screenreader- und Tastaturnutzende zwei der Links und lässt nur die Überschrift der Kachel verlinkt.
Das ist auch der sichtbare Textlink, der bei Sprachsteuerung eindeutig angesteuert werden kann.
Für alle ein Gewinn!
Wie das technisch geht, könnt Ihr z.B. hier lesen:
Bei Tastaturnutzung ist es hilfreich, wenn am Anfang eines Webauftritts Spunglinks eingebettet werden, mit denen man direkt zu wichtigen Bereichen gelangen kann. Bei Screenreadernutzung gibt es Tastenbelegungen, um z.B. direkt die Hauptüberschrift oder die Landmarks anzusteuern. Bei Tastaturnutzung ohne Screenreader gibt es so etwas nicht. Hier muss gerade bei größeren Navigations-Menüs oftmals sehr häufig die Tab-Taste betätigt werden, um die Hauptüberschrift der Seite zu erreichen. Daher werden diese sogenannten Skip-Links empfohlen. Sie werden als erstes sichtbar, wenn man in den Webauftritt hineintabbt.
accessguide.io/guide/skip-link
Ein Fehler, der bei den Skip-Links immer wieder auffällt, ist, dass nicht fokussierbare Elemente wie z.B. die main oder die nav-Landmark verlinkt werden. Hier muss das Attribut tabindex=-1 ergänzt werden, damit es auch in allen Browsern und Screenreadern funktioniert.
Siehe dazu auch:
pedalpoint.com/2024/01/3-common-skip-link-problems-and-how-to-fix-them
Ein weiterer häufiger Fehler ist die unzureichende Betextung, oft sieht man das englische „Skip to content“.
Besser wäre z.B. Direkt zum Inhalt.
Die Bedeutung von Überschriften haben wir Euch ja bereits in den letzten beiden Jahren kurz erklärt.
Genauso hilfreich ist aber auch die Unterteilung einer Webseite in einzelne Bereiche, sogenannte landmarks.
Kopf- und Fußteil der Seite werden definiert, ebenso der Hauptbereich und die Navigation sowie weitere Seitenbereiche oder Suchformulare.
Bei Screenreadernutzung können diese Bereiche gezielt angesteuert werden, so dass z.B. mit einem einheitlichen Tastendruck unkompliziert der Hauptbereich der Webseite vorgelesen werden kann oder die Sucheingabe erreicht werden kann.
Sehr gut beschrieben wird es in folgendem Artikel:
Scott O'Hara - Accessible Landmarks
Ergänzung 2024 - Wie betextet man Landmarks korrekt?: Adrian Roselli - Maybe Don’t Name That Landmark
Überschriften sind bei Screenreadernutzung Gold wert, um die Struktur einer Seite gut erfassen zu können.
Wichtig:
Sowohl im Webauftritt als auch bei Euren Dokumenten gilt:
Zeichnet Überschriften auch als Überschriften aus!
Nicht nur visuell fett machen, sondern z.B. in Office dem Text die passende Formatvorlage Überschrift zuweisen.
In Webauftritten h1 bis h6 verwenden.
Dabei muss auch auf die geordnete Reihenfolge geachtet werden. Z.B. nach einer h2 darf nicht direkt eine h4 foilgen.
Überschriften sollten eindeutig sein, sich nicht wiederholen.
Es sollte nur eine Hauptüberschrift h1 je Seite/Dokument geben.
Das erleichtert deutlich die Übersicht und ermöglicht es, gewünschte Inhalte gezielt anzusteuern.
Umfassendere Informationen findet ihr z.B. in diesem alten aber noch immer gültigen Artikel aus dem Jahr 2009 (überarbeitet in 2013):
Großer fetter Text macht noch lange keine Überschrift
Wie gestern schon erwähnt, sind doppelt und dreifach vorhandene Links für Tastaturnutzende und auch bei der Spracheingabe eine Stolperstelle.
In folgendem Artikel werden diese Punkte sehr schön beschrieben und auch verständlich begründet.
A beginner’s guide to link accessibility
Oft werden bei Webauftritten Links und Buttons verwechselt, bzw. nicht ihrem eigentlichen Zweck entsprechend eingesetzt.
Links öffnen andere Webauftritte, andere Webseiten oder springen zu Ankerpunkten auf der gleichen Seite.
Buttons ändern Inhalte auf der gleichen Seite, z.B. in dem sie Modaldialoge öffnen oder schließen, oder dienen dazu, Formulare abzuschicken.
Kurz gesagt, ein Link (< a >) führt immer zu einem Ziel, ein Button (< button >) ändert oder startet Dinge.
Ein Link (< a >) kann so gestaltet werden, dass er wie ein Button aussieht. Das steht nicht im Widerspruch.
Für Screenreadernutzende macht das einen großen Unterschied und erhöht die Verständlichkeit und Auffindbarkeit der Elemente.
Hier kann man sich Linklisten generieren lassen, in denen wie bei einem Inhaltverzeichnis alle Links stehen.
Und Formularlisten, die auch alle Schalter/Buttons auflisten. Das hilft enorm bei der Orientierung.
Sind klassische Links als Button angelegt, tauchen diese nicht erwartungskonform in den Linklisten auf und werden unter Umständen nicht wahrgenommen.
Schnell ist auf einer Webseite ein Link gesetzt, viel kann man damit doch nicht falsch machen, oder?
Oder? Lest einfach mal diesen sehr schöner Artikel, der eine Vielzahl von Link-Barrieren erklärt.
Designing Better Links For The Web
Oft öffnen sich Links auch unangekündigt in neuen Fenstern. Das kann irritieren, weil vielleicht nicht wahrgenommen wird, dass die Seite verlassen wurde oder weil plötzlich der Zurück-Button nicht mehr funktioniert.
Es ist kein Verstoß gegen die WCAG-Kriterien, aber es wird davon abgeraten. Auf jeden Fall muss im Vorfeld auf sich neu öffnende Fenster hingewiesen werden.
Siehe zu dem Thema auch
Standard fast jeder Webseite ist das Logo oben links, das mit der Startseite verlinkt ist.
Die Bildbeschreibung lautet deswegen oft "Logo Firma x".
Hier ist aber das Linkziel deutlich wichtiger, d.h. der beschreibende Text muss "Zur Startseite" lauten oder alternativ "Zur Startseite Firma x".
So wird bei Linklistennutzung im Screenreader schnell deutlich, wohin der Link führt.
Links immer aussagekräftig gestalten!
Nicht einfach nur Wörter wie "HIER" oder "DOWNLOAD" verlinken, sondern stets das Ziel/Zweck verlinken.
Das hilft nicht nur bei Screenreadernutzung und Sprachsteuerung, sondern verbessert auch allgemein die Lesbarkeit Eurer Angebote.
Gestern ging es im Adventskalender um Links.
Auch der Link zur Erklärung zur Barrierefreiheit muss gut betextet sein.
Es sollte das Wort Barrierefreiheit darin vorkommen, damit er schnell gefunden werden kann.
Z.B. Barrierefreiheit, Erklärung zur Barrierefreiheit oder Barrierefreiheitserklärung.
Bitte verwendet keine Worte wie Barrierearmut!
Falls Ihr neu im Thema seid und Euch jetzt fragt, was ist eigentlich eine Erklärung zur Barrierefreiheit?
Im Herbst gab es eine gute Onlineveranstaltung Erklärung zur Barrierefreiheit öffentlicher Stellen organisiert von der Überwachungsstelle des Bundes.
Katrin Becker von der DVZ M-V GmbH, Markus Ertl vom Deutscher Blinden- und Sehbehindertenverband e.V., Ulrike Peter von der Zentralstelle für barrierefreie Informationstechnik Bremen,
Alexander Pfingstl von BFIT-Bund und Sajora Strohner von ]init[ AG für digitale Kommunikation stellten für Euch die wichtigsten Fakten zusammen.
Ein nachträgliches Schauen des Videos lohnt sich. Im Fragenkatalog finden sich Antworten zur Ausgestaltung für jedes Bundesland.
Ihr stolpert im Internet über Barrieren? Dann nutzt die Erklärung und sagt Bescheid.
Ein OZG-Dienst ist ein Online-Service, den eine Behörde oder eine öffentliche Einrichtung zur Verfügung stellt. Zum Beispiel kann man eine Geburtsurkunde online beantragen, eine Steuererklärung einreichen oder ein Führungszeugnis anfordern – alles über das Internet, statt vor Ort den Weg zum Amt auf sich nehmen zu müssen.
Wenn Ihr im Netz einen solchen Dienst nutzt und auf Barrieren stößt, könnt Ihr Euch darüber beschweren. Es muss vom Dienst aus einen Link auf die Erklärung zur Barrierefreiheit geben. Dort findet Ihr die inhaltlichen Ansprechpersonen und auch die Durchsetzungsstelle des zugehörigen Bundeslands. Viele Dienste werden bundeslandübergreifend genutzt, denn jedem Bundesland sind eigene Themenfelder zugeordnet.
Deswegen wundert Euch nicht, wenn Ihr in Bremen wohnt, Euch über einen in Bremen angebotenen OZG-Dienst beschweren wollt und in der Erklärung zur Barrierefreiheit findet Ihr z.B. nur Adressen aus Schleswig-Holstein. Meldet es gerne trotzdem!
Hier findet Ihr eine Liste der Durchsetzungsstellen aller Bundesländer und des Bundes.
Ihr ärgert Euch über eine Barriere auf einem Webauftritt.
Zum Glück gibt es eine Barrierefreiheitserklärung.
Ihr schildert Euer Problem und bekommt nach zwei Wochen noch keine Rückmeldung?
Die Barriere wird nicht behoben?
Es passiert einfach gar nichts?
In dem Fall könnt Ihr Euch an Eure Durchsetzungsstelle wenden.
In mehreren Videos haben die Durchsetzungsstellen einiger Bundesländer die wichtigsten Informationen für Euch zusammengestellt.
Digitale Barrieren melden
Ein Webauftritt ist wie ein Garten, der ganzjährig gepflegt werden sollte.
Er muss zwar nicht winterfest gemacht werden, aber gemäß §7 Absatz 6 BITV ist die Erklärung zur Barrierefreiheit jährlich und bei jeder wesentlichen Änderung der Website oder der mobilen Anwendung zu aktualisieren.
Damit ist natürlich nicht gemeint, dass nur die Jahreszahl neu eingetragen werden muss.
Nein, es ist ein Aufruf und eine gute Erinnerung, die Inhalte und Neuerungen des Webauftritts erneut auf Barrierefreiheit zu überprüfen, damit diese auch im nächsten Jahr für alle Menschen zugänglich sind.
Fangt schon mal an mit dem Frühjahrputz!
Wie muss eine Erklärung zur Barrierefreiheit aussehen?
Was gehört alles hinein?
Besonderheit: Die ZenbIT stellt zentral für alle bremischen Angebote kostenfrei die zugehörige Version in Gebärdensprache und Leichter Sprache zur Verfügung.
Weitere Infos unter dem passenden Aufklappmenüpunkt bei der
Zentralstelle für barrierefreie Informationstechnik
Gut bedienbare und barrierefreie Formulare zu erstellen ist gar nicht mal so schwer, wenn man die wichtigsten Grundregeln beachtet. Die hatten wir für Euch ja schon in 2023 als Checkliste zusammengefasst (siehe unten). Für 2025 gibt es heute als Anregung einen guten Artikel zum Thema Formulardesign: Barrierefreies Kontaktformular erstellen – Für Designer
Außerdem möchten wir Euch noch auf eine weitere Barriere in Formularen hinweisen, über die wir dieses Jahr oft in den Prüfungen gestolpert sind.
Wenn Ihr eine Gruppe von Radiobutton oder Checkboxen einsetzt, dann gruppiert diese bitte als fieldset.
Als legend definiert Ihr die Betextung der Gruppe.
Oft wird es falsch gemacht und ein label als Gruppenbetextung vergeben. Das kann aber nicht programmatisch zugeordnet werden und schwebt quasi leer im Raum.
Wird stattdessen mit fieldset und legend gearbeitet, wird bei Fokuserhalt die Betextung mit vorgelesen.
Bei Screenreadernutzung hört man so z.B. Überschrift 1 Gruppe Wert 1 Auswahlschalter.
Ohne fieldset/legend würde man nur Wert 1 Auswahlschalter hören.
Bei Radiobuttonlisten, bei denen die Frage nur sichtbar als label darüber steht ohne Zuordnung und es als Auswahlmöglichkeiten nur Ja/Nein gibt, erschließt sich der Sinn bei Screenreadernutzung nur sehr schwer.
Alternativ kann auch auf die Gruppenbetextung (legend) verzichtet werden, wenn die Auswahlmöglichkeiten für sich sprechend genug sind. Dennoch sollte über fieldset gruppiert werden. Das kann auch so gestylt werden, dass es keinen sichtbaren Rahmen aufweist.
Hier ist es noch einmal ausführlicher erklärt: Fieldsets, Legends and Screen Readers again
Im letzten Jahr (siehe unten) haben wir Euch schon viele Tipps für Formulare mit auf den Weg gegeben.
Heute wird es spezifischer mit Beispielen, was bei dem Einsatz von label alles schiefgehen kann.
Scenarios of label misuse in wcag
Auch bei dem Einsatz des Attributs aria-label gibt es einiges zu beachten.
Es wird oft inflationär benutzt, weil Entwickler*innen denken, damit würden Inhalte barrierefrei.
Aber es ist nur für bestimmte meist interaktive HTML-Elemente sinnvoll.
Übersicht der Einsatzgebiete von aria-label
Eine weitere oft anzutreffende Barriere ist es, Links in label-Elemente einzubetten.
Oft im Kontext mit dem Link zu den Datenschutzbestimmungen.
>
Per HTML-Spezifikation ist dies zwar erlaubt, in der Praxis führt es aber dazu, dass, statt die Checkbox anzuwählen, der Link öffnet oder auch, dass Screenreader das label nicht komplett vorlesen, sondern bei dem Link stoppen.
Platziert Links außerhalb von label-Elementen!
Der Link zu den Datenschutzbestimmung liegt dabei separat oberhalb der Checkbox/Label Kombination.
Am heutigen Sonntag überlegen wir einmal, wie rein technisch betrachtet ein barrierefreies Formular aufgebaut sein muss.
Folgender Artikel bietet mit Praxisbeispielen eine gute Einleitung für Eure HTML-Logik:
11 HTML best practices for login & sign-up forms
Aber nicht vergessen, gute technische Auszeichnung reicht nicht!
Ergänzend zu den bereits in dem Artikel genannten Punkten gibt es noch viele weitere Faktoren, die ein gutes Formular ausmachen.
Auf Webauftritten werden manchmal Inhalte versteckt, weil sie vielleicht später eingeblendet werden, Zusatzinformationen für Screenreadernutzende darstellen etc.
Technisch gibt es verschiedenen Möglichkeiten, leider wird oft die falsche für den jeweiligen Zweck gewählt.
Hier die drei bekanntesten Methoden und ihre Unterschiede.
1. display:none; wird im CSS-Stylesheet definiert
Der Inhalt wird vor ALLEN Endgeräten versteckt. Auch für Screenreadernutzende ist er nicht lesbar. Macht also nur Sinn, wenn Inhalte für ALLE unsichtbar sein sollen, weil sie z.B. später interaktiv eingeblendet werden (Akkordeon, Formularelemente, Diashow o.ä.)
2. aria-hidden="true" als Attribut eines HTML-Tags
Der Inhalt wird vor Screenreadern versteckt, ist aber visuell vorhanden.
Macht in Ausnahmefällen Sinn, wenn z.B. Inhalte doppelt vorhanden sind oder z.B. bei Kacheln auf Webseiten, wenn sich Links wiederholen, es viele zusätzliche doppelte "Mehr"-Links gibt, die die Übersicht erschweren etc.
3. über eine sr-only-Technik
Der Inhalt wird per CSS visuell versteckt, ist aber für Screenreader zugänglich.
Macht Sinn für zusätzliche Linkauszeichnungen, Hinweise etc.
Es gibt verschiedene Ansätze dafür, z.B. den Inhalt außerhalb des sichtbaren Bildschirmbereichs zu platzieren oder den Inhalt auf 1 Pixel Breite und Höhe zu schrumpfen.
Siehe z.B. Improved .sr-only
Es macht keinen Sinn, diese Technik anzuwenden, wenn Inhalte erst später sichtbar werden sollen (z.B: durch Knopfdruck). Hier muss display:none; genutzt werden (für alle unsichtbar).
Ich bin kein Roboter – Komplizierte visuelle Ratespielchen (Captchas) kommen in Formularen zum Einsatz und sollen sicherstellen, dass nur Menschen die Formulare befüllen. Das können aber nicht alle Menschen und einige Roboter können diesen Schutz inzwischen umgehen!
Oft wird zusätzlich zu unleserlichen Zeichen eine Audiovariante angeboten. Schlechtestenfalls passiert das in einem Player, der selbst nicht barrierefrei bedienbar ist oder die Ausgabe der Ziffern erfolgt auf englisch. Falls unbedingt erforderlich, setzt andere Methoden ein!
Ein Zeitlimit für die Eingabe größer als x Sekunden, einfache Fragen, für die man nur ein Textfeld ausfüllen muss (Ist Feuer heiss? Was ist eins plus eins?), visuell versteckte Eingabefelder (Honeypots) mit "nicht ausfüllen"-Hinweis für Screenreadernutzende im Label etc.
Es gibt viele andere Möglichkeiten. Fragt Euch auch, ob ein Captcha überhaupt erforderlich ist? Eine vernünftige Validierung der Eingaben reicht zur Sicherung eventuell auch aus.
Anbei ein bisschen Lesestoff zu dem Thema.
Nachtrag 2023:
Wir hatten es bereits geahnt, inzwischen gibt es eine Studie dazu: Roboter / Bots sind besser darin, Captchas zu umgehen, als Menschen selbst. Diese Technik schützt Euer Formular heutzutage also kaum noch vor Spam.
Stattdessen werden Menschen davon abgehalten, Formulare auszufüllen.
AI bots are now outperforming humans in solving CAPTCHAs
Als Overlay-Tool oder Assistenztool bezeichnet man oft am Seitenrand eines Webauftritts platzierte Buttons, die ein umfangreiches Einstellungsmenü öffnen, mit dessen Hilfe man sich die Webseite nach seinen Vorlieben anpassen kann, was Farben, Kontraste, Schriftgrößen etc. angeht. Viele dieser Funktionen können dabei auch ohne Tool über den Browser definiert werden. Auch Vorlesefunktionen sind z.B. heutzutage in den Browsern vorhanden.
Leider erwiesen sich Overlay-Tools auch 2025 in unseren Tests teilweise selbst als Barriere.
Hier ein paar Beiträge aus 2025 zum Thema:
Zeit für ein Adventsmärchen von der fixen Idee, dass Accessibility Overlays mit einem Klick Euren Webauftritt magisch barrierefrei machen können. Diese Tools können, sofern sie selbst barrierefrei gestaltet sind (!), einen Beitrag zur besseren Zugänglichkeit leisten. Meistens bilden sie aber nur Einstellungen ab, die in den gängigen Browsern bereits auch ohne Tool vorhanden sind wie z.B. Farbanpassungen, Schriftvergrößerung oder das Vorlesen von Inhalten.
Gut zusammengefasst findet Ihr es bei stolperfrei.digital Consulting oder in der Stellungnahme des Deutschen Blinden- und Sehbehindertenverbandes.
Zu beachten ist auch die Stellungname des European Disability Forum und der International Association of Accessibility Professionals (englischer Text).
Die automatisierte Fehlerbehebung von Overlays ist begrenzt, da viele Aspekte der Barrierefreiheit, wie die sinnvolle Beschriftung von Grafiken oder die Tastaturbedienbarkeit, eine menschliche Überprüfung erfordern. Statt sich auf Overlays zu verlassen, sollten Webseitenverantwortliche die Barrierefreiheit von Grund auf in ihre Webseiten integrieren. Dies bedeutet die Einhaltung von Standards wie der EN 301549 und der WCAG.
Accessibility Overlays sind kein Allheilmittel für die Barrierefreiheit im Internet. Sie können zwar einen gewissen Beitrag leisten, dürfen aber nicht als Ersatz für eine von Grund auf barrierefreie Gestaltung von Webseiten betrachtet werden.
Über die Funktionsweise von Overlay-Tools und deren mögliche Auswirkungen auf die digitale Barrierefreiheit informierte in einer Online-Veranstaltung der Ausschuss für barrierefreie Informationstechnik. Neben technischen Aspekten wurden auch die Auswirkungen auf die Nutzenden vorgestellt und inwieweit die gesetzlich geforderte Konformität mit Overlay-Tools erreicht werden kann.
Zur Veranstaltungsdokumentation und zum Videomitschnitt: Informationen zum Einsatz von Overlay-Tools
Manche Toolanbieter versprechen, Webseiten mit einem Overlay barrierefrei zu machen.
Das heißt, mit einem oder manchmal auch sehr vielen Knopfdrücken wird ein Webauftritt dynamisch browserseitig so eingestellt, dass er barrierefrei bedienbar ist.
Ist das zu einfach, um wahr zu sein? Und kann eine barrierefreie Seite überhaupt ohne Einbeziehung von behinderten Menschen entstehen?
Folgender Artikel bietet einen guten Einstieg in das Thema:
Gemeinsame Einschätzung der Überwachungsstellen des Bundes und der Länder für die Barrierefreiheit von Informationstechnik zur Verwendung von Overlay-Tools.
Overlay-Tools, die versprechen, den Webauftritt per Mausklick barrierefrei zu machen, halten nicht das, was sie versprechen.
Dazu sind sie meist umständlich zu bedienen oder nicht tastaturzugänglich.
Behebt die Barrieren direkt auf euren Webauftritten!
Barrierekompass – Was können Overlays, Plugins und KI-Barrierefreiheit?
Oder auf englisch kurz gefragt und im Artikel sehr gut begründet:
Should I us an accesibility overlay?
Passendes Beispiel:
Möchtet Ihr einen Webauftritt voller Tipp- und Grammatikfehler sowie willkürlich geschwärzter Absätze sehen und anschließend eine Bedienfläche suchen, bei der ihr erst umständlich einstellen müsst, dass die Fehler behoben werden?
Nein?
Warum nicht?
Zum Glück bewegt sich heutzutage nicht mehr zu viel auf Webseiten. Auch die vor Jahren üblichen Startseiten, bei denen man sich erst gefühlt minutenlange Animationen ansehen musste, bevor man zur eigentlichen Webseite gelangte, sind nur noch extrem selten anzutreffen.
Wenn sich etwas bewegt, sind es meistens Videos.
Zu den Untertiteln, Transkripten und Audiodeskriptionen haben Euch ja bereits an Tag 3 Tipps gegeben.
Heute geht es um die barrierefreie Einbettung von Videos.
Über folgende Barrieren stolperten wir auch in 2025 noch:
Laut WCAG ist das nicht explizit verboten, solange die Videos einen gut sichtbaren Pause/Stop-Button aufweisen und nicht zu stark blinken und blitzen.
Dennoch ist das besonders bei Screenreadernutzung ein ziemlicher Störfaktor, wenn auf einmal irgendwas lauter als die Screenreaderstimme losplärrt und man muss sich erstmal auf die Suche nach dem Stop-Button machen. Es gehört im wahrsten Sinne des Wortes zum guten Ton, den Nutzenden die Entscheidung zu überlassen, wann sie das Video starten
Es verbessert die Orientierung deutlich, wenn der Player gut betitelt ist. Wenn Ihr z.B. Youtube-Videos einbettet, steht in dem angezeigten Code-Schnipsel das Attribut title="YouTube video player". Das ist ein Schritt in die richtige Richtung, besser wäre es, wenn hier auch der Titel des Videos erscheint, gerade falls Ihr mehrere Videos auf einer Seite einbettet.
Ändert es z.B. um in title="YouTube Video Bericht von der Veranstaltung xy".
Auch das leider keine Seltenheit. Teilweise sind die Schalter des Players nicht für Screenreadernutzung betextet oder sie sind auf englisch betextet oder sie sind nicht zugänglich per Tastatur oder man landet gar in einer Tastaturfalle.
Wenn Ihr einen eigenen barrierefreien Player auf Euren Webauftritten einsetzen möchtet, können wir Euch den freien open source ableplayer empfehlen.
In den letzten Jahren gab es am zwölften Adventstag Infos zur barrierefreien Gestaltung von bewegten Elementen.
Auch in den sozialen Medien blitzt und blinkt es häufig, Aufmerksamkeit will generiert werden.
Und auch hier sollte die digitale Barrierefreiheit beachtet werden, damit alle Menschen an Online-Inhalten teilhaben können.
Hier sind einige einfache Tipps, um Deine Posts barrierefreier zu gestalten:
Denke daran: Barrierefreiheit kommt allen zugute!
Ein inklusiver Social-Media-Auftritt erhöht auch Deine Reichweite und verbessert das Nutzererlebnis für alle.
Weitere Informationen und Anleitungen findet Ihr hier:
Alles dreht sich, alles bewegt sich, nächste Runde rückwärts.
Wenn möglich, verzichtest Du auf Animationen und Bewegung auf Deinem Webauftritt.
Einen Wow-Effekt wird sowas in der Regel nur beim ersten Betrachten auslösen.
Bei häufigeren Besuchen wird es wohl auch see(h)-festere Menschen eher stören.
Weitere Erläuterungen zum Thema bietet folgender Artikel:
web.dev Animation und Bewegung
Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die automatisch beginnen, länger als 5 Sekunden dauern (bei Inhalten mit Audio bereits länger als 3 Sekunden) und parallel zu anderen Inhalten dargestellt werden, muss es eine Möglichkeit geben, diese zu stoppen.
Mit Maus und Tastatur. Das gilt auch für Audio- und Videoinhalte, Newsticker, Diashows etc..
Lenkt nicht durch optische oder akustische Schlüsselreize von den eigentlichen Inhalten Eurer Webangebote ab!
Am besten ist es natürlich, wenn nichts sofort losgeht, ohne dass man es interaktiv selbst gestartet hat.
Im Advent blinken und blitzen viele Webseiten.
Aber das kann bei manchen Menschen epileptische Anfälle auslösen.
Andere Menschen werden dadurch so abgelenkt, dass sie sich nicht mehr auf die Texte konzentrieren können.
Wenn ihr Animationen und Transitionen einsetzt, dann bitte nur sehr moderat und mit nicht mehr als drei Blitzen pro Sekunde.
Achtet auf auf Eure animierten Gifs.
In den Browser-Einstellungen kann man vorgeben, dass man keine Animationen sehen möchte.
Dazu muss das Webangebot jedoch ein passendes prefers-reduced-motion Stylesheet anbieten.
CSS prefer-reduced-motion Media Query – Bei Bedarf weniger Bewegung
