Barrierefreiheit und BFSG

Barrierefreiheit und BFSG

0:00 Über Barrierefreiheit wurde jahrelang als Haltungsfrage gesprochen: Man sollte, es wäre schön, es gehört sich. Diese Zeit ist vorbei. Seit dem 28. Juni 2025 ist Barrierefreiheit für viele Onlineshops schlicht geltendes Recht. In diesem Modul klären wir deshalb zuerst den Rahmen — welches Gesetz, welcher Maßstab, welche Ausnahmen.

0:22 Danach wird es praktisch: Tastaturbedienung, Struktur, Kontraste, Kaufstrecke. Und am Ende steht kein Gefühl, sondern ein priorisierter Backlog, mit dem eine Organisation tatsächlich arbeiten kann.

Barrierefreiheit und BFSG

0:36 Vier Kapitel. Zuerst der Rechtsrahmen und der Prüfmaßstab, also BFSG und WCAG 2.2 — mit den neun Kriterien, die in 2.2 neu dazugekommen sind. Dann die Bedienbarkeit: alles, was ohne Maus funktionieren muss. Danach Darstellung und Kaufstrecke, inklusive der Kontrastwerte, die Shopify für Themes selbst vorgibt. Und zum Schluss das Prüfen: Was ein Werkzeug findet, was nur ein Mensch findet, und wie aus einem Befund ein bearbeitbarer Eintrag wird.

1:04 In der Übung prüfen Sie vier Seiten von Steglicht.

Rechtsrahmen und Prüfmaßstab

1:08 Beginnen wir mit dem Rahmen. Ein Gesetz, eine Richtlinie, vier Prinzipien — und eine Frage, die Sie nicht im Projektteam beantworten können. Das Barrierefreiheitsstärkungsgesetz erfasst nach Paragraf 1 Absatz 3 auch Dienstleistungen im elektronischen Geschäftsverkehr. Definiert ist das als digitale Dienste über Webseiten und mobile Anwendungen, die auf individuelle Anfrage zum Abschluss eines Verbrauchervertrags erbracht werden.

1:35 Übersetzt: ein Onlineshop für Verbraucher. In Kraft ist das Gesetz seit dem 28. Juni 2025 — es ist also keine kommende Regelung, sondern seit über einem Jahr geltendes Recht. Wer bisher gewartet hat, wartet nicht mehr auf etwas Zukünftiges. Vier Folgerungen, und die zweite ist die, nach der immer gefragt wird. Ein Onlineshop für Verbraucher fällt regelmäßig unter die Dienstleistungen des Gesetzes.

2:00 Für Kleinstunternehmen, die Dienstleistungen erbringen, gilt die Pflicht nach Paragraf 3 Absatz 3 nicht — diese Ausnahme existiert also tatsächlich. Aber, und das ist wichtig: Ob sie greift, ist eine Rechtsfrage für das konkrete Unternehmen und keine, die im Projektteam entschieden wird. Der fachliche Maßstab der Umsetzung sind in jedem Fall die WCAG.

2:22 Diese vier Prinzipien sind das Gerüst, an dem alle Einzelkriterien hängen — und sie sind erstaunlich gut zu merken. Wahrnehmbar: Inhalte müssen sichtbar oder hörbar ankommen. Bedienbar: Alles muss ohne Maus erreichbar sein. Verständlich: Sprache und Verhalten bleiben vorhersagbar. Robust: Technik und Hilfsmittel müssen es auswerten können.

2:42 Wenn Sie vor einer Seite stehen und nicht wissen, wo Sie anfangen sollen, gehen Sie diese vier durch. Sie decken in dieser Reihenfolge die meisten praktischen Probleme ab — und das vierte erklärt, warum sauberes HTML kein Selbstzweck ist. WCAG 2.2 hat neun Erfolgskriterien ergänzt, und die rechte Spalte zeigt, warum sie ausgerechnet für Shops relevant sind.

3:05 Focus Not Obscured trifft jeden Shop mit klebendem Kopfbereich — der Fokus wandert hinter die Leiste und ist weg. Dragging Movements betrifft Schieberegler im Preisfilter. Target Size die kleinen Mengen- und Variantenschalter. Consistent Help verlangt, dass Hilfe und Kontakt an gleicher Stelle stehen. Redundant Entry heißt: die Adresse nicht zweimal eingeben lassen.

3:28 Und Accessible Authentication: eine Anmeldung ohne Gedächtnistest — was übrigens genau die passwortlose Anmeldung aus Modul sechs begünstigt. Entfallen ist das Kriterium 4.1.1 Parsing. Der erste Punkt ist der mit den größten Folgen: Die Frage nach der Ausnahme wird im Projekt entschieden statt rechtlich geprüft. Das ist verständlich — der Termin drängt — aber es ist die falsche Stelle.

3:51 Der zweite ist ein Denkfehler, dem wir gleich ein ganzes Kapitel widmen: gegen ein Prüfwerkzeug testen statt gegen die Erfolgskriterien. Der dritte ist der häufigste Umfangsfehler: Der Shop wird geprüft, die Kaufstrecke bis zur Bestätigung aber nicht. Und der vierte: Barrierefreiheit gilt als Theme-Thema, dabei stecken die meisten Befunde in den Inhalten.

Bedienbarkeit und Struktur

4:12 Jetzt wird es praktisch. Und zwar mit einem Test, den Sie in fünf Minuten selbst machen können — ohne Werkzeug, ohne Schulung. Bedienbarkeit heißt: Jede Funktion ist ohne Maus erreichbar, und der Fokus bleibt sichtbar. Shopify verlangt in seinen Theme-Vorgaben ausdrücklich einen sichtbaren, konsistenten Fokusindikator und eine Fokusreihenfolge, die der Reihenfolge im Markup entspricht — also von oben nach unten und von links nach rechts.

4:38 Das ist der Grund, warum die Tastaturprüfung so aussagekräftig ist: Sie prüft nicht nur die Bedienbarkeit mit der Tastatur, sondern nebenbei auch, ob die Struktur der Seite überhaupt der sichtbaren Anordnung entspricht. Vier Anforderungen, die konkreter sind als die meisten Barrierefreiheits-Diskussionen. Überschriften tragen Überschriften-Markup und stehen in Reihenfolge — kein Sprung von h2 auf h4, weil die Schriftgröße besser passt.

5:05 Ein h1 benennt das Hauptthema der Seite, also genau eines. Jedes Bildelement hat ein alt-Attribut, und dekorative Bilder bekommen ein leeres — das leere Attribut ist eine Aussage, kein Versäumnis. Und jedes Formularfeld hat ein Label, Pflichtfelder das Attribut required. Diese vier Punkte sind prüfbar, und sie decken einen großen Teil der üblichen Befunde ab.

5:28 Fünf Schritte, und Sie brauchen dafür nichts als die Tab-Taste. Gehen Sie von oben nach unten und lesen Sie mit, wo der Fokus steht. Prüfen Sie, ob die Reihenfolge der sichtbaren Anordnung entspricht — überraschend oft springt sie. Lösen Sie jede Funktion aus: Menü, Filter, Variantenwahl, Warenkorb. Kontrollieren Sie, ob der Fokus in Dialogen bleibt und wieder herausfindet; das ist die häufigste Falle bei Filterdialogen.

5:54 Und notieren Sie jeden Punkt, an dem die Tastatur nicht weiterkommt. Ein Fokus, der hinter dem klebenden Kopfbereich verschwindet, ist übrigens ein Befund nach 2.4.11. Der erste Punkt ist der Klassiker aus der Gestaltung: Der Fokusrahmen wird entfernt, weil er als störend empfunden wird. Damit ist die Seite für Tastaturnutzung praktisch unbrauchbar — man sieht nicht mehr, wo man ist.

6:18 Der zweite ist technisch: Der Filterdialog fängt den Fokus, lässt ihn aber nicht wieder heraus; wer dort landet, kommt nur mit Neuladen weg. Der dritte ist Alltagsschlamperei: Alternativtexte beschreiben den Dateinamen statt das Produkt. Und der vierte ist der, der die Struktur zerlegt: Überschriftenebenen werden nach Schriftgröße gewählt.

Darstellung und Kaufstrecke

6:39 Weiter mit dem, was sich messen lässt — und mit der Strecke, an der jeder Fehler unmittelbar Geld kostet. Kontrast, Zoom und die Ausgabe auf kleinen Geräten entscheiden, ob Inhalte überhaupt ankommen. Das Schöne am Kontrast: Er ist messbar. Shopify nennt für Themes konkrete Werte — Text unter vierundzwanzig Pixel beziehungsweise achtzehneinhalb Pixel in fett braucht ein Verhältnis von viereinhalb zu eins gegen den Hintergrund, größerer Text drei zu eins, Symbole und Eingaberahmen ebenfalls drei zu eins.

7:09 Diese Zahlen beenden die Diskussion darüber, ob ein Grau noch geht. Man misst es, und dann weiß man es. Drei Zeilen, die Sie sich merken können. Kleiner Text braucht viereinhalb zu eins, größerer drei zu eins, Symbole und Rahmen von Eingabefeldern ebenfalls drei zu eins. Der wichtige Hinweis steht in der Fußzeile: Gemessen wird gegen den tatsächlichen Hintergrund, nicht gegen die Themefarbe im Datenblatt.

7:33 Das klingt nach Haarspalterei, ist aber der häufigste Messfehler — ein Text über einem Bild oder über einem Farbverlauf hat je nach Stelle völlig unterschiedliche Werte. Prüfen Sie dann die ungünstigste Stelle, nicht die schönste. Ein unbedienbarer Warenkorb macht den ganzen Shop wertlos — das ist die nüchterne Zusammenfassung.

7:52 Alles davor können Sie perfekt gestalten; wenn der letzte Schritt nicht geht, war es umsonst. Fehlermeldungen im Checkout müssen Ursache und Abhilfe nennen, nicht nur rot leuchten. Medien dürfen nicht automatisch starten, und Slideshows brauchen eine Pause-Möglichkeit. Und ein Kriterium aus WCAG 2.2, das hier besonders passt: Nach 3.3.7 sollen bereits erfasste Angaben nicht erneut eingegeben werden.

8:17 Wer die Lieferadresse noch einmal tippen lässt, verstößt nicht nur gegen ein Kriterium, sondern auch gegen den gesunden Menschenverstand. Der erste Punkt ist der häufigste Kontrastfehler überhaupt: Graue Hinweistexte unterschreiten den Wert und gelten im Team als dezent. Dezent und unlesbar liegen nah beieinander. Der zweite ist ein Strukturfehler: Der Fehlerhinweis ist farblich markiert, aber ohne Text — wer die Farbe nicht wahrnimmt, sieht gar nichts.

8:44 Der dritte tritt regelmäßig beim Testen auf: Bei zweihundert Prozent Zoom verschwindet der Weiterknopf. Und der vierte ist der Umfangsfehler, den wir schon hatten: Die Kaufstrecke wird nur bis zum Warenkorb geprüft, nicht bis zur Bestätigung.

Prüfen und verantworten

8:59 Zum Abschluss die Frage, die über den praktischen Wert jeder Prüfung entscheidet: Was wird daraus? Automatisierte Prüfungen finden maschinell entscheidbare Verstöße: fehlende Alternativtexte, zu geringe Kontraste, fehlende Labels. Das ist wertvoll, weil es schnell und wiederholbar ist. Alles Übrige zeigt sich erst im Gebrauch — ob die Reihenfolge sinnvoll ist, ob die Sprache verständlich, ob eine Fehlermeldung brauchbar.

9:25 Ein Werkzeug kann Ihnen sagen, dass ein Alternativtext existiert. Ob er die richtige Information enthält, kann es nicht beurteilen. Deshalb sind beide Wege nötig, und keiner ersetzt den anderen. Diese Gegenüberstellung hilft bei der Planung. Links das Automatisierte: schnell, wiederholbar, findet fehlende Attribute, misst Kontrastwerte — und läuft sinnvollerweise bei jedem Release mit.

9:49 Rechts das Manuelle: aufwendig, aber aussagekräftig; es findet unbrauchbare Reihenfolgen und beurteilt Verständlichkeit, und es läuft vor jedem größeren Umbau. Die praktische Konsequenz ist eine Taktung: Das eine automatisieren Sie und vergessen es. Das andere planen Sie als Termin ein. Wer beides gleich behandelt, macht entweder zu viel oder zu wenig.

10:11 Hier entscheidet sich, ob eine Prüfung Wirkung hat. Benennen Sie das verletzte Erfolgskriterium, nicht nur den Eindruck — sonst ist der Befund später nicht wiederauffindbar und nicht überprüfbar. Halten Sie die betroffene Seite und den Schritt fest. Schätzen Sie die Auswirkung ein: blockiert oder erschwert; das ist der Unterschied zwischen unmöglich und unangenehm.

10:32 Bestimmen Sie eine verantwortliche Rolle und den Ort der Behebung — Theme, Inhalt oder App. Und prüfen Sie nach der Behebung erneut. Ohne diesen fünften Schritt sammeln Sie Befunde statt sie zu erledigen. Der erste Punkt ist der, der Berichte unbrauchbar macht: Der Prüfbericht listet Werkzeugausgaben statt Befunde mit Kriterium. Zweihundert Zeilen Werkzeugausgabe sind kein Backlog.

10:55 Der zweite ist eine Art Selbstschutz, der nach hinten losgeht: Alles wird als kritisch eingestuft, und damit fehlt jede Reihenfolge. Der dritte ist eine Zuordnungsfrage: Die Behebung landet beim Theme, obwohl die Ursache im Inhalt liegt — ein fehlender Alternativtext ist kein Theme-Problem. Und der vierte ist der unangenehmste: Die Barrierefreiheitserklärung entsteht, bevor irgendetwas behoben ist.

Übung

11:19 Jetzt prüfen Sie selbst. Vier Seiten, vier Prüfmethoden — und am Ende ein Backlog, mit dem man arbeiten kann. Geprüft werden bei Steglicht vier Seiten: die Startseite, eine Kollektionsseite mit Filter, eine Produktseite mit Variantenauswahl und der Warenkorb. Das Theme ist ein Standard-Theme mit Anpassungen an Farben und Kopfbereich — und genau diese beiden Anpassungen sind erfahrungsgemäß die ergiebigsten Fundstellen.

11:45 Geänderte Farben schlagen auf Kontraste durch, ein angepasster Kopfbereich auf den Fokus. Sie prüfen also nicht irgendeinen Shop, sondern eine sehr typische Konstellation. Das Lernziel: Barrieren an konkreten Erfolgskriterien festmachen und nach Auswirkung priorisieren statt nach Aufwand. Die Versuchung, nach Aufwand zu sortieren, ist groß — dann macht man zuerst das Einfache und lässt das Wichtige liegen.

12:09 Erfolgreich sind Sie mit mindestens acht Befunden, jeder mit Erfolgskriterium, betroffener Seite, Auswirkung und verantwortlicher Rolle. Mindestens zwei davon sollen aus der Tastaturprüfung stammen — das ist die Methode, die am wenigsten gemacht und am meisten findet. Und wer früh fertig ist, prüft zusätzlich mit zweihundert Prozent Zoom.

12:29 Beginnen Sie mit der Tastaturprüfung über alle vier Seiten, und notieren Sie jedes Hindernis sofort. Messen Sie danach die Kontraste der kritischen Textstellen — messen, nicht schätzen; dafür gibt es Werkzeuge im Browser. Sehen Sie die Überschriftenstruktur und die Alternativtexte durch. Prüfen Sie das Filterformular gezielt mit Fehlermeldungen, indem Sie absichtlich etwas falsch machen.

12:52 Und tragen Sie die Befunde ein, priorisieren Sie und benennen Sie Verantwortliche. Der letzte Schritt ist der, der aus einer Übung einen Arbeitsauftrag macht. Der erste Punkt ist der, der gleich passieren wird: Geprüft wird mit dem Werkzeug, die Tastaturprüfung entfällt aus Zeitgründen — dabei ist sie die ergiebigere. Der zweite macht Befunde wertlos: Sie werden ohne Kriterium notiert und später nicht wiedergefunden.

13:16 Der dritte ist ein Abgrenzungsfehler mit Folgen: Der Warenkorb fällt raus, weil er technisch zum Checkout gehört — genau dort aber entscheidet sich der Kauf. Und der vierte ist die Falle mit der Priorisierung: Sie folgt der Behebbarkeit statt der Auswirkung. Das fühlt sich produktiv an und hilft den Betroffenen nicht.