0800 71 20000
Kontakt
...
Pflicht und erste Schritte

Barrierefreiheit: erst der Geltungsbereich, dann das Markup

Die Frage ist selten, ob eine Verbesserung sinnvoll ist, sondern welche Strecken unter das Gesetz fallen und in welcher Reihenfolge ein Team sie angeht.

Passende Kurse ansehen Persönlich beraten lassen
KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Seit 1997 am Markt Kleine Gruppen Präsenz und Live-Online Zertifizierte Trainer
Worum es geht

Der Geltungsbereich entscheidet über den Aufwand, nicht der gute Wille

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz. Viele Teams reagieren darauf, indem sie eine Liste aus dem Netz abarbeiten und bei Alternativtexten anfangen. Die Frage, ob und welche ihrer Strecken überhaupt unter das Gesetz fallen, bleibt dabei offen. Andere schließen aus dem Satz wir sind kein Shop, dass sie nicht betroffen sind, und übersehen, dass es nicht auf einen Warenkorb ankommt, sondern auf den Abschluss eines Verbrauchervertrags über die Seite.

Aus dieser Unklarheit entstehen zwei teure Muster. Im ersten wird an der Startseite gefeilt, während die Buchungs- oder Bezahlstrecke in einem Fremdsystem läuft, das niemand geprüft hat, und genau diese Strecke ist die, um die es geht. Im zweiten passiert gar nichts, und der Aufwand fällt später an, unter Zeitdruck und neben einer Beschwerde. Das Gesetz sieht eine behördliche Überwachung vor, das ist also kein rein theoretischer Fall.

Dazu kommt ein Missverständnis über den Zielzustand. Barrierefrei ist kein Schalter, den man umlegt. Die Richtlinien bestehen aus einzelnen Erfolgskriterien auf drei Stufen, und ein realistisches Ziel lautet Stufe AA für die betroffenen Strecken plus eine dokumentierte Reihenfolge für den Rest. Wer stattdessen vollständige Barrierefreiheit für den ganzen Auftritt ausruft, hat nach sechs Monaten weder das eine noch das andere.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Wer entscheidet was

Wer entscheidet was

Geltungsbereich klären: fällt der Auftritt unter das BFSG?

Wer entscheidet
Geschäftsführung, bei Zweifelsfällen mit anwaltlicher Prüfung
Wer setzt um
Marketing und Webentwicklung erstellen die Liste aller Strecken, über die Verbraucher einen Vertrag abschließen
Stolperfalle
Betrachtet wird nur der eigene Auftritt, während Anmeldung, Terminbuchung oder Bezahlung in einem Fremdsystem laufen. Genau diese Teile gehören zur Dienstleistung und werden am häufigsten übersehen.

Zielniveau und Nachweis festlegen

Wer entscheidet
Produktverantwortung gemeinsam mit der Geschäftsführung
Wer setzt um
Design und Entwicklung übersetzen die Stufe AA in verbindliche Vorgaben für Farben, Fokus, Mindestgrößen und Formulare
Stolperfalle
Stufe AAA wird als Ziel ausgerufen, weil sie besser klingt. Das W3C rät selbst davon ab, sie für ganze Auftritte zu verlangen, weil sie für manche Inhalte nicht erreichbar ist. Am Ende steht dann auch AA nicht.

Barrierefreiheit im Alltag halten

Wer entscheidet
Teamleitung, indem die Prüfungen Teil der Abnahme werden
Wer setzt um
Entwicklung prüft Tastatur und Kontrast vor dem Zusammenführen, Redaktion prüft Alternativtexte und Überschriften beim Anlegen
Stolperfalle
Das Thema hängt an einer Person, die es sich zu eigen gemacht hat. Fällt sie aus oder wechselt sie, läuft es innerhalb weniger Wochen wieder aus dem Blick, weil es nirgends festgeschrieben ist.

Fremdbausteine und Beschaffung

Wer entscheidet
Einkauf, aber nur mit einem Votum aus der Webentwicklung
Wer setzt um
Entwicklung prüft das eingebundene Element selbst mit der Tastatur, bevor es produktiv geht
Stolperfalle
Die Zusage des Anbieters wird als Nachweis genommen. Im Test fällt dann regelmäßig auf, dass sich das Einwilligungsfenster nicht mit der Tastatur schließen lässt und den Fokus hinter sich festhält.

Angaben zur Barrierefreiheit veröffentlichen, wie § 14 BFSG es verlangt

Wer entscheidet
Rechtsabteilung oder Geschäftsführung
Wer setzt um
Redaktion, mit Zuarbeit aus der Entwicklung zum tatsächlichen Stand
Stolperfalle
Ein Textbaustein aus dem Netz behauptet eine Konformität, die der Auftritt nicht hat. Verlangt ist eine Beschreibung, wie die Dienstleistung die Anforderungen erfüllt, und sie muss verfügbar bleiben, solange die Dienstleistung angeboten wird. Eine ehrliche Angabe mit bekannten Lücken und einem Zeitplan ist deshalb die deutlich bessere Grundlage.

Fünf Prüfungen, die ohne Fachgutachten funktionieren

  1. 01 Bedien die wichtigste Strecke einmal komplett mit der Tabulatortaste.
  2. 02 Prüfe, ob der Fokus überall sichtbar ist und nirgends hängen bleibt.
  3. 03 Miss die Kontraste von Text, Schaltflächen und Fokusrahmen.
  4. 04 Lies nur die Überschriften und schau, ob die Seite dabei Sinn ergibt.
  5. 05 Öffne jedes Formular und prüfe, ob jedes Feld eine verknüpfte Beschriftung hat.
  6. 06 Geh die Bilder durch und entscheide je Bild: Information oder Dekoration.
Was du mitnimmst

Was ihr ohne Fachgutachten selbst klären könnt

Der Einstieg besteht aus zwei getrennten Fragen: Welche Strecken fallen unter das Gesetz, und welche Mängel hat der Auftritt tatsächlich. Die erste beantwortet ihr mit einer Liste und im Zweifel mit einer rechtlichen Prüfung, die zweite mit einer Tastatur und einer halben Stunde. Beides lässt sich parallel starten, und beides braucht keine Beauftragung.

Den Geltungsbereich für den eigenen Auftritt bestimmen

Alle Strecken auflisten, über die Verbraucher einen Vertrag abschließen, samt der Teile, die in einem Fremdsystem laufen. Diese Liste ist die Grundlage für jede weitere Entscheidung und meist in einem Termin fertig.

Ein Zielniveau festlegen, das erreichbar ist

Stufe AA der WCAG 2.2 für die betroffenen Strecken. Damit habt ihr eine prüfbare Größe statt eines Wunsches, und ihr könnt begründen, warum bestimmte Kriterien zuerst kommen.

Fünf Prüfungen selbst durchführen

Tastaturbedienung, Kontraste, Überschriftenstruktur, Beschriftungen in Formularen, Alternativtexte. Diese fünf decken den größten Teil dessen ab, was im Alltag tatsächlich stört, und keine davon braucht ein Werkzeug mit Lizenz.

Automatische Prüfwerkzeuge richtig einordnen

Sie finden, was maschinell entscheidbar ist: fehlende Alternativattribute, zu geringe Kontraste, Felder ohne Beschriftung. Ob ein Alternativtext das Richtige sagt und ob die Fokusreihenfolge stimmt, entscheidet keins von ihnen.

Fremdbausteine in die Prüfung ziehen

Einwilligungsfenster, Buchungsmaske, Videoplayer und Kartendienst gehören zum Auftritt. Der häufigste Befund im Test ist ein Fenster, das den Fokus festhält und sich nicht mit der Tastatur schließen lässt.

Eine Reihenfolge für die ersten Wochen festlegen

Erst die betroffenen Strecken, dann die günstigen Korrekturen mit großer Reichweite, dann die Fremdbausteine. Ein vollständiges Gutachten über alle Seiten zu Beginn liefert ein Dokument, keine Änderung.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt

Wen die Vorgaben in Deutschland treffen

Das Barrierefreiheitsstärkungsgesetz setzt die europäische Richtlinie über Barrierefreiheitsanforderungen um und gilt seit dem 28. Juni 2025. Es erfasst bestimmte Produkte und bestimmte Dienstleistungen, darunter Dienstleistungen im elektronischen Geschäftsverkehr. Die Definition in § 2 Nummer 26 ist der entscheidende Satz für Websites: gemeint sind digitale Dienste, die über Webseiten und Anwendungen auf Mobilgeräten angeboten und elektronisch auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden. Ein Shop fällt darunter, eine Terminbuchung mit Vertragsschluss ebenso, eine reine Informationsseite ohne solche Strecke aus diesem Grund nicht.

Für Kleinstunternehmen gibt es eine Ausnahme, aber nur bei Dienstleistungen. § 3 Absatz 3 nimmt Kleinstunternehmen aus, die Dienstleistungen anbieten oder erbringen. Kleinstunternehmen ist nach § 2 Nummer 17 ein Unternehmen mit weniger als zehn Beschäftigten, das entweder höchstens 2 Millionen Euro Jahresumsatz erzielt oder dessen Jahresbilanzsumme höchstens 2 Millionen Euro beträgt. Für Produkte gilt diese Ausnahme nicht.

Zwei Abgrenzungen ersparen viel Diskussion. Öffentliche Stellen richten sich nicht nach diesem Gesetz, sondern nach dem Behindertengleichstellungsgesetz mit der Barrierefreie-Informationstechnik-Verordnung des Bundes beziehungsweise nach den entsprechenden Landesregelungen. Und die Übergangsbestimmungen in § 38 sind kein allgemeiner Aufschub für Websites: Sie erlauben, Dienstleistungen bis zum 27. Juni 2030 weiter unter Einsatz von Produkten zu erbringen, die vor dem 28. Juni 2025 rechtmäßig eingesetzt wurden, und regeln Verträge, die vor diesem Datum geschlossen wurden. Was im Einzelfall gilt, klärt eine rechtliche Prüfung, diese Seite ersetzt sie nicht.

Was die Stufe AA praktisch verlangt

Die Web Content Accessibility Guidelines liegen als Version 2.2 vor, seit dem 5. Oktober 2023 als Empfehlung des W3C und seit dem 12. Dezember 2024 in einer überarbeiteten Fassung. Sie sind nach vier Grundsätzen geordnet: wahrnehmbar, bedienbar, verständlich und robust. Jedes Erfolgskriterium hat eine Stufe, A, AA oder AAA. AA ist die übliche Bezugsgröße, und das W3C rät ausdrücklich davon ab, AAA als allgemeine Anforderung für ganze Auftritte zu verlangen, weil sich nicht jedes Kriterium auf jeden Inhalt anwenden lässt.

Konkret entscheiden auf Stufe AA vor allem diese Punkte: ein Kontrastverhältnis von 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text, 3 zu 1 auch für Bedienelemente und bedeutungstragende Grafiken, die Nutzbarkeit der Inhalte bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen, ein sichtbarer Fokus, der nicht von einer klebenden Kopfzeile verdeckt wird, Bedienelemente mit einer Mindestgröße von 24 mal 24 CSS-Pixeln und Anmeldevorgänge, die keinen kognitiven Test erzwingen, etwa weil das Einfügen aus einem Passwortspeicher unterbunden wird.

Nicht als eigenes Kriterium formuliert, aber praktisch der größte Hebel: gewöhnliches HTML. Ein button ist von sich aus fokussierbar, meldet seine Rolle an unterstützende Technik und reagiert auf Eingabe- und Leertaste. Ein div mit einem Klickhandler tut nichts davon, und jedes ARIA-Attribut, das anschließend darauf geschraubt wird, baut nur nach, was der Browser bereits mitgebracht hätte. Die kürzeste Regel dazu steht im ARIA Authoring Practices Guide des W3C: kein ARIA ist besser als schlechtes ARIA.

Fünf Prüfungen, die ein Team ohne Gutachten schafft

Die erste und mit Abstand ergiebigste ist die Tastatur. Leg die Maus weg und geh die wichtigste Strecke mit Tabulator, Umschalt-Tabulator, Eingabe- und Leertaste durch. Fünf Fragen dabei: Ist der Fokus an jeder Station sichtbar, entspricht die Reihenfolge der Lesereihenfolge, ist jedes Bedienelement erreichbar und auslösbar, kommst du aus jedem Dialog wieder heraus, und gibt es einen Sprunglink zum Inhalt. Diese eine Prüfung findet mehr als jedes automatische Werkzeug.

Die zweite und dritte betreffen Kontrast und Struktur. Der Farbwähler in den Entwicklerwerkzeugen zeigt das Kontrastverhältnis direkt an, geprüft werden Fließtext, Schaltflächen, Platzhaltertexte, der Fokusrahmen und Symbole, die eine Bedeutung tragen. Für die Struktur liest du nur die Überschriften, entweder mit einer Erweiterung oder direkt in der Konsole über eine Abfrage aller Überschriftenelemente: eine h1 je Seite, keine übersprungene Ebene, und keine Überschrift, die nur wegen ihrer Größe eine ist.

Die vierte und fünfte betreffen Formulare und Bilder. Jedes Feld braucht eine label-Beschriftung, die über for und id mit ihm verbunden ist; ein Platzhalter ist keine Beschriftung, weil er beim Tippen verschwindet. Fehlermeldungen gehören mit dem Feld verknüpft und dürfen nicht allein über die Farbe Rot funktionieren, Pflichtfelder werden im Text gekennzeichnet. Bei Bildern entscheidest du je Bild: Trägt es Information, bekommt es einen Alternativtext, der diese Information wiedergibt; ist es Dekoration, bekommt es ein leeres alt-Attribut. Steckt das Bild in einem Link, beschreibt der Text das Ziel des Links und nicht das Motiv.

Automatische Prüfwerkzeuge und was sie nicht sehen

Werkzeuge wie axe, die Prüfung in Lighthouse oder WAVE finden zuverlässig, was sich maschinell entscheiden lässt: ein fehlendes alt-Attribut, ein Kontrastverhältnis unter der Schwelle, ein Formularfeld ohne verbundene Beschriftung, ein ARIA-Attribut an einem Element, an dem es nicht erlaubt ist. Diese Prüfungen kosten Minuten und gehören in die Pipeline, weil sie Rückschritte verhindern.

Was sie nicht entscheiden können, ist der interessantere Teil: ob ein Alternativtext das Richtige sagt, ob die Fokusreihenfolge zur sichtbaren Anordnung passt, ob eine Fehlermeldung verständlich ist, ob eine selbst gebaute Auswahlliste sich wie eine Auswahlliste verhält, und ob der sichtbare Name einer Schaltfläche mit ihrem zugänglichen Namen übereinstimmt. Für diesen Teil braucht es eine Tastatur und einen Menschen, und einmal im Projekt jemanden, der einen Screenreader tatsächlich benutzt.

Ein Wort zu Widgets, die Barrierefreiheit über eine eingebundene Skriptzeile versprechen: Sie ändern nichts an Überschriftenstruktur, Beschriftungen und Fokusreihenfolge im Markup, sondern legen eine zusätzliche Schicht darüber. Für die Strecke, um die es rechtlich geht, also den Vertragsabschluss, helfen sie in der Regel nicht, weil dort die Reihenfolge und die Beschriftungen der Felder entscheiden.

Eine Reihenfolge für die ersten Wochen

In der ersten Woche entsteht die Liste: alle Strecken, über die Verbraucher einen Vertrag abschließen, einschließlich der Teile in Fremdsystemen, mit einer verantwortlichen Person je Strecke. In der zweiten Woche geht ihr genau diese Strecken mit der Tastatur durch und schreibt jeden Stopp als Aufgabe auf, mit dem Schritt, an dem er auftritt. Diese beiden Wochen ersetzen die Diskussion darüber, wo man anfangen soll.

In der dritten Woche kommen Kontraste und Formulare an die Reihe, weil beides günstig zu korrigieren ist und auf jeder Seite wirkt. Kontrastwerte landen als Token im Designsystem, damit sie nicht bei der nächsten Komponente wieder verhandelt werden. In der vierten Woche die Fremdbausteine, jeweils mit der Antwort des Anbieters und eurem eigenen Test daneben. Danach wandern die Prüfungen in die Abnahmeliste, sodass neue Komponenten sie durchlaufen, bevor sie zusammengeführt werden.

Was ihr nicht zuerst tut, ist ein vollständiges Gutachten über alle Seiten. Es liefert ein Dokument statt einer Änderung, es ist mit dem nächsten Release teilweise überholt, und es bindet genau das Budget, das die ersten Korrekturen gekostet hätten. Ein Gutachten ist sinnvoll, wenn die eigenen Prüfungen abgearbeitet sind und ihr wissen wollt, was ihr übersehen habt.

Dazu passende Kurse

Wenn ihr systematisch klären wollt, wen die Vorgaben zur Barrierefreiheit treffen und was daraus für Aufbau und Navigation folgt, gehört das in die Kurse zur Webkonzeption bei cmt.

Der größte Teil der Kriterien entscheidet sich im Markup, deshalb lohnt es sich, Markup und Gestaltung von Grund auf aufbauen .

Wissen prüfen

Wie sicher bist du beim Thema wirklich?

Lesen fühlt sich schnell nach Können an. Ein kurzer Test zeigt dir, was davon schon sitzt und wo sich ein Kurs lohnt. Kostenlos, ohne Anmeldung, mit einer Erklärung zu jeder Antwort.

Wissenstest HTML5 Grundlagen QuizTeste dein Wissen zu HTML5-Basics: Dokumentstruktur, semantische Tags, Links, Bilder, Formulare und mehr. Quiz starten Wissenstest HTML5 Fortgeschritten QuizTeste dein Wissen zu Canvas, Web Storage, ARIA, Web Components, responsive Images und mehr. Quiz starten
Konkrete Kurse

Wo du genau das übst

Ein sehr gutes, praxisorientiertes und nachhaltiges Seminar. So sollte es immer sein. Vielen Dank.
LimeSurvey - Anwendertraining Teil 1 (Grundlagen)
Die Schulung ist gerade für Einsteiger oder Entwickler*innen mit eingestaubtem Basiswissen sehr hilfreich.
Vue.js 3 Grundkurs
Ich bin sehr glücklich Franz als Trainer gehabt zu haben. Er hat offensichtlich unglaublich viel Wissen zu den Themen, und schafft es, dieses auch interaktiv und verständlich weiterzugeben.
React Komplettausbildung

Häufige Fragen

Muss eine reine Informationsseite ohne Shop barrierefrei sein?
Das BFSG greift bei Dienstleistungen im elektronischen Geschäftsverkehr, also wenn Verbraucher über die Seite einen Vertrag abschließen, so die Definition in § 2 Nummer 26. Eine Seite ohne eine solche Strecke fällt aus diesem Grund nicht darunter. Ob im Einzelfall etwas anderes gilt, etwa weil ihr für eine öffentliche Stelle arbeitet oder eine der übrigen im Gesetz genannten Dienstleistungen erbringt, klärt eine rechtliche Prüfung. Unabhängig davon gelten die Richtlinien fachlich weiter, und die Korrekturen sind dieselben.
Gilt die Ausnahme für Kleinstunternehmen auch für unseren Shop?
Die Ausnahme in § 3 Absatz 3 BFSG gilt für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen. Kleinstunternehmen ist nach § 2 Nummer 17 ein Unternehmen mit weniger als zehn Beschäftigten, das entweder höchstens 2 Millionen Euro Jahresumsatz erzielt oder dessen Jahresbilanzsumme höchstens 2 Millionen Euro beträgt. Beide Bedingungen müssen zusammenkommen, die zehn Beschäftigten allein reichen nicht. Für Produkte greift die Ausnahme ohnehin nicht.
Reicht die Stufe A?
Wer ein Niveau festlegt, nimmt AA. Stufe A allein lässt genau die Kriterien aus, die im Alltag am meisten ausmachen: die Kontrastwerte, die Nutzbarkeit bei 320 CSS-Pixeln Breite und den sichtbaren Fokus. Eine Seite, die nur A erfüllt, kann für Menschen mit eingeschränktem Sehvermögen praktisch unbenutzbar sein, obwohl sie formal eine Stufe erfüllt.
Was ist mit PDFs und Videos?
Ein PDF, das Teil der Dienstleistung ist, etwa Vertragsbedingungen oder eine Rechnung, gehört zum Umfang und braucht eine getaggte Struktur, echten Text statt eines Scans und eine sinnvolle Lesereihenfolge. Bei Videos verlangt schon Stufe A Untertitel für aufgezeichnete Inhalte, auf Stufe AA kommt eine Audiodeskription für aufgezeichnete Videos dazu. Ein automatisch erzeugtes Transkript ohne Korrektur erfüllt das Kriterium nicht, weil Fachbegriffe und Namen zuverlässig falsch erkannt werden.

Quellen

Passt thematisch dazu

Zum Geltungsbereich gehören auch die PDF-Dateien, die Teil der Dienstleistung sind, und für Alternativtexte und Struktur in Word und PDF lässt sich ein Teil der Arbeit an ein Sprachmodell abgeben, solange die Entscheidung über jedes Bild bei dir bleibt.

Persönlich für dich da

Deine Ansprechpartner

Du bist dir nicht sicher, welcher Kurs oder welches Level zu dir passt? Wir beraten dich persönlich und kostenlos.

Yves Hoppe

Yves Hoppe

Weiterbildung & Beratung

Hilft dir, aus dem Webentwicklung-Programm den passenden Kurs für deinen Stand zu finden.

0800 71 20000 E-Mail
Norbert Jansen

Norbert Jansen

Beratung & Inhouse

Plant mit dir Inhouse-Trainings, die auf eure Abläufe und euren Datenbestand zugeschnitten sind.

0800 71 20000 E-Mail

Ein Auftritt, den auch ohne Maus jeder bedienen kann

In den Kursen zu Webkonzeption, HTML und CSS bei cmt baust du Navigation, Formulare und Fokusführung so auf, dass die spätere Prüfung wenig zu beanstanden findet.

Alle Kurse und Termine Frage stellen

Passt dazu

Alle Themen zu Webentwicklung