WCAG-Quick-Wins: 12 schnelle Fixes für barrierefreie Websites

Freitag, 16:30 Uhr, das Telefon klingelt. Ein Kunde, Sanitärbetrieb, 12 Mitarbeiter: „Wir haben Post vom Verband bekommen, irgendwas mit Barrierefreiheit und Pflichten. Müssen wir die Website jetzt komplett neu machen?“ Wenn du Websites für lokale Unternehmen baust und betreust, hast du dieses Gespräch entweder schon geführt oder es steht dir bevor. Die ehrliche Antwort lautet in den meisten Fällen: Nein, kein Neubau. Die häufigsten Barrieren im Web sind Handwerksfehler, die sich in wenigen Stunden beheben lassen. Und genau daraus kannst du ein sauberes, verkaufbares Arbeitspaket schnüren.

Die Datenlage: fast alle Websites haben dieselben Fehler

WebAIM untersucht jedes Jahr die Startseiten der eine Million meistbesuchten Websites automatisiert auf WCAG-Verstöße. Die Ausgabe 2026 (erhoben im Februar 2026) ist ernüchternd: 95,9 Prozent der Startseiten hatten mindestens einen automatisch erkennbaren WCAG-Fehler, im Schnitt 56,1 Fehler pro Seite. Gegenüber dem Vorjahr ist das sogar eine Verschlechterung, 2025 lagen die Werte noch bei 94,8 Prozent und rund 51 Fehlern pro Seite.

Für dich steckt darin aber eine zweite, viel wichtigere Botschaft: Die häufigsten Fehler sind keine exotischen Spezialfälle, sondern Basics.

Zu geringer Kontrast, fehlende Alt-Texte, Formularfelder ohne Label, leere Links: Diese Kategorien decken den Großteil aller automatisch erkannten Fehler ab. Und alle lassen sich ohne Architektur-Umbau direkt im Theme, im CSS oder im CMS-Inhalt beheben. Genau deshalb funktioniert der Quick-Win-Ansatz: Du greifst die Fehlerklassen an, die statistisch fast jede Website betreffen und pro Fix nur Minuten bis Stunden kosten.

Die häufigsten Barrieren im Web sind keine Spezialfälle, sondern Handwerksfehler: Kontrast, Alt-Text, Label.

Die 12 Quick-Wins für deine nächste Kundenwebsite

Die Liste ist nach Häufigkeit und Aufwand sortiert: oben stehen die Fixes, die laut WebAIM die meisten Seiten betreffen und sich am schnellsten umsetzen lassen.

1. Textkontrast auf 4,5:1 bringen. Zu geringer Kontrast ist mit 83,9 Prozent der mit Abstand häufigste Fehler. Prüfe Fließtext gegen das Verhältnis 4,5:1, großen Text gegen 3:1. Meist reicht es, zwei bis drei Grautöne im CSS dunkler zu stellen, das hellgraue Placeholder-Grau ist fast immer dabei.
2. Alt-Texte für informative Bilder schreiben. Beschreibe, was das Bild aussagt, nicht den Dateinamen: „Meisterin beim Einbau einer Wärmepumpe“ statt „IMG_2394″. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit Screenreader sie sauber überspringen.
3. Formularfelder mit Labels verknüpfen. Jedes Eingabefeld braucht ein programmatisch verknüpftes Label. Platzhaltertext ist kein Ersatz: Er verschwindet beim Tippen und hat oft selbst zu wenig Kontrast. Betrifft laut WebAIM 51 Prozent aller Startseiten.
4. Leere Links und Buttons füllen. Icon-Buttons ohne Text (Lupe, Burger-Menü, Social-Icons) brauchen ein aria-label oder visuell versteckten Text. Leere Links fand WebAIM auf 46,3 Prozent der Seiten, leere Buttons auf 30,6 Prozent.
5. Sprache im HTML deklarieren. Ohne lang-Attribut liest der Screenreader deutschen Text mit englischer Aussprache vor. Ein einziges Attribut im html-Element, der schnellste Fix der ganzen Liste.
6. Fokus sichtbar lassen. Ein outline: none ohne Ersatz macht die Tastaturnavigation blind. Definiere einen klaren Fokus-Stil, gern im Markenlook des Kunden, Hauptsache deutlich sichtbar.
7. Überschriften-Hierarchie reparieren. Eine H1 pro Seite, danach ohne Sprünge weiter. Screenreader-Nutzer springen per Überschrift durch die Seite; wenn dein Pagebuilder aus Layout-Gründen H4 vor H2 setzt, bricht diese Navigation.
8. Sprechende Linktexte setzen. Fünfmal „mehr erfahren“ hilft niemandem, der sich Links auflisten lässt. Schreibe das Ziel in den Link: „Leistungen im Überblick“ statt „hier klicken“.
9. Den Tastatur-Test bestehen. Maus weglegen, Seite nur mit Tab, Enter und Escape bedienen. Menüs, Slider, Akkordeons und Formulare müssen erreichbar sein, Modals müssen sich schließen lassen, ohne dass der Fokus dahinter verloren geht.
10. Zoom auf 200 Prozent aushalten. Text muss echter Text sein, keine Schrift in Bildern. Bei Browser-Zoom darf das Layout nicht zerfallen und kein Inhalt abgeschnitten werden.
11. Bewegung stoppbar machen. Autoplay-Slider und Video-Hintergründe brauchen eine Pausen-Möglichkeit. Bonuspunkte: prefers-reduced-motion im CSS respektieren und Animationen für empfindliche Nutzer abschalten.
12. Fehlermeldungen als Text ausgeben. Ein rot umrandetes Feld allein reicht nicht, Farbe darf nie der einzige Informationsträger sein. Schreibe konkret, was fehlt, und verknüpfe die Meldung mit dem Feld.

Was bewusst kein Quick-Win ist

Sei ehrlich zum Kunden, was diese Liste nicht leistet. Komplexe Widgets wie Buchungsstrecken, Konfiguratoren oder eingekaufte Drittsysteme brauchen eigene Projekte, ebenso große PDF-Archive. Und sogenannte Accessibility-Overlays, die per Skript nachträglich „Barrierefreiheit nachrüsten“, sind kein Ersatz: Sie beheben die Fehler im Quellcode nicht. Interessant ist dazu ein Muster aus den WebAIM-Daten: Seiten mit besonders viel ARIA-Code weisen im Schnitt mehr erkennbare Fehler auf, nicht weniger. Übergestülpte Technik löst das Problem also nicht, sauberes HTML tut es.

Der rechtliche Rahmen gehört ebenfalls ins Kundengespräch: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele B2C-Angebote, etwa Online-Shops und Online-Terminbuchung. Ob ein konkreter Kunde darunter fällt, ist eine Einzelfallfrage mit einigen Ausnahmen. Einen Überblick über Pflichten und Fristen findest du in unserem Leitfaden zur BFSG-Pflicht für Websites, eine schnelle Ersteinschätzung liefert der BFSG-Check.

In 15 Minuten testen, wo eine Website steht

Du brauchst kein teures Tool-Setup für die Bestandsaufnahme. Drei kostenlose Checks reichen: Die Browser-Erweiterung WAVE von WebAIM markiert Kontrast-, Alt-Text- und Label-Fehler direkt im Layout der Seite. Der Accessibility-Teil von Lighthouse in den Chrome-DevTools liefert eine grobe Zweitmeinung. Und der Tastatur-Test aus Punkt 9 deckt auf, was automatische Tools grundsätzlich nicht sehen. Wichtig für die Erwartungshaltung im Kundengespräch: Automatische Checks finden nur einen Teil der WCAG-Kriterien. Ein guter Score beweist keine Barrierefreiheit, ein schlechter beweist aber Handlungsbedarf.

So verkaufst du das Paket dem Kunden

Verkaufe die Quick-Wins nicht als Angstprodukt, sondern als Qualitäts-Upgrade mit drei Argumenten. Erstens Reichweite: Barrieren treffen nicht nur blinde Nutzer, sondern auch die Kundin mit Sehschwäche, den Nutzer mit Tremor und jeden, der bei Sonne aufs Handy schaut. Zweitens Qualität: Dieselben Fixes verbessern Lesbarkeit, Formular-Abschlüsse und die wahrgenommene Professionalität für alle Besucher. Drittens Recht: Mit dem BFSG ist Barrierefreiheit vom Nice-to-have zur Compliance-Frage geworden, und ein dokumentierter Basis-Fix zeigt guten Willen, falls doch einmal eine Beschwerde kommt.

Praktisch bewährt sich ein Festpreis-Paket, etwa „Barrierefreiheit Basis: die 12 kritischsten Fixes plus Prüfprotokoll“. Der Kunde versteht sofort, was er bekommt, du kalkulierst planbar ein bis drei Arbeitstage. Wie du die Leistung strategisch positionierst und bepreist, liest du im Grundlagenartikel zur barrierefreien Website. Und wenn du das Thema aktiv in die Akquise drehst: Veraltete Websites mit offensichtlichen Barrieren sind ein dankbarer Gesprächseinstieg, systematisch finden kannst du sie über Webdesign-Leads in deiner Region.