Digitale Barrierefreiheit Glossar

Leichte Sprache folgt festen Regeln mit sehr kurzen Sätzen, einfachen Wörtern und oft ergänzenden Bildern, während einfache Sprache weniger strikt ist, aber auf klare, verständliche Formulierungen und eine logische Struktur setzt. Leichte Sprache ist besonders für Menschen mit starken kognitiven Einschränkungen gedacht. Einfache Sprache für ein breites Publikum mit unterschiedlichem Sprachverständnis hilfreich ist.

Einfach Wörter, kurze Sätze

• Verwende bekannte Wörter und vermeide Fachbegriffe.
• Schreibe kurze Sätze mit nur einer Information.
• Beispiel: Statt „Bitte validieren Sie Ihre Eingabe.“ besser „Bitte prüfen Sie Ihre Eingabe.“

Logische Struktur & visuelle Unterstützung

• Überschriften, Absätze und Listen helfen beim Verstehen.
• Bilder, Symbole oder Piktogramme unterstützen den Text.
• Aktive Sprache ist leichter zu verstehen als Passivformen.

Dazu gehören digitale Texte, PDFs, Word-Dokumente und Präsentationen, die für Screenreader zugänglich, strukturiert und leicht verständlich sind.

Richtige Formatierung

• Ein Dokument sollte eine logische Lesereihenfolge haben, manuelle Formatierungen, wie fette Schrift für Überschriften, sollten vermieden und stattdessen semantische Formatvorlagen genutzt werden.

Barrierefreie PDFs & richtige Export-Einstellungen

• PDFs sollten mit echtem Text statt eingebetteten Bildern erstellt werden. Die Verwendung der „Als PDF exportieren“-Funktion aus Programmen wie Microsoft Word oder Adobe InDesign erhält die Dokumentstruktur
• Mit Tools wie dem Adobe Acrobat Barrierefreiheits-Check kann überprüft werden, ob ein PDF den Anforderungen der Barrierefreiheit entspricht.

Die WCAG sind internationale Richtlinien für digitale Barrierefreiheit und legen Anforderungen fest, um Websites, Apps und Inhalte für alle zugänglich zu machen. Die aktuelle Version WCAG 2.1 dient als Grundlage vieler gesetzlicher Vorschriften weltweit.

Die 4 WCAG-Prinzipien

• Wahrnehmbar: Inhalte müssen visuell und auditiv zugänglich sein (z. B. Alternativtexte, Kontrast, Untertitel).
• Bedienbar: Alle Funktionen müssen per Tastatur nutzbar sein, mit Fokusmarkierungen und klaren Interaktionen.
• Verständlich: Klare Sprache, logische Navigation und verständliche Fehlermeldungen sind essenziell.
• Robust: Inhalte müssen mit verschiedenen Technologien und Assistenzsystemen kompatibel sein.

WCAG-Konformitätsstufen

Die WCAG hat drei Stufen: A (Mindestanforderungen, z. B. Alternativtexte), AA (empfohlene Standards, z. B. Kontrast, Tastatursteuerung) und AAA (höchste Barrierefreiheit, z. B. 7:1 Kontrast, einfache Sprache).

Die EN 301 549 ist die europäische Norm für digitale Barrierefreiheit und legt technische Anforderungen für Websites, Apps, Software, digitale Dokumente und Hardware fest. Sie basiert weitgehend auf den WCAG 2.1 Stufe AA und ergänzt gesetzliche Vorgaben wie die EU-Richtlinie 2016/2102 für öffentliche Stellen sowie das Barrierefreiheitsstärkungsgesetz (BFSG) für private Unternehmen ab 2025.

Was regelt die EN 301 549?

• Websites & Apps: Müssen barrierefrei nutzbar sein, z. B. durch Alternativtexte, Tastatursteuerung und ausreichende Kontraste.
• Dokumente & PDFs: Müssen mit Screenreadern lesbar und strukturiert sein.
• Software & Betriebssysteme: Müssen barrierefreie Bedienoptionen bieten, z. B. Anpassung der Schriftgröße und Unterstützung von Hilfstechnologien.
• Hardware & Endgeräte: Touchscreens, Automaten und Geräte müssen für Menschen mit motorischen oder visuellen Einschränkungen bedienbar sein.

Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) ist die deutsche Umsetzung der EU-Richtlinie 2016/2102 und regelt die Barrierefreiheit für öffentliche digitale Angebote in Deutschland. Sie verpflichtet Bundesbehörden, Landesbehörden und öffentliche Stellen, ihre Websites, Apps und digitalen Dokumente barrierefrei zu gestalten.

Rolle der BITV 2.0 in der Gesetzgebung

• Die BITV verweist direkt auf die EN 301 549, die wiederum auf die WCAG 2.1 AA basiert.
• Gilt für öffentliche Stellen: Alle Websites und Apps von Bundes- und Landesbehörden sowie bestimmte öffentliche Unternehmen müssen BITV-konform sein.
• Verpflichtet zu einer Erklärung zur Barrierefreiheit: Öffentliche Stellen müssen eine Barrierefreiheitserklärung veröffentlichen und eine Feedback-Möglichkeit für Nutzer bereitstellen.
• Wird durch Prüfstellen kontrolliert: Die Umsetzung wird regelmäßig durch Monitoring-Verfahren überprüft.

Das BFSG setzt die EU-Richtlinie 2019/882 in Deutschland um und verpflichtet ab 28. Juni 2025 viele private Unternehmen zur Barrierefreiheit. Die Pflicht gilt für Anbieter digitaler Produkte und Dienstleistungen und erweitert die bisherige Regelung für öffentliche Stellen.

Wer ist betroffen?

• Das BFSG gilt für Unternehmen in der EU, die digitale Produkte und Dienstleistungen für Endverbraucher anbieten
• Dazu zählen E-Commerce-Anbieter (Online-Shops, Buchungsplattformen, Bezahlsysteme), Banken und Finanzdienstleister (Bankautomaten, Online-Banking, Banking-Apps) sowie Telekommunikationsanbieter (Websites, Kundenportale, digitale Verträge)
• Auch Hersteller und Händler von Selbstbedienungsterminals (Fahrkartenautomaten, Check-in-Systeme, E-Ticket-Automaten) sowie digitale Dienstleister (Streaming, E-Books, Cloud-Anbieter) sind betroffen
• Ausgenommen: Kleinstunternehmen mit weniger als 10 Mitarbeitern und einem Jahresumsatz unter 2 Mio. € 

Farben sollten nicht die einzige Möglichkeit zur Informations-vermittlung sein, da Menschen mit Sehbeeinträchtigungen oder Farbfehlsichtigkeit bestimmte Kombinationen schwer unterscheiden. Besonders Menschen mit Rot-Grün-Schwäche, Blau-Gelb-Schwäche oder Achromatopsie profitieren von einer bewussten Farbwahl. Auch ältere Nutzer oder Personen mit schlechten Bildschirmbedingungen (z. B. Sonneneinstrahlung) benötigen hohe Kontraste und klare Abgrenzungen.

Keine alleinige Farbcodierung

• Wichtige Informationen dürfen nicht allein durch Farbe vermittelt werden
• Ein Fehlerhinweis sollte z. B. nicht nur rot sein, sondern zusätzlich ein Symbol (⚠️) oder Text („Fehler: Ungültige Eingabe“) enthalten

Kontrast & Lesbarkeit

• Texte und interaktive Elemente müssen sich deutlich vom Hintergrund abheben. Die WCAG 2.1 fordert ein Mindestkontrastverhältnis von 4.5:1 für normalen Text und 3:1 für große Schrift (ab 18px oder 14px fett)

Gut lesbare Schriften sind essenziell für digitale Barrierefreiheit, da sie Menschen mit Sehbeeinträchtigungen, kognitiven Einschränkungen oder Leseschwächen den Zugang zu Informationen erleichtern. Schlecht lesbare oder zu kleine Schriften erschweren nicht nur Menschen mit Sehschwäche oder Dyslexie das Lesen, sondern auch viele andere Nutzer, beispielsweise auf mobilen Geräten oder bei schlechten Lichtverhältnissen.

Schriftgröße & Lesbarkeit

• Die empfohlene Mindestgröße für Fließtext beträgt 16px, um eine gute Lesbarkeit zu gewährleisten.
• Zeilen sollten ausreichend Abstand haben (mindestens 1,5-fache Zeilenhöhe) und nicht zu breit sein, um das Erfassen der Inhalte zu erleichtern.

Kontrast

• Der Text sollte sich deutlich vom Hintergrund abheben, mit einem Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für große Schrift (ab 18px oder 14px fett).

Ein guter Kontrast ist essenziell, damit Inhalte für alle User sichtbar und lesbar sind – besonders für Menschen mit Sehschwäche, Farbfehlsichtigkeit oder Kontrastempfindlichkeit. Zu geringe Kontraste erschweren das Erkennen von Texten, Icons und Bedienelementen, während ein gut durchdachter Kontrast die Orientierung und Bedienbarkeit verbessert.

Mindestkontrast für Texte 
& Elemente

• Laut WCAG 2.1 muss Text ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund haben, große Schrift (ab 18px oder 14px fett) mindestens 3:1.
• Auch nicht-textuelle Elemente wie Buttons, Icons oder Formulare müssen sich klar abheben, z. B. durch Farbunterschiede oder Umrandungen.

Interaktive Elemente

• Auch Buttons, Links, Icons und Formulare müssen mit mindestens 3:1 Kontrast gut erkennbar sein. Hover- und Fokuszustände sollten sich klar abheben, z. B. durch Farbwechsel, Unterstreichungen oder Rahmen, um die Bedienung zu erleichtern.

Buttons sind essenzielle Interaktionselemente und müssen leicht erkennbar, verständlich beschriftet und gut bedienbar sein. Menschen mit motorischen Einschränkungen, Sehbehinderungen oder kognitiven Einschränkungen sind auf ausreichende Größe, gute Kontraste und klare Beschriftungen angewiesen. Barrierefreie Buttons sollten sich visuell von anderen Elementen abheben, per Tastatur und Screenreader zugänglich sein und deutliches Feedback bei Interaktion geben.

Mindestgröße & Klickfläche

• Buttons sollten eine Mindestgröße von 44×44 Pixel haben, um eine einfache Bedienung auf Touchscreens und mit eingeschränkter Feinmotorik zu ermöglichen.
• Der Abstand zwischen Buttons sollte mindestens 8px betragen, um Fehlklicks zu vermeiden.

Eindeutige Beschriftung & Symbole

• Die Beschriftung eines Buttons sollte klar und aussagekräftig sein, z. B. „Jetzt kaufen“ statt „OK“.
• Falls ein Button nur ein Icon enthält (z. B. ein Papierkorb-Symbol), muss er mit aria-label ergänzt werden

Bilder müssen so gestaltet sein, dass sie für alle Menschen zugänglich sind, einschließlich blinder oder sehbehinderter Personen, die Screenreader nutzen. Sie dürfen keine essenziellen Informationen ausschließlich visuell vermitteln, sondern müssen durch Alternativtexte oder textliche Ergänzungen verständlich gemacht werden.

Alt Texte

• Bilder, die Informationen enthalten, benötigen eine klare und prägnante Beschreibung im alt-Attribut, damit Screenreader-Nutzer den Inhalt erfassen können. Bei komplexen Abbildungen, wie Diagrammen, sollte eine ausführliche Beschreibung im Fließtext oder als separate Textalternative hinzugefügt werden.

Dekorative Bilder

• Bilder ohne inhaltliche Relevanz sollten mit alt=““ versehen werden, damit sie von Screenreadern ignoriert werden. Alternativ können sie per CSS als Hintergrundbild eingebunden werden, um die Barrierefreiheit nicht zu beeinträchtigen.

Eine semantisch korrekte HTML-Struktur erleichtert Screenreadern die Erfassung von Inhalten und verbessert die Navigation. Durch den richtigen Einsatz von Überschriften, Listen, Absätzen und ARIA-Attributen werden Informationen verständlicher.

Semantische HTML-Elemente

• Statt rein dekorativer <div>-Container sollten natürliche HTML-Elemente verwendet werden
• <header>, <nav>, <main>, <section> und <footer> für die Grundstruktur.
• <h1> bis <h6> für eine klare Hierarchie der Inhalte.
• <ul>, <ol> und <li> für Listen, statt Texte mit Trennzeichen aufzuzählen.

Sinnvolle ARIA-Attribute

• aria-label für nicht sichtbare Beschriftungen interaktiver Elemente.
• aria-describedby zur Verknüpfung von Erklärtexten mit Eingabefeldern oder Buttons.
• role=“navigation“ oder role=“banner“, wenn Standard-HTML-Elemente nicht verwendet werden können.

Ein gut sichtbarer und logisch steuerbarer Fokus ist essenziell für die Bedienbarkeit einer Website per Tastatur und Assistenztechnologien. Menschen, die keine Maus nutzen, navigieren mit der Tabulator-Taste durch interaktive Elemente wie Links, Buttons oder Formulare. Ein barrierefreier Fokus sorgt dafür, dass jedes Element in einer sinnvollen Reihenfolge erreichbar ist und klar erkennbar bleibt.

Fokus sichtbar machen

• Der aktuelle Fokus muss optisch hervorgehoben werden, z. B. durch eine farbige Umrandung, einen Schatten oder eine Unterstreichung.
• Dies ist besonders wichtig für Tastaturnutzer, die ohne visuelles Feedback nicht wissen, wo sie sich auf der Seite befinden.

Fokus-Reihenfolge beachten

• Die Reihenfolge, in der der Fokus durch die Inhalte navigiert, muss sinnvoll und intuitiv sein, z. B. von oben nach unten oder von links nach rechts.
• Elemente dürfen nicht übersprungen werden, und modale Dialoge oder Pop-ups sollten den Fokus in sich behalten, bis sie geschlossen werden.

Barrierefreie Links sind wichtig, um allen Nutzern, einschließlich Menschen mit motorischen Einschränkungen, Sehbehinderungen oder kognitiven Einschränkungen, eine einfache Navigation durch digitale Inhalte zu ermöglichen. Sie müssen klar erkennbar, eindeutig beschriftet und vollständig per Tastatur bedienbar sein, damit sie unabhängig von der Eingabemethode zugänglich sind.

Aussagekräftige Linktexte

• Der Linktext sollte klar beschreiben, wohin der Link führt oder welche Aktion er ausführt. „Hier klicken“ oder „Mehr erfahren“ sind unzureichend, da sie ohne Kontext keine Orientierung bieten. Besser ist z. B. „Mehr erfahren über unsere Produkte“ oder „Details zum Barrierefreiheitsgesetz“.

Sichtbarkeit

• Links müssen sich optisch vom normalen Text abheben, z. B. durch eine Unterstreichung oder eine kontrastreiche Farbe. Das Kontrastverhältnis zwischen Linkfarbe und Hintergrund sollte mindestens 4.5:1 betragen

Um digitale Inhalte barrierefrei zu gestalten, helfen verschiedene Testing-Tools, die Probleme wie fehlende Alternativtexte, Kontrastmängel oder Tastaturzugänglichkeit erkennen. Diese Tools erleichtern die Überprüfung nach den WCAG-Richtlinien und unterstützen Entwickler:innen, Designer:innen und Redakteur:innen bei der Optimierung von Websites und Apps.

Automatisierte Tests

• Automatisierte Tools wie WAVE, Axe DevTools oder Lighthouse analysieren Websites auf Fehlermeldungen zu Kontrast, fehlenden Labels oder Tastaturbedienbarkeit.
• Sie bieten schnelle Übersichten über Probleme, ersetzen jedoch keine manuellen Tests mit Screenreadern oder Tastatur.

Manuelle Tests

• Barrierefreiheit sollte immer auch manuell getestet werden. Screenreader wie NVDA (Windows) oder VoiceOver (Mac/iOS) helfen dabei, zu überprüfen, ob Inhalte für blinde oder sehbehinderte Nutzer verständlich sind.
• Ebenso wichtig ist die Tastaturprüfung, um sicherzustellen, dass alle interaktiven Elemente ohne Maus erreichbar sind.

Assistive Technologien (AT) sind Hilfsmittel, die Menschen mit Behinderungen den Zugang zu digitalen Inhalten erleichtern. Dazu gehören Screenreader, Sprachsteuerungen, alternative Eingabegeräte und viele weitere unterstützende Technologien.

Screenreader

• Screenreader wie NVDA (Windows), JAWS oder VoiceOver (Mac/iOS) lesen Bildschirminhalte laut vor und ermöglichen blinden oder sehbehinderten Menschen die Navigation durch digitale Inhalte.
• Webseiten müssen korrekt strukturiert sein (<h1>-<h6>, aria-labels, Alternativtexte für Bilder), damit Screenreader sie verständlich interpretieren können.

Alternative Eingabemethoden

• Menschen mit motorischen Einschränkungen nutzen oft Tastatursteuerung, Sprachbefehle oder spezielle Eingabegeräte wie Augensteuerung oder Kopfbewegungssensoren.
• Barrierefreie Websites sollten daher vollständig per Tastatur bedienbar sein (Tab, Enter, Space) und sichtbare Fokus-Indikatoren für eine klare Navigation enthalten.