Barrierefreiheit
Seit dem 28. Juni 2025 greift das Barrierefreiheitsstärkungsgesetz (BFSG) nun auch für viele privatwirtschaftliche Unternehmen: Digitale Produkte und Dienstleistungen müssen seitdem für alle Menschen zugänglich sein. Für öffentliche Einrichtungen gilt diese Verpflichtung bereits seit mehreren Jahren. Je Bundesland gibt es seit Juni eigene Marktüberwachungsbehörden, die in Zukunft Prüfungen und voraussichtlich auch Abmahnungen durchführen werden. Zudem gibt es die Überwachungsstelle des Bundes, über deren Portal kontinuierlich neue Informationen geteilt werden.
Als Strategie- und Kreativagentur für Wissenschaft und Gesellschaft, verstehen wir Barrierefreiheit als Gestaltungshaltung. Sie ist Teil unserer Verantwortung, aber auch ein fortlaufender Lernprozess. Barrierefreiheit entsteht nicht nebenbei, sondern durch bewusstes Mitdenken in jeder Disziplin – von der Strategie über Redaktion und Design bis zur Entwicklung. Barrierefreiheit ist keine nette Zusatzleistung – sie ist Voraussetzung für gesellschaftliche Teilhabe.
Wir entwickeln unsere Expertise in diesem Bereich kontinuierlich weiter und teilen auf dieser Seite zentrale Prinzipien für barrierefreie Kommunikation.
Vier Kernaspekte der Barrierefreiheit
Barrierefreiheit ist eine interdisziplinäre Aufgabe. Sie verlangt Zeit, Fachwissen und Abstimmung – und sie gelingt am besten, wenn sie von Beginn an in den Prozess integriert wird.
Die vier Kernaspekte, die über alle Prozessschritte und Disziplinen hinweg im Fokus stehen sind: Wahrnehmbarkeit, Verständlichkeit, Bedienbarkeit und Robustheit.
Inhalte müssen so gestaltet sein, dass sie alle Menschen erreichen – visuell, auditiv oder taktil.
Barrierefreie Kommunikation besteht aus einer klare Sprache, logische Strukturen und ein vorhersehbares Verhalten digitaler Oberflächen. Inhalte sollen intuitiv erfassbar sein – ohne unnötige kognitive Hürden.
Bedeutet: Jede:r kann interagieren – per Tastatur, Screenreader oder Spracheingabe. Navigation und Steuerungselemente müssen zugänglich, klar und flexibel sein.
Heißt, dass Inhalte langfristig funktionieren – technisch sauber umgesetzt und kompatibel mit heutigen wie zukünftigen Assistenzsystemen.
Marken- und Kommunikationsstrategie
Barrierefreiheit beginnt, lange bevor das erste Design entsteht. In der Strategiephase wird festgelegt, für wen und wie kommuniziert wird.
Wenn Zielgruppenanalysen, Personas oder Markenbotschaften Diversität und unterschiedliche Nutzungssituationen mitdenken, wird Inklusion von Beginn an verankert – nicht als Zusatz, sondern als Haltung und konkrete Handlung. Denn jede:r von uns kann und wird im Leben irgendwann Einschränkungen erfahren.
Das erfordert Bewusstsein und methodisches Vorgehen. So entstehen Strategien, die Zugänglichkeit und Wirkung gleichermaßen berücksichtigen – glaubwürdig, relevant und zukunftsfähig.
- Ist es für die Positionierung der Organisation im Umfeld und Wettbewerb bedeutend, dass sie nach Außen und Innen inklusiv agiert?
- Kann die Organisation ihre Reichweite erhöhen, wenn sie Menschen mit Behinderung oder temporären Einschränkungen in ihre Kommunikation einschließt?
- Inwieweit kann und sollte Barrierefreiheit als ein fester Bestandteil im Markenverständnis, in der Corporate Identity und im Corporate Design der Organisation verankert werden?
- Eine klare Haltung signalisiert Verantwortung, Qualität und Zukunftsfähigkeit. Für Organisationen mit Schnittstellen zu Politik, Bildung, Soziales und öffentlicher Verwaltung ist Barrierefreiheit ein strategisches Differenzierungsmerkmal.
Literatur:
„The Business Case of Accessibility“, W3C
Laut WHO sind für 16 % der Bevölkerung barrierefreie Zugänge unabdingbar, das ist jede zehnte bis sechste Person unabhängig von Sinus Milieus, Beruf, Alter, Bildung, Einkommen.
Die Integration von Barrierefreiheit erfordert den zusätzlichen Blick auf situative und funktionale Einschränkungen, wie Aspekte zum Nutzungskontext und zur Zugänglichkeit von Inhalten.
Die Berücksichtigung von Personen mit Behinderungen in Zielgruppenanalysen bedeutet, diese innerhalb der anderen Zielgruppen mitzudenken und nicht als alleinstehende, weitere Gruppe zusätzlich.
Literatur:
„Disability«, WHO
Barrierefrei zugängliche Räume und Inhalte haben Vorteile für alle Menschen.
Teilhabe und Autonomie sind Grundbedürfnisse. Es gibt Personen, für die Barrierefreiheit ein essentielles Kriterium ist, um überhaupt eigenständig an unserer Gesellschaft teilhaben zu können.
- Augenerkrankungen, Seheinschränkungen, Blindheit: Schriftvergrößerung; Zoom-Funktionen; Icons und Bilder werden in Sprachausgabe berücksichtigt; Screenreader; Spracherkennung; Braillezeile
- Farbenblindheit, Rot-Grün-Sehschwäche, etc.: Kontraste der Farben zueinander; Inhalte werden auch in Schwarz-Weiß übermittelt; Mehr-Wege-Prinzip bei Icons und Interaktiven Zuständen (Form & Schrift & Farbe)
- Taubheit, Gebärdensprachler:innen: Untertitel; Gebärdensprache; bildhafte Visualisierungen sind ggf. einfacher, als viel Text; Messengerdienste; Chat-Optionen
- Motorische Einschränkungen, Dyslexie: Steuerung mit Sprache oder Joystick; Nutzung von Screenreader und Audio-Ausgaben; Tablet-Nutzung; Responsive Darstellung
- Neurologische Erkrankungen wie Epilepsie, Fatigue, Schmerzen: Animationen und Bewegungen ausstellen; Abdunkelung des Bildschirms; Nutzung Dark Mode; Schriftvergrößerung; Zoom-Funktionen; Steuerung mit speziellen Mäuse, Trackballs, Tastatur
- Neurodivergenz: Wiedererkennbarkeit, Konsistenz; Logik in der Struktur; Gliederung von Texten in Sinnabschnitten; Klarheit in Formgebung und Layout; Vertrautheit bzgl. gelernte Regeln und erwartbares Verhalten
- Post-Operativ, Hektik, volle U-Bahn, Demografisch abgehängt, Prekäre Bildungssituation, Fremdsprachler:innen, …
Literatur:
„A Web for Everyone – Designing Accessible User Experiences“, Sarah Horton, Whitney Quesenbery
- In welchen Kontexten werden Inhalte genutzt (z.B. unterwegs auf dem Smartphone, am Schreibtisch, in stressigen Entscheidungssituationen)?
- Welche Plattformen sind für die Zielgruppen-Vertreter:innen zentral von Bedeutung (z.B. Social Media, Messenger-Dienste, Karten-Apps, Print Publikationen, Ausstellungen, etc.)
- Welche Endgeräte und Programme müssen berücksichtigt werden (z.B. Screenreader, Touchscreen und Gesten-Steuerung, Vergrößerungssoftware, mobile Geräte, E-Reader, Tastatur, Joystick, etc.)?
- In welchen unterschiedlichen Modi sind Inhalte abzubilden (z.B. Light Mode, Dark Mode, ohne Animationen, stumm geschaltet)?
- Ist es möglich, die Inhalte über mehrere Sinnen zu erschließen (z.B. visuell-bildhaft, visuell-schriftlich, auditiv, über Gebärdensprache)?
- Sollen unsere Inhalte maschinell durchsuchbar sein (z.B. über Suchmaschinen, Screenreader, automatische Übersetzungen)?
Eine möglichst vielfältige Aufstellung kann hier für Menschen mit motorischen und verbalen Behinderungen sowie Beinträchtigungen im Sehfeld unerlässlich sein. Ebenso profitieren Menschen mit unsichtbaren Erkrankungen (z.B. Fatigue, Schmerzen, Fibromyalgie, Epilepsie) von einem flexiblen Angebot. Aber auch: Personen, die gerade in einer vollen U-Bahn sitzen oder aus anderen Gründen temporär visuell, akustisch oder motorisch eingeschränkt sind.
Aspekte, die für jeglichen Informationstransfer bereits essentiell sind, bekommen eine größere Bedeutung, wenn für die Organisation Barrierefreiheit ein wichtiger Faktor ist.
- Zentrale Informationen einer Kommunikation herausstellen
- Botschaften und Inhalte in eine einfache und logische Hierarchie und Informationshappen aufbereiten
- Metaphern und Verschachtelungen vermeiden
- Strukturen klar erkennbar und konsistent umsetzen
- Eine eindeutige Differenzierung zwischen Inhalten und Navigation ermöglichen (z.B. klar erkennbare Buttons, abgegrenzte Infoboxen)
Gerade im Wissenstransfer mit komplexen Inhalten ist es entscheidend, dass Kernbotschaften in zwei bis drei Minuten erfassbar sind, verschiedene Leseebenen angeboten werden und Inhalte skalierbar gestaltet sind. Barrierefreie Kommunikation macht diese Anforderungen nicht komplizierter – sie macht sie verbindlich.
Dies kann gerade für Menschen mit Neurodivergenz ausschlaggebend sein. Davon profitieren aber auch Menschen, die Inhalte und Botschaften schnell und effizient erfassen und bewerten müssen (z.B. Politiker:innen, Fördermittelgeber:innen).
Brandelements
Barrierefreiheit entscheidet sich oft schon in der Markenbasis. Wenn eine Farbpalette zu geringe Kontraste enthält, wird jedes darauf aufbauende Medium die Barrierefreiheitsprüfung nicht bestehen. Dasselbe gilt für die Auswahl von Schriften und die Konzeption von Formensprache bis hin zur Definition von Illustrationsstil und Bildsprache.
Wer Barrierefreiheit früh in die Markenentwicklung integriert, gestaltet nicht nur inklusiver, sondern auch nachhaltiger. Und wenn die barrierefreie Anwendung der Brandelements im Brandguide definiert ist, kann sie im Anschluss mit wenig Aufwand leichter eingehalten werden.
Denn was einmal zugänglich gedacht ist, bleibt dauerhaft anschlussfähig – für Menschen, für Systeme, für die Zukunft. Dies sollte auch im Brandguide klar und zugängig festgehalten sein.
Die WCAG 2.2 unterteilt in A-, AA-, AAA-Kriterien zur Beurteilung der Barrierefreiheit. In der Regel gilt es, den AA-Standard zu erfüllen.
- Farbkombinationen erfüllen mindestens Kontraste der AA-Kriterien (s.u.)
- Tailwind CSS Farbreihen sind für Farbabstufungen am Screen (RGB) definiert
- Prozentuale Abstufungen definieren Farbabstufungen für den Druck (CMYK)
- Basisfarben ≠ rein Weiß, ≠ rein Schwarz
- Farbpalette möglichst niedrigkomplex halten; z.B. drei Hauptfarben + Abstufungen
- Zentrale Inhalte sind auch in Schwarz-Weiß lesbar und verständlich
AA-Kriterien für Farbkontraste
- Großer Text auf Fläche (ab 24 px / 18 pt) = 3:1 (AA)
- Kleiner Text auf Fläche (bis 24 px / 18 pt) = 4,5:1 (AA)
- Navigation: Form auf Fläche mind. 3:1
- Navigation: Text auf Fläche mind. 4,5:1
Tools für Farbkontraste-Check
- Desktop-App (iOS) Color Contrast Analyser
- figma plugin Color contrast checker
- Browser Color contrast checker
- Browser Who can use?
- figma plugin Color Blind
- Buchstabenformen unterscheiden sich eindeutig (1, I, l, m, rn, O, 0, C, g, p, q, 8); Punzen und Öffnungen sind offen und großzügig
- Mengentexte sind gemischt geschrieben (Groß- und Kleinbuchstaben)
- Schriftgrößen sind skalierbar und betragen 16 px / 12 pt, besser 18 px / 13,5 pt (abhängig von Proportionen, Farbkontrast & Kerning der Schrift)
- Laufweite & Buchstabenzwischenräume sind leicht erhöht (0,12 / 0,16)
- Zeilenabstand bestenfalls 1,5 x der Schriftgröße (150 %)
- Zeilenlänge max. 60 Zeichen je Zeile inkl. Leerzeichen
- Textabschnitte haben einen Abstand von 2,0 x Schriftgröße zueinander
Links:
Handreichung BFIT-Bund, Text
Barrierefreiheit Online, Barrierefreie Schriftarten
- Aufbau vektorbasiert und skalierbar (svg, eps)
- Farbkontraste der Elemente erfüllen AA-Kriterien (s. Farben)
- Standard-Sets verwenden, z.B. Icon-Sets und Unicode Glyphen
- Größe funktionaler Icons mindestens 24 x 24 px (ca. 2,03 – 6,35 mm), besser 44 x 44 px (ca. 3,73 – 11,64 mm)
- Eindeutige Differenzierung der Icons und Elemente zueinander (räumlich, Form, Farbe)
- Zwei-Sinne-Prinzp Funktionale Icons mit Textlabel kombinieren (Form + Text)
- Motive sollten nicht zu kleinteilig oder verschwommen sein
- ALT-Text ist für jedes Bildmotiv verpflichtend = Kernaussage & Intention des Bildes in ein bis zwei Sätzen
- Text auf Bild eher vermeiden; wenn dann ruhige Motive & Mindeskontrast 3:1; Text immer vektorbasiert ≠ Pixelgrafik
- Position im Layout Bilder sind räumlich nah zum dazugehörigen Text zu platzieren
- Farbkontraste der Elemente erfüllen AA-Kriterien (s. Farben)
- Texte haben Mindestgrößen und genug Spationierung (s. Schrift)
- Beschriftungen von Achsen, Legenden, Werten besonders klar + Zwei-Wege-Prinzip (Text + Form)
- ALT-Text ist verpflichtend (gibt Beschaffenheit & Aussehen der Grafik wider)
- Kernaussagen und Werte werden im dazugehörigen Text detailliert beschrieben
- Position im Layout ist räumlich nah zum dazugehörigen Text
PDF Publikationen
Wenn Publikationen sowohl für den Druck als auch als barrierefreies PDF erscheinen sollen, muss Barrierefreiheit von Anfang an Teil des Prozesses sein. Die gängige Annahme, dass ein PDF durch ein nachträgliches Tagging in Acrobat Pro zum Schluss ganz einfach barrierefrei gemacht werden kann, ist ein Fehlschluss.
Gerade bei komplexen Layouts führt eine nachträglich anvisierte Umsetzung der Anforderungen zur Barrierefreiheit zu erheblichen Mehraufwänden und oft zu suboptimalen Ergebnissen.
Barrierefreie Publikationen entstehen durch ein Zusammenspiel von Redaktion, Gestaltung und technischer Aufbereitung – mit klarer Planung und sorgfältiger Abstimmung aller Beteiligten.
In der Textredaktion wird der Grundstein des Dokuments gelegt. Die inhaltliche Struktur, Satzstruktur und Wortwahl bestimmen maßgeblich, wie gut der Inhalt später als barrierefreie Datei umgesetzt werden kann.
- Sprache klare Argumentationsführung, keine zu komplexen Verschachtelungen, kein verschachtelter Sprachenmix, aktiv statt passiv (besonders bei Kapiteltitel, Überschriften, Strukturelementen)
- Semantik d.h. die Logik der Texthierarchien (H1 – H5, p) folgt einem niedrigkomplexen und konsisten Konzept
- Texte kurze Sätze und klare Struktur (Abschnitte, Listen, Zwischenüberschriften), Kerninformationen in Hauptsätzen, Zusatzinformationen in separaten Absätzen oder Infoboxen
- Navigation sprechende Links- und Buttontexte sowie eindeutige Kapiteltitel
- Fachbegriffe & Abkürzungen werden erläutert
- Legenden erläutern Kategorien und Werte in Diagrammen
- Silbentrennung ≠ manuell erzeugen, sondern automatisch; manuelle Silbentrennung kann falsche Worttrennungen im Screenreader verursachen und führt im Layout / Satz zudem zu unnötigem Mehraufwand
- ALT-Texte max. 1 – 2 Sätze je Icon, Grafik, Bild; ausführliche Beschreibungen als Fließtext im Dokument
- Leichte & gendergerechte Sprache steigern Inklusivität und erhöhen Zugang (aktuell noch keine Pflicht)
Im Layout und Satz fließen mehrere Fäden zusammen. Neben Entscheidungen zu Markenrepräsentation und Transfer der Inhalte, wird hier der technische Aufbau des Dokuments entwickelt.
- Klarheit je großzügiger, offener und reduzierter, desto leichter umsetzbar
- Möglichst viel im Layoutprogramm möglichst wenig nachträglich im exportierten PDF
- Verankerungen / Verkettungen alle Inhalte (Texte, Bilder, Gafiken) sind fortlaufend miteinander verknüpft, Bilder und Grafiken im Textfluss verankert
- Semantik entspricht einer konsistenten, eindeutigen inhaltlichen & visuellen Hierarchie (z.B. H1 – H5, P, BlockQuote, Note, etc.); Die semantische Hierarchie folgt im Zweifel der inhaltlichen Logik, nicht der visuellen Gewichtung!
- Formate (z.B. Zeichen-, Absatz-, Listen- & Tabellenformate) werden konsequent mit den automatischen Funktionen von InDesign erstellt
- Konsistenz in der Gestaltung von Navigation und Strukturelementen
- Inhaltsverzeichnis immer über „Layout – Inhaltsverzeichnis“ und basierend auf Absatzformaten mit korrekten Überschriften-Tags erstellen; ein manuell gesetztes oder nachträglich angepasstes Inhaltsverzeichnis ist NICHT barrierefrei
- Navigation über Lesezeichenstruktur (Bookmarks) wird aus den semantischen Überschriften automatisch generiert, wenn diese korrekt angelegt und zugewiesen wurden
- Lesereihenfolge von Inhalten ist optisch und technisch identisch (Test über Sprachausgabe des Screenreaders)
- Dekorative Elemente alle Schmucklinien, Hintergrundformen, Texturen ohne inhaltliche Bedeutung sind im Tagging als Außertextliche Elemente zu markieren; hierzu zählen auch Seitenzahlen, Kolumnentitel, Wasserzeichen
- ALT-Texte für alle Bilder, Icons, Grafiken hinterlegen
- Hyperlinks sind sprechend und aussagekräftig benannt (nicht: hier klicken, besser: Download BroschüreXYZ); Links müssen immer als Links getaggt sein
- Satzzeichen (Glyphen) kommen aus dem Unicode-Satz der Schrift (nur so werden sie von Screenreadern korrekt gelesen)
- Icons kommen bestenfalls aus bestehenden Icon-Sets oder werden mit nebenstehendem Lesetext und ALT-Text versehen
- Sprache des Dokuments und der Inhalte ist überall, wo möglich, korrekt eingestellt
- Metadaten sind vollständig vorhanden (s. Metadaten)
Links:
GermanUPA, 10 Praxistipps bis zum PDF-Export, Anne-Marie Nebe
Adobe InDesign, Erstellen von barrierefreien PDFs
Barrierefreie PDF-Dokumente erstellen, Posselt & Fröhlich
- Vorgegebene Funktionen des Programms nutzen (z.B. Tabellen-Werkzeug, automatische Fußnoten)
- Semantische Struktur der Tabelle definieren: Kopfzeile und Fußzeile von Tabellen als solche unter Tabellenoptionen definieren und damit von Datenzellen differenzieren
- Komplexe Tabellen aus verbundenen Zellen, mehrzeiligen Kopfzeilen und Verschachtelungen vermeiden, da Screenreader diese schwer lesen können; besser: in mehrere Tabellen aufteilen oder statt Tabellen Listen anlegen
- Testing: Tabellen immer im Screenreader und mit Tab-Steuerung testen; Screenreader sollte beim Vorlesen die Anzahl der Zellen und Zeilen angeben und die Zeilen und Spalten beziffert benennen, Kopfzeilen sollten mitgelesen werden
- Fuß- und Endnoten sollten wenn möglich vermieden werden, da sie bzgl. Barrierefreiheit eher problematisch sind – sie führen die Leser:innen aus dem Lesefluss weg und bei Endnoten sogar ganz bis ans Ende des Dokuments ohne Rückweg, zudem wurden Fuß- und Endnotenformate in InDesign seit über zehn Jahren technisch nicht weiterentwickelt; besser sind: Inline-Referenzen innerhalb der Texte in Klammern, Marginalien und Sidebar-Anmerkungen, verankerte Textboxen
- Wenn Endnoten unvermeidbar sind Verlinkung zur Endnote eindeutig gestalten und eine Rückverlinkung zum Ursprungstext integrieren (bidirektionale Hyperlinks); Endnoten-Nummern als Hochstellungen mit Alt-Text versehen; Hyperlink-Optionen nutzen, um echte Sprungmarken zu erstellen
- Struktur & Logik Bündelung der Formularfelder in Abschnitte nach inhaltlicher Zugehörigkeit
- Fortschrittsanzeige bei Multistep-Formularen
- Pflichtfelder explizit beschriften, z.B. mit „Name (Pflichtfeld)“ oder „E-Mail (erforderlich)“; Hintergrund: Screenreader lesen * als „Stern“ oder „Sternzeichen“ vor
- Konsistenz in der Markierung von Pflichtfeldern
- Beschriftung der Formularfelder ist immer sichtbar (z.B. Label außerhalb des Feldes), wichtig für beschreibbare PDFs
- Fokusindikatoren für Inputfelder sind visuell eindeutig
- Feedbacks sind klar und eindeutig (Eingabehinweise, Datenverarbeitung, Absendebestätigung)
- Fehlermeldungen sind klar, konkret und in Textform umgesetzt; Farbkontrast sind hier zu beachten; müssen mit dem Formularfeld direkt verknüpft sein
- Auto-Fill Ausgabe und Steuerung für Assistive Technologien sicherstellen!
- Screenreader-Unterstützung Formularfelder immer im Voice Over testen!
- Dateiname bezeichnet den technischen Namen einer Datei, mit Versionsnummer und Kürzeln, meist für den internen Gebrauch (z.B. 251202_NI-Barrierefrei_k3.pdf)
- Dokumentenname (Titel der Datei in den Metadaten) entspricht nicht dem Dateinamen einer Datei! Der Dokumentenname ist das, was die Datei im Internet auffindbar macht und sollte das Dokument möglichst gut beschreiben (z.B. „NI How: Kriterien zur Barrierefreiheit – Hier gibt es richtig gute Tipps“); Einstellungen vor dem Export unter „Datei – Dateiinformationen“; beim Export „Dokumenttitel anzeigen“ aktivieren
- Dokumentensprache in den Metadaten hinterlegen; vor Export „Bearbeiten – Voreinstellungen – Wörterbuch – Sprache“, mehrsprachige Dokumente: über „Sprachauszeichnung auf Absatz- oder Zeichenebene über die Zeichenformate
- Lesereihenfolge / Tagstruktur des Dokuments berücksichtigen; nur dann wird die vorab definierte Struktur vom Ausgabegerät berücksichtigt
- Beschreibung (Subject) beinhaltet eine prägnante Zusammenfassung des Inhalts (1 – 2 Sätze)
- Stichwörter (Keywords) helfen bei der Auffindbarkeit des Dokuments; via „Datei – Dateiinformationen – Stichwörter“
Websites
Digitale Barrierefreiheit zeigt sich in den Details – in Buttons, Formularen, Navigationen oder Fehlermeldungen. Jede UI-Komponente trägt dazu bei, wie intuitiv, verständlich und flexibel eine Website genutzt werden kann.
Barrierefreie Komponenten zu gestalten bedeutet, visuelle, strukturelle und technische Anforderungen sorgfältig aufeinander abzustimmen: Kontrastverhältnisse, Fokuszustände, Tastaturnavigation, ARIA-Rollen und semantische HTML-Strukturen.
Wenn diese Prinzipien in Designsysteme und Pattern Libraries integriert werden, entsteht eine belastbare Grundlage, die Barrierefreiheit langfristig sichert – und Entwicklungsprozesse effizienter macht, ohne Qualität zu kompromittieren.
Zur besseren Übersicht sind im Folgenden lediglich die Komponenten aufgeführt, auf die in der Umsetzung besonders zu achten ist.
- Bedienung per Tastatur auslösbar via Tab, Leertaste, Enter, ESC (maschinenlesbar)
- Größe die klickbare Zielgröße hat mind. 24 x 24 px
- Kontrast zum Hintergrund entspricht mind. 3:1
- States müssen visuell eindeutig voneinander differenziert sein (Form, Text, Farbe)
- Fokusindikator ist deutlich sichtbar (z.B. klar erkennbare Zusatz-Outline)
- Code entweder korrektes HTML-Element oder ARIA-Rolle
Interaktive Zustände (States)
- Default, Hover, Focus, Active (Pressed) Disabled (Inactive) ist nicht notwendig
- Default Beschaffenheit s. Kriterien zu Buttons, Links, Schaltflächen
- Hover & Focus sind immer statisch und lösen keine Aktionen aus
- Hover weist visuell eine deutliche Veränderung zum Default-Zustand auf; ≠ der einzige Hinweis, dass Element klickbar ist
- Focus ist immer deutlich sichtbar (Farbe + Form, z.B. Zusatz-Outline)
- Active (Pressed) spürbare haptische, visuelle, auditive Rückmeldung; Farbänderung oder Bewegung im / vom Button
- Kontraste entsprechen AA-Kriterien (s. Design BASICS), vor allem klickbare Elemente
- Schriftgrößen sind groß genug (s. Design BASICS)
- Klickbare Icons (z.B. Burger) sind eindeutig beschriftet (Form + Text)
- Separate Klickbarkeit bei Hauptmenüpunkten und zugehörigem Dropdown-Untermenü
- Fokusindikator ist deutlich sichtbar (z.B. klar erkennbare Zusatz-Outline)
- Bedienung ist fokusführbar und vollständig per Tastatur steuerbar
- Struktur ist niedrigkomplex und eindeutig nach Themen oder Kategorien gegliedert
- Inhalte sind semantisch sinnvoll strukturiert > Ausgabe Screenreader
- Redundanz vs. Konsistenz keine Doppelungen ohne Zweck
- Hero & Footer sind auf Scroll gesetzt / vor allem mobil wichtig
- Rückwege aus Mega-Fly-Out oder Burger-Menü sind jederzeit per Tastatur und Maus möglich
- Beschriftung ist aussagekräftig, sprechend und sprachlich eindeutig
- Größe die Klickfläche des Buttons umfasst mind. 44 x 44 px
- Fokus-State unterscheidet sich klar von anderen States (z.B. doppelte Outline)
- Kontraste von Text und Fläche entsprechen AA-Kriterien (s. Design BASICS)
- Bedienung per Tastatur auslösbar (<button> Attribut, ≠ <div> oder <a> ohne role)
- Schriftform erfüllt die Kriterien für gut lesbare Schriften (s. Design BASICS)
- Beschriftung ist aussagekräftig, sprechend und sprachlich eindeutig
- Differenzierung eindeutiger visueller Unterschied zum Fließtext (Farbe + Form)
- Default Unterstreichung unterscheidet Link von Fließtext
- Kontrast zum Hintergrund entspricht mind. 4,5:1
- Bedienung per Tastatur auslösbar via Tab, Enter
- Fokusindikator ist deutlich sichtbar (z.B. klar erkennbare Zusatz-Outline)
- Schriftform erfüllt die Kriterien für gut lesbare Schriften (s. Design BASICS)
- Eigenschaft Mehrfachauswahl möglich
- Aussehen sind immer quadratisch
- Größe die klickbare Zielgröße hat mind. 24 x 24 px
- Kontrast zum Hintergrund entspricht mind. 3:1
- States checked, unchecked, intermediate > müssen sich visuell eindeutig unterscheiden
- Bedienung über Tab erreichbar, mit Leertaste umschalten
- Eigenschaft Immer singuläre Auswahl (entweder/oder)
- Aussehen sind immer rund
- Größe die klickbare Zielgröße hat mind. 24 x 24 px
- Kontrast zum Hintergrund entspricht mind. 3:1
- States checked, unchecked > müssen sich visuell eindeutig unterscheiden
- Bedienung über Tab erreichbar, mit Pfeiltasten auswählen
- Code kein natives HTML-Element verfügbar
- Eigenschaft Wechsel eines Zustands
- Größe die klickbare Zielgröße hat mind. 24 x 24 px
- Kontrast zum Hintergrund entspricht mind. 3:1
- States an / aus müssen eindeutig via Farbe + Symbol + Text unterschieden werden
- Code am besten durchgehend beim nativen HTML <select> Element bleiben
- Geöffneter Zustand auf individuelles Styling verzichten; keine Bilder, kein Custom Layout, Padding & Outlines nicht ändern
- Geschlossener Zustand gestalterische Kriterien wie bei anderen Schaltelementen
- Text auf Bild muss Mindestkontrast einhalten = 4,5:1
- Texteinbindung vektorbasiert ≠ als Pixelgrafik
- Bildaussage über Zwei-Wege-Prinzip vermitteln (visuell / Bild + ALT-Text)
- Responsivität Inhalt und Aussage des Bildes muss erhalten bleiben
- Aspect Ratio Verhalten und Aussehen muss über alle Breakpoints definiert werden
- Auto-Play muss pausierbar sein
- Steuerung muss per Tastatur möglich sein (vor, zurück, pausieren, play)
- Fokusindikator darf nicht in Endlosschleife festhängen / muss immer sichtbar sein
- Bedienelemente benötigen korrekte HTML-Benennung <button>
- Veränderungen Verhalten & Aussehen müssen per Screenreader ausgegeben werden
- Low Conversion Rate je mehr Content, desto weniger werden alle Inhalte wahrgenommen
- Steuerung muss per ESC schließbar sein
- Schließen-Button erfüllt Zwei-Wege-Prinzip (Icon + Text)
- Hintergrund wird für Screenreader & Tab-Navigation deaktiviert
- Bedienung steuerbar via Tab & Screenreader
- Buttons & Links benötigen Fokuszustände
- Reset nach Schließen müssen Fokus-Zustände zurückgesetzt werden
- Steuerung Alle Steuerelemente müssen per Tastatur erreichbar sein
- Buttons müssen semantisch korrekt und mit sprechenden Labels beschriftet sein
- Automatisch Ausblenden nur, wenn wieder einblendbar (auch dauerhaft bei Tab & Voice Over)
- States der Zustand der Steuerleiste wechselt nicht unerwartet
- Optional „Steuerleiste immer anzeigen“ in Barrierefreiheits-Optionen anbieten
- Struktur & Logik Bündelung der Formularfelder in Abschnitte nach inhaltlicher Zugehörigkeit
- Fortschrittsanzeige bei Multistep-Formularen
- Pflichtfelder sind sprechend mit »optional« / »Pflichtfeld« beschriftet ≠ *
- Beschriftung der Formularfelder ist immer sichtbar (z.B. Label außerhalb des Feldes)
- Fokusindikatoren für Inputfelder sind visuell eindeutig
- Feedbacks sind klar und eindeutig (Eingabehinweise, Datenverarbeitung, Absendebestätigung)
- Fehlermeldungen sind klar, konkret und in Textform; Farbkontrast beachten!
- Auto-Fill Ausgabe und Steuerung für Assistive Technologien sicherstellen!
- Screenreader-Unterstützung Formularfelder im Voice Over testen!
Autocomplete
- in einem Formularfeld wird die vorherige Eingabe gespeichert und bei erneuter Eingabe wieder abgerufen
- gut und sinnvoll und als natives HTML-Element vorhanden
Autosuggest
- im Suchfeld werden beim Tippen automatisch weitere Suchbegriffe vorgeschlagen
- Steuerung Liste muss per Tastatur & Sprachausgabe angesteuert werden können
- Fokusreihenfolge muss logisch und intuitiv sein
- Bessere Alternative Häufigste Schlagworte werden in Nähe zum Suchfeld platziert
- Fokusreihenfolge bei Tab-Steuerung muss immer logisch und intuitiv sein
- Fokusindikation muss auf erstem Link in neu geladenem Content platziert sein
- Seitenende / Ende des Contents muss ersichtlich sein
- Screenreader benötigen Feedback, dass neuer Content verfügbar ist
- Dynamisch geladener Content besitzt keine URL und wird nicht über Cmd/Ctrl + F gefunden
- Weiteren Content besser über „Load more“ Button laden
- Aufbau und Gestaltung erfüllen ähnliche Kriterien wie bei Formularen sowie Design BASICS
- Überschriften sind prägnant und können je Zelle eindeutig zugeordnet werden (Screenreader)
- Spalten & Zeilen sind visuell klar erkennbar und konsistent in ihrer Struktur
- Kopfbereiche von Zeilen und Spalten sind visuell deutlich hervorgehoben
- Padding innerhalb der Zellen = ca. 12 – 16 px
- Zustandswechsel sind bei Interaktion deutlich sichtbar
- Technischer Aufbau vom Programm vorgegebene Funktionen / natives HTML-Element verwenden
- Allgemein ähnliche Kriterien wie bei Modalen
- Datum muss zusätzlich per Textfeld einzugeben sein
- Steuerung Elemente (Tage, Monate, Jahre) müssen zu überspringen sein (Tab, VoiceOver)
- Semantik ist hier essentiell und muss konsistent korrekt sein
- Code aktuell existierende, native HTML-Picker sind noch nicht voll barrierefrei
Testing
Barrierefreiheit endet nicht mit der Entwicklung – sie muss überprüft werden. Testing macht sichtbar, wo Barrieren bestehen, bevor sie reale Hürden darstellen.
Automatisierte Prüfungen sind hilfreich, aber sie decken nur einen Teil ab. Erst die Kombination aus technischer Analyse und manueller Testung – idealerweise mit Nutzer:innen, die Assistenztechnologien verwenden – zeigt, wie zugänglich ein Produkt tatsächlich ist.
Regelmäßige Tests schaffen Verlässlichkeit: Sie helfen Teams, Schwachstellen zu erkennen, Wissen zu vertiefen und die Qualität schrittweise zu verbessern.
- Acrobat Pro Barrierefreiheitsprüfung: Diese ist nicht WCAG-konform und führt zu missverständlichen Ergebnissen, da sie z.B. eine Farbkontraste-Prüfung nicht inkludiert
- PDF Accessibility Checker (PAC): Ist in Deutschland der Standard zur Prüfung von Barrierefreiheit bei PDFs. Leider ist PAC nur Online (bis 10 MB) oder für Windows-Betriebssysteme verfügbar
- Live-Testing durch Personen mit Behinderung
Weitere Infos, Support & Plugins
einmanncombo, Klaas Posselt
axes4, InDesign Plugin
Callas Software, Acrobat Plugin
- Free Accessibility Checker von Skynet Technologies; kostenfreies Online-Tool; Check via URL; Prüfprotokoll als PDF-Download möglich
- Live-Testing durch Personen mit Behinderung