Die meisten Texte zu barrierefreien Websites erklären die Rechtslage. Das ist nachvollziehbar — es ist der Teil, der Aufmerksamkeit erzeugt — hilft aber niemandem, der wissen will, was am Montag im Code passiert. Dieser Text macht das Gegenteil: keine Paragrafen, sondern die Änderungsliste, in der Reihenfolge, in der wir sie in Projekten abarbeiten.
Zur Einordnung nur so viel: Maßstab ist die EN 301 549, die im Kern auf die WCAG 2.1, Konformitätsstufe AA verweist. Ob und ab wann Ihr Unternehmen verpflichtet ist, ist eine juristische Frage — dieser Text ist Technik, keine Rechtsberatung.
Zuerst: die drei Stellen, an denen es weh tut
Barrierefreiheit über eine ganze Website gleichmäßig zu verteilen ist die teuerste Variante und die mit der geringsten Wirkung. Es gibt drei Stellen, an denen ein Fehler nicht nur ausschließt, sondern direkt Umsatz kostet:
- Formulare. Ein Eingabefeld ohne verknüpfte Beschriftung wird von einem Screenreader als „Eingabefeld" angekündigt — mehr nicht. Wer nicht sieht, was einzutragen ist, füllt es nicht aus.
- Warenkorb und Checkout. Hier sitzen die Interaktionen, die nicht übersprungen werden können. Ein Schritt, der nur per Maus bedienbar ist, beendet den Kauf.
- Navigation und Suche. Wenn der Einstieg nicht funktioniert, ist der Rest der Seite unerheblich.
Alles andere — Blogartikel, Über-uns-Seite, Pressebereich — ist wichtig, aber es ist nicht die erste Woche.
Die mechanische Hälfte: in Tagen erledigt
Ein überraschend großer Teil der typischen Befunde sind keine Design- oder Architekturfragen, sondern Auslassungen im Markup. Das sind die günstigsten Punkte im ganzen Projekt:
lang-Attribut am<html>-Element. Fehlt es, wählt der Screenreader die falsche Aussprache und liest deutschen Text englisch vor. Eine Zeile.- Formularbeschriftungen. Jedes Feld mit
<label for="…">verknüpfen. Ein Platzhalter ist keine Beschriftung: er verschwindet beim Tippen. - Alternativtexte. Informationstragende Bilder bekommen eine Beschreibung, rein dekorative ein leeres
alt="". Beides ist eine bewusste Entscheidung — „alt fehlt" ist keine. - Überschriftenstruktur. Genau eine H1, danach lückenlos absteigende Ebenen. Überschriften sind Struktur, keine Schriftgröße.
- Namen für Icon-Bedienelemente. Warenkorb, Suche, Menü: ohne
aria-labelsind das namenlose Schaltflächen. - Landmarks und Skip-Link. Ein
<main>und ein Sprunglink zum Inhalt ersparen Screenreader-Nutzern, bei jedem Seitenaufruf die komplette Navigation zu durchlaufen. - Zoom nicht blockieren.
user-scalable=noim viewport-Meta ist ein Einzeiler mit großer Wirkung — in die falsche Richtung.
Welche dieser Punkte auf Ihrer Seite offen sind, können Sie in Sekunden feststellen: unser BFSG-Check prüft genau diese Kriterien und zeigt die Fundstellen im Quelltext.
Die teure Hälfte: Design-System statt Einzelseiten
Danach beginnt der Teil, der Entscheidungen verlangt.
Kontraste
Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, große Schrift 3:1. Der Fehler, den wir am häufigsten sehen, ist nicht ein zu heller Text — es ist eine Markenfarbe, die als Button-Hintergrund knapp durchfällt.
Korrigieren Sie das in der Komponente, nicht auf der Seite. Ein Kontrastfehler, der im Design-System behoben wird, ist überall behoben. Einer, der auf zwölf Seiten einzeln geflickt wurde, kommt mit dem nächsten Feature zurück.
Fokuszustände
Wer mit der Tastatur navigiert, muss jederzeit sehen, wo er ist. In vielen Projekten wurde der Fokusring irgendwann entfernt, weil er „stört" — meist ein outline: none im CSS-Reset, das seit Jahren niemand hinterfragt hat. Der Ersatz muss sichtbar sein, nicht dezent.
Tastaturbedienbarkeit
Alles, was mit der Maus geht, muss mit der Tastatur gehen: Dropdowns, Modals, Slider, Datepicker, Cookie-Banner. Besonders Modals sind eine typische Fehlerquelle — der Fokus muss hinein, darin bleiben und beim Schließen an die Ausgangsstelle zurückkehren.
Das ist auch der Punkt, an dem selbstgebaute Komponenten teurer werden als etablierte. Ein eigenes Dropdown ist schnell geschrieben und langsam barrierefrei gemacht.
Redaktion
Der Teil, den Technik nicht löst. Alternativtexte, verständliche Linktexte, sinnvolle Überschriften und Untertitel für Videos entstehen bei der Erstellung von Inhalten. Ohne eine kurze Einweisung des Redaktionsteams ist die Seite in sechs Monaten wieder dort, wo sie war.
Was Sie dabei aufgeben
Zwei Dinge, ehrlich benannt.
Gestalterische Freiheit an einzelnen Stellen. Manche Farbkombination fällt beim Kontrast durch, manches Layout funktioniert bei 200 % Zoom nicht mehr. Meistens ist die barrierefreie Variante die bessere — aber nicht immer die, die im Moodboard stand.
Tempo bei Features. Eine neue Komponente ist erst fertig, wenn sie mit Tastatur bedienbar ist. Das sind pro Komponente wenige Stunden, und es fällt in der Planung auf. Der Alternativpfad ist nicht „schneller", sondern „später teurer".
Die Reihenfolge, die wir empfehlen
- Maschinell prüfbare Fehler abräumen — Beschriftungen, Alternativtexte, Struktur, Zoom.
- Formular-, Warenkorb- und Checkout-Strecke einmal komplett ohne Maus durchgehen und alles beheben, was dabei blockiert.
- Kontraste und Fokuszustände im Design-System korrigieren.
- Komplexe Komponenten einzeln durchgehen: Modals, Dropdowns, Slider, Banner.
- Redaktion schulen und eine Erklärung zur Barrierefreiheit veröffentlichen, die den tatsächlichen Stand abbildet — mit den offenen Punkten, nicht ohne sie.
- Prüfungen in die CI aufnehmen, damit der Stand nicht beim nächsten Release verloren geht.
Diese Reihenfolge ist nicht nach Kriterienkatalog sortiert, sondern nach Wirkung pro Aufwand. Wer stattdessen die WCAG von oben nach unten abarbeitet, verbringt die erste Woche mit Punkten, die kaum jemanden betreffen.
Wann es sich lohnt, den Relaunch abzuwarten
Wenn ohnehin ein Relaunch geplant ist und die bestehende Seite auf einem Theme sitzt, das sich kaum anpassen lässt, ist die Nachrüstung oft Geld, das zweimal ausgegeben wird. Dann ist die bessere Reihenfolge: die kritischen Strecken jetzt reparieren, den Rest im Neubau mitnehmen. Was ein solcher Neubau kostet, können Sie mit dem Website Kosten-Rechner abschätzen — Barrierefreiheit ist dort eine eigene Position und keine unsichtbare Annahme.
Wie wir Audit, Maßnahmenplan und Umsetzung aufsetzen, steht auf der Seite zur barrierefreien Website nach BFSG; den technischen Rahmen drumherum — Struktur, Performance, Redaktionssystem — behandelt unsere Webentwicklung. Wer bei der Gelegenheit auch die Ladezeiten anfassen will: die Zusammenhänge stehen in Core Web Vitals 2026.
Wenn Sie wissen möchten, wo Ihre Seite steht, lassen Sie den BFSG-Check darüberlaufen und schicken Sie uns das Ergebnis. Wir sehen uns die Punkte an, die ein automatischer Test nicht sehen kann, und melden uns innerhalb von 48 Stunden schriftlich.