Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz in Kraft. Es verpflichtet Unternehmen in Deutschland, digitale Produkte und Dienstleistungen so zu gestalten, dass sie für Menschen mit Behinderungen besser zugänglich und nutzbar sind.
Das Barrierefreiheitsstärkungsgesetz betrifft eine Vielzahl digitaler Dienstleistungen. Darunter Messenger-Dienste, Angebote des elektronischen Geschäftsverkehrs wie Online-Shops, Buchungsportale oder andere Plattformen mit digitalem Vertragsabschluss.
Grundlage der Anforderungen bilden vier zentrale Prinzipien der digitalen Barrierefreiheit: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Sie helfen dabei, Anwendungen so zu gestalten, dass sie für möglichst viele Menschen nutzbar sind – unabhängig von individuellen Einschränkungen oder eingesetzten Hilfsmitteln.
Die folgende Checkliste orientiert sich an diesen Prinzipien und zeigt, wie Barrierefreiheit bereits während der Entwicklung berücksichtigt werden kann. Die Checkliste dient als vereinfachtes Selbst-Assessment für Entwickler:innen. Wird sie konsequent angewendet, lassen sich bereits rund 90 % der grundlegenden Anforderungen an Barrierefreiheit abdecken. Sie ist bewusst praxisnah gehalten und verzichtet auf Sonder- und Ausnahmeregelungen. Im Zweifelsfall oder bei komplexeren Fragestellungen empfiehlt es sich, frühzeitig Expert:innen hinzuzuziehen.
Eine vollständige Liste aller Anforderung findet sich auf unser separaten Zusammenstellung:
Die Checkliste für Entwickler:innen
Wahrnehmbarkeit
Besteht zu visuellen und auditiven Elementen eine Beschreibung?
Bilder, Icons, Audio oder Video müssen durch alt-Texte, Untertitel oder beschreibende Texte ergänzt werden.
Wird semantisches HTML (HTML-Tags) konsequent verwendet?
Verwende sinnvolle Strukturen wie label, table, input type, main, section, um Inhalt und Struktur klar zu kennzeichnen.
Ist auf ausreichende Farbkontraste geachtet?
Text: mind. 4.5:1 · Große Schrift: mind. 3:1 · interaktive Elemente: mind. 3:1
Werden Inhalte durch weitere visuelle Elemente differenzierbar?
Vermeide farblich allein differenzierte Infos. Ergänze Form, Text oder Symbole.
Tritt bei responsive Verhalten kein Informationsverlust auf?
Gestalte Layouts so, dass Text bei Verkleinerung des Viewports sinnvoll umbricht und vollständig lesbar bleibt.
Hast du versteckte Informationen die nur bei Hover sichtbar sind vermieden?
Stelle sicher, dass Informationen auch fokussierbar & dauerhaft sichtbar sind.
Bedienbarkeit
Enthält deine Seite keine automatisch blinkenden oder bewegten Inhalte?
Vermeide Animationen, Auto-Scrolling oder Flashes. Oder stelle eine Möglichkeit zum Anhalten bereit.
Sind alle Links auch ohne Kontext eindeutig verständlich?
Nutze klare, beschreibende Texte statt vager Begriffe wie „mehr erfahren“ oder „hier klicken“.
Haben alle anklickbaren Elemente eine Mindestgröße von 24x24 px?
Touch- und Mausbedienung müssen gleichermaßen zuverlässig funktionieren.
Gibt es mindestens zwei Möglichkeiten, um jede Unterseite zu erreichen?
Beispielsweise Navigation + Suchfunktion oder Sitemap.
Nutzt du HTML-Strukturelemente, damit Nutzer:innen Inhalte überspringen können?
<header>, <nav>, <main>, <footer>, <section>, <article> erleichtern das Überspringen mit Hilfsmitteln.
Ist deine Seite vollständig mit der Tastatur/Tab bedienbar?
Tab-Reihenfolge muss logisch sein, keine Tastaturfallen, Fokus muss sichtbar sein.
Verständlichkeit
Ist die Sprache der Seite über das lang-Attribut korrekt angegeben?
Wichtig für Screenreader & automatische Übersetzungen.Verhält sich die Seite konsistent und vorhersehbar?
Keine unerwarteten Navigationssprünge oder Aktionsverhalten. Nutze konsistente Icons & Begriffe.Werden Eingabefehler klar beschrieben und eingegrenzte Felder gekennzeichnet?
Kennzeichne Fehler deutlich, verwende Labels sinnvoll und biete Hinweise oder Autovervollständigung.
Robustheit
Nutzt du nur dann ARIA-Rollen, wenn HTML allein nicht ausreicht?
Bevorzuge native HTML-Tags. Wenn nötig, ergänze gezielt mit role, aria-label, aria-checked etc.Achte auf korrekte Rolle & Status von Custom-Komponenten.
Verwende role="alert", aria-live, name/role/value-Konventionen.
Wir vermitteln dich gerne auch mit einem unser Expert:innen zum Thema und helfen dir bei deinen Verständnisproblemen.
