Barrierefreiheit
Digitale Barrierefreiheit lässt sich auf drei Ebenen betrachten, die häufig durcheinandergeworfen werden: was Gesetze wie das BFSG konkret vorschreiben, was technische Standards wie die WCAG als Referenz definieren, und was sich davon in Code, Design und Inhalten tatsächlich umsetzen lässt. Alle drei Ebenen hängen zusammen, sind aber nicht deckungsgleich - ein Standard ist kein Gesetzestext, und WCAG-Konformität ist kein automatischer Nachweis von BFSG-Konformität.
Empfohlener Einstieg
- BarrierefreiheitDer Ausgangspunkt: was digitale Barrierefreiheit überhaupt bedeutet.
- BFSGDie deutsche gesetzliche Grundlage seit Juni 2025.
- WCAGDer technische Referenzrahmen, auf den sich Gesetze wie das BFSG stützen.
- TastaturnavigationEine der am häufigsten übersehenen Grundanforderungen in der Praxis.
- AlternativtextEine zweite, ebenso grundlegende praktische Anforderung.
Recht
BFSG
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Anbieter bestimmter Produkte und Dienstleistungen für Verbraucher - darunter viele Online-Shops - dazu, diese barrierefrei zugänglich zu machen.
BITV 2.0
Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) verpflichtet Behörden und andere öffentliche Stellen des Bundes in Deutschland dazu, ihre Websites, Apps und Intranets barrierefrei zu gestalten.
European Accessibility Act
Der European Accessibility Act (EAA) ist eine EU-Richtlinie, die europaweit einheitliche Mindestanforderungen an die Barrierefreiheit bestimmter Produkte und Dienstleistungen festlegt und von den Mitgliedstaaten national umgesetzt werden musste.
Barrierefreiheitserklärung
Eine Barrierefreiheitserklärung ist die von Gesetzen wie BFSG oder BITV 2.0 verlangte Information darüber, wie eine Website oder App die geltenden Barrierefreiheitsanforderungen erfüllt, mit welchen Einschränkungen und über welchen Weg sich Nutzer bei Problemen melden können.
Standards
Praktische Umsetzung
Tastaturnavigation
Tastaturnavigation bezeichnet die Möglichkeit, eine Website oder Anwendung vollständig ohne Maus zu bedienen, üblicherweise über die Tab-Taste, Umschalt+Tab, Enter, die Leertaste und die Pfeiltasten.
Fokus
Der Fokus markiert das Element, das gerade per Tastatur bedient werden kann - erkennbar an einem visuellen Indikator wie einem Rahmen -, und muss bei jeder Interaktion sichtbar und in einer logischen Reihenfolge nachvollziehbar bleiben.
Tastaturfalle
Eine Tastaturfalle (Keyboard Trap) liegt vor, wenn der Fokus per Tastatur zwar in ein Element hinein, aber nicht mehr regulär hinaus bewegt werden kann - der Nutzer bleibt in diesem Element gefangen.
Modale Dialoge
Ein modaler Dialog blendet ein Fenster über dem restlichen Seiteninhalt ein, blockiert dessen Bedienung, bis der Dialog geschlossen wird, und muss dafür den Tastaturfokus aktiv verwalten - beim Öffnen hinein, beim Schließen zurück zum auslösenden Element.
Farbkontrast
Farbkontrast bezeichnet den messbaren Helligkeitsunterschied zwischen Text- und Hintergrundfarbe; die WCAG legen dafür Mindestkontrastverhältnisse fest, damit Text auch für Menschen mit eingeschränktem Sehvermögen lesbar bleibt.
Alternativtext
Ein Alternativtext ist eine im alt-Attribut eines Bildes hinterlegte Textbeschreibung, die Screenreadern und anderen assistiven Technologien mitteilt, welche Information oder Funktion das Bild trägt, wenn es nicht visuell wahrgenommen werden kann.
ARIA
ARIA (Accessible Rich Internet Applications) ist eine Sammlung von HTML-Attributen, die assistiven Technologien zusätzliche semantische Informationen über Rolle, Zustand und Eigenschaften von Elementen liefern, wenn natives HTML dafür nicht ausreicht.
aria-label
Das Attribut aria-label überschreibt den zugänglichen Namen eines Elements für assistive Technologien mit einem beliebigen Text, der nirgends sichtbar im Dokument steht.
Semantisches HTML
Semantisches HTML bezeichnet die Verwendung von HTML-Elementen entsprechend ihrer inhaltlichen Bedeutung - etwa button, nav oder h1 - statt bedeutungsloser div- und span-Container, damit Struktur und Funktion einer Seite auch für Browser und assistive Technologien erkennbar sind.
Überschriftenstruktur
Eine korrekte Überschriftenstruktur ordnet Inhalte einer Seite hierarchisch über die HTML-Elemente h1 bis h6 an, ohne Ebenen zu überspringen, und erlaubt es Screenreader-Nutzern, sich per Überschriften-Navigation einen Überblick über die Seite zu verschaffen.
Barrierefreie Formulare
Ein barrierefreies Formular verknüpft jedes Feld eindeutig mit einer sichtbaren Beschriftung, ist vollständig per Tastatur bedienbar und teilt Fehler so mit, dass sie auch ohne visuelle Wahrnehmung auffindbar und verständlich sind.
Screenreader
Ein Screenreader ist eine assistive Software, die Bildschirminhalte als synthetische Sprache oder über eine Braillezeile ausgibt, damit blinde oder stark sehbeeinträchtigte Nutzer Websites und Anwendungen bedienen können.
Weitere Begriffe
Vertiefende Artikel
BFSG vs. BITV 2.0 - Unterschiede einfach erklärt
Wer unter das BFSG fällt, wer unter die BITV 2.0, und warum eine BITV-Barrierefreiheitserklärung keine gültige Vorlage für ein BFSG-Unternehmen ist.
Website auf Barrierefreiheit testen
Welche Ebenen ein belastbarer Barrierefreiheits-Test kombinieren muss - von automatischen Tools über die Tastatur- und Screenreader-Prüfung bis zur manuellen Inhaltsbewertung - und warum ein perfekter Lighthouse-Score kein Nachweis für Barrierefreiheit ist.
Website nach BFSG barrierefrei gestalten
Welche Websites unter das Barrierefreiheitsstärkungsgesetz fallen, was "barrierefrei" dabei konkret bedeutet, und wie sich ein Angebot in der Praxis darauf prüfen lässt.