Barrierefreie Website 2026: WCAG 2.2 richtig umsetzen

Sie befinden sich: Home > News Archiv > Webmaster > Barrierefreie Websit...

Fast jede Website hat Barrieren, und die meisten davon gehen auf nur sechs Fehlerarten zurück. Wer die abstellt, kommt mit überschaubarem Aufwand sehr weit.

Die Zahl klingt nach Übertreibung, ist aber gemessen: Von den eine Million meistbesuchten Startseiten hatten 95,9 Prozent Fehler, die sich automatisch erkennen lassen. Ein Prüfprogramm findet sie in Sekunden. Noch aufschlussreicher ist die zweite Zahl: Sechs Fehlerarten machen 96 Prozent aller gefundenen Probleme aus. Eine barrierefreie Website entsteht also nicht durch einen Großumbau, sondern dadurch, dass ein halbes Dutzend immer gleicher Fehler verschwindet.

Wer heute damit anfängt, hat den größten Teil in wenigen Tagen erledigt. Der Rest ist Fleißarbeit und ein bisschen Umdenken beim Bauen neuer Seiten.

Was eine barrierefreie Website ausmacht

Der Maßstab für eine barrierefreie Website heißt WCAG, ausgeschrieben Web Content Accessibility Guidelines, herausgegeben vom W3C. Aktuell gilt Version 2.2, seit Oktober 2023 offizielle Empfehlung und im Oktober 2025 als internationale Norm bestätigt. Version 3.0 geistert durch Fachartikel, ist aber weiterhin ein Arbeitsentwurf und wird 2.2 nicht ablösen. Nichts, was Sie jetzt für 2.2 tun, ist verschwendet.

Die Richtlinien stehen auf vier Prinzipien. Inhalte müssen wahrnehmbar sein, also für die Sinne erfassbar. Sie müssen bedienbar sein, auch ohne Maus. Sie müssen verständlich sein, in Sprache und Bedienung. Und sie müssen robust sein, also mit Browsern und Hilfsmitteln zusammenarbeiten.

Dazu gibt es drei Stufen: A als Minimum, AA als üblichen Zielwert und AAA, das kaum eine Seite vollständig erreicht. Verbindlich ist in aller Regel AA. Darauf beziehen sich auch die europäische Norm und damit die deutschen Vorgaben. Wer wissen will, ob und ab wann ihn das rechtlich betrifft, findet die Fristen und Ausnahmen im Artikel zum Barrierefreiheitsstärkungsgesetz. Hier geht es um die Umsetzung.

Die sechs Fehler, die fast alles ausmachen

Diese sechs Punkte stehen hinter fast jedem gemessenen Verstoß:

• Zu schwacher Kontrast. Mit Abstand der häufigste Fehler, gefunden auf 83,9 Prozent der geprüften Startseiten.
• Fehlende Alt-Texte bei Bildern, die Information tragen.
• Formularfelder ohne Beschriftung. Ein Drittel aller Eingabefelder ist nicht korrekt beschriftet.
• Leere Links, etwa ein Icon ohne Text dahinter.
• Leere Buttons, dasselbe Problem bei Schaltflächen.
• Fehlende Sprachauszeichnung, also ein Dokument ohne Angabe, in welcher Sprache es verfasst ist.

Beim Kontrast sind die Werte klar: 4,5 zu 1 für normalen Text, 3 zu 1 für großen Text ab etwa 24 Pixel und für Bedienelemente wie Formularrahmen oder Icons. Prüfen lässt sich das mit dem Kontrastrechner von WebAIM oder direkt in den Entwicklerwerkzeugen des Browsers. Ausgenommen sind reine Dekoration, Logos und deaktivierte Elemente.

Ein verwandter Punkt, der oft übersehen wird: Information darf nie allein über Farbe laufen. Eine Fehlermeldung, die nur rot ist, kommt bei einem farbfehlsichtigen Besucher nicht an. Es braucht zusätzlich Text oder ein Symbol.

Bei Alt-Texten gilt eine Faustregel, die viele falsch herum kennen: Bilder, die Information tragen, bekommen eine knappe Beschreibung ihres Zwecks. Rein schmückende Bilder bekommen ein leeres Alt-Attribut, damit ein Screenreader sie überspringt. Kein "Bild von", keine Dateinamen, keine Wiederholung der Bildunterschrift.

Was WCAG 2.2 neu verlangt

Version 2.2 hat neun Kriterien ergänzt. Fünf davon treffen Shops und Formulare besonders:

• Klickziele mindestens 24 mal 24 Pixel oder mit genug Abstand zueinander. Betrifft vor allem winzige Icons in Kopfzeilen.
• Der Tastaturfokus darf nicht verdeckt sein, etwa von einer klebenden Kopfzeile oder einem Cookie-Banner.
• Zieh-Gesten brauchen eine Alternative per einfachem Klick.
• Bereits eingegebene Daten dürfen nicht erneut abgefragt werden. Ein Punkt, an dem viele Kassenstrecken scheitern.
• Der Login darf keine Gedächtnisaufgabe sein. Ein Captcha, das Verkehrsschilder abfragt, ist ohne Alternative nicht zulässig.

Gestrichen wurde dagegen das Kriterium zur reinen Markup-Gültigkeit. Moderne Browser kommen mit kleinen Fehlern zurecht, und die wirklich störenden Probleme sind über andere Kriterien abgedeckt.

So testen Sie selbst

Automatische Prüfer sind ein guter Anfang und ein schlechtes Ende. Je nach Messweise finden sie 30 bis 40 Prozent der Kriterien. Das heißt im Umkehrschluss: Ein grüner Bericht sagt wenig. Ein Lighthouse-Wert von 100 bedeutet nicht, dass die Seite benutzbar ist.

Brauchbar sind WAVE mit seinen sehr anschaulichen Markierungen direkt auf der Seite, axe DevTools mit wenigen Fehlalarmen und Lighthouse, das in jedem Chrome steckt. Nehmen Sie ruhig zwei davon, sie finden nicht dasselbe.

Die eigentliche Prüfung machen Sie selbst, und sie dauert keine Viertelstunde:

1. Nur Tastatur. Legen Sie die Maus weg und gehen Sie mit Tabulator durch die Seite. Kommen Sie überall hin? Sehen Sie jederzeit, wo Sie gerade sind? Kommen Sie aus jedem Fenster wieder heraus?
2. Auf 200 Prozent zoomen und das Fenster schmal ziehen, bis etwa 320 Pixel. Bleibt alles nutzbar, ohne seitwärts scrollen zu müssen?
3. Graustufen einschalten. Geht Information verloren?
4. Ein Formular absichtlich falsch ausfüllen. Sagt die Fehlermeldung, was zu tun ist?
5. Screenreader anwerfen. NVDA ist unter Windows kostenlos, VoiceOver steckt in jedem Mac und iPhone.

Der Tastaturtest allein deckt erfahrungsgemäß mehr auf als jedes Prüfprogramm. Der sichtbare Fokus fehlt in den meisten Onlineshops, und ohne ihn ist eine Seite für Tastaturnutzer praktisch unbedienbar. Ob eine barrierefreie Website am Ende wirklich funktioniert, entscheidet sich genau hier und nicht im Prüfbericht.

Warum Overlays das Problem nicht lösen

Es gibt Anbieter, die Barrierefreiheit per Skript versprechen. Eine Zeile Code, fertig. Der Fachkonsens dazu ist eindeutig und ungewöhnlich deutlich: Über 800 Fachleute haben eine Erklärung unterzeichnet, dass solche Widgets kein wirksames Mittel sind. Darunter Leute, die an den Spezifikationen selbst mitgeschrieben haben.

Noch aussagekräftiger ist das Urteil der Betroffenen. In einer Umfrage unter Screenreader-Nutzern bewerteten 72 Prozent der Teilnehmer mit Behinderung diese Werkzeuge als wenig oder gar nicht hilfreich. Nur 2,4 Prozent hielten sie für sehr wirksam.

Dazu kommt der rechtliche Teil, der oft als Verkaufsargument dient und in Wahrheit dagegen spricht. In den USA wurden zahlreiche Firmen trotz eingebautem Overlay verklagt. Die dortige Handelsaufsicht verpflichtete einen der größten Anbieter im April 2025 zur Zahlung von einer Million Dollar. Er darf nicht mehr behaupten, sein Produkt mache Websites regelkonform, ohne das belegen zu können.

Was diese Werkzeuge können, sind Komfortfunktionen wie größere Schrift oder ein Kontrastmodus. Das bieten Browser und Betriebssysteme ohnehin. Was sie nicht können: fehlerhaftes Markup reparieren, Tastaturbedienung herstellen, sinnvolle Alt-Texte erfinden oder ein PDF zugänglich machen. Eine barrierefreie Website entsteht nicht durch ein eingebundenes Skript, sondern durch Arbeit am eigenen Markup. Das Geld ist in echter Umsetzung besser angelegt.

WordPress: wo die Barrieren wirklich entstehen

Der Kern von WordPress ist selten das Problem. Es sind vier andere Schichten.

Das Theme. Im offiziellen Verzeichnis gibt es die Auszeichnung "Accessibility Ready". Sie bedeutet, dass das Theme eine Prüfung zu Mindestkriterien bestanden hat, also Tastaturbedienung, sichtbarer Fokus, Sprunglink, Kontraste, Formularbeschriftungen. Das ist eine gute Grundlage, aber keine Garantie für die fertige Seite. Inhalt und Erweiterungen kommen ja noch dazu.

Seitenbaukästen, Slider und Popups. Hier entsteht der Großteil der Probleme. Karussell-Bibliotheken liegen messbar über dem Durchschnitt von 56,1 Fehlern pro Seite, teils um 30 Prozent darüber. Ein automatisch weiterlaufender Slider ist außerdem für niemanden angenehm.

Cookie-Banner. Sie verdecken den Fokus, lassen sich oft nicht per Tastatur schließen und stehen genau am Anfang jeder Sitzung. Wer nur eine Sache repariert, sollte diese nehmen. Wie so ein Banner rechtlich aussehen muss, steht im Ratgeber zu Impressum und Datenschutz.

Die tägliche Redaktion. Fehlende Alt-Texte in der Mediathek, Überschriften, die nach Schriftgröße statt nach Gliederung gewählt werden, Linktexte wie "hier klicken". Dagegen hilft kein Werkzeug, nur eine Gewohnheit.

Ein Prüf-Plugin im Editor, das beim Schreiben auf Probleme hinweist, ist trotzdem sinnvoll. Es stellt keine Barrierefreiheit her, aber es erinnert im richtigen Moment. Verwechseln Sie es nicht mit einem Overlay: Das eine meldet Probleme, das andere überdeckt sie.

Womit Sie anfangen

Eine barrierefreie Website entsteht schrittweise, und die Reihenfolge ist wichtiger als die Vollständigkeit. Nehmen Sie sich zuerst das vor, was viel bringt und wenig kostet.

Diese Woche: Lassen Sie WAVE über Ihre fünf wichtigsten Seitentypen laufen und machen Sie den Tastaturtest. Kostet nichts und zeigt sofort, wo Sie stehen.

Die nächsten Wochen: Kontraste korrigieren, Alt-Texte ergänzen, Überschriften in eine saubere Reihenfolge bringen, aussagekräftige Linktexte schreiben, den Fokus sichtbar machen, einen Sprunglink einbauen und die Sprache auszeichnen. Das sind genau die sechs Bereiche von oben.

Danach: Formulare mit Beschriftungen, klaren Fehlermeldungen und automatischer Vervollständigung. Cookie-Banner und Popups tastaturbedienbar machen. Klickflächen vergrößern.

Reparieren Sie möglichst im Theme statt auf einzelnen Seiten, sonst wird die barrierefreie Website zur Dauerbaustelle. Eine Änderung an der Vorlage wirkt überall, eine Änderung an einer Seite nur dort. Und veröffentlichen Sie eine Erklärung zur Barrierefreiheit mit einem echten Kontaktweg. Sie gehört dazu, und sie kostet Sie eine halbe Stunde.

Vieles davon zahlt nebenbei auf anderes ein. Alt-Texte geben Suchmaschinen Bildkontext, eine saubere Überschriftenstruktur hilft beim Erfassen der Seite, sprechende Linktexte werden häufiger geklickt. Auch technische Grundlagen wie Ladezeit und Layoutstabilität profitieren von aufgeräumtem Markup. Barrierefreiheit ist trotzdem kein Suchmaschinentrick, und wer sie so verkauft, verspricht zu viel. Der eigentliche Punkt ist schlichter: Eine barrierefreie Website funktioniert für mehr Menschen. Für ältere Besucher, für jemanden mit gebrochenem Arm, für alle, die in der prallen Sonne aufs Handy schauen.

Und wenn Sie an einen Punkt kommen, an dem die Prüfprogramme nichts mehr finden, Tastatur und Screenreader aber weiter stolpern: Dann ist der Moment für eine unabhängige Prüfung gekommen. Vorher lohnt sie sich nicht, denn die offensichtlichen Dinge finden Sie selbst.

Barrierefreiheit WCAG Website WordPress Usability

Webung: Hier bekommen Sie PHP fähigen Webspace der mit Ökostrom betrieben wird ab bereits 2 Euro/ Monat für ihre Homepage. Zusätzlich ist eine eigene Internetadresse mit enthalten.

Neusten News in der Kategorie "Webmaster"

• WordPress gehackt 2026: Website retten und bereinigen Weiterleitungen auf Spam-Seiten, fremde Admin-Konten, Warnungen von Go...

• Strukturierte Daten 2026: mit Schema zu Rich Snippets Sterne, Preise und Bilder direkt im Google-Ergebnis bringen mehr Klick...

• Impressum und Datenschutz 2026: rechtssichere Website Ein fehlerhaftes Impressum oder eine lückenhafte Datenschutzerklärung ...

• WordPress schneller machen 2026: Caching und Tuning WordPress erzeugt jede Seite bei jedem Aufruf neu, das kostet Tempo un...

• Bilder fürs Web optimieren 2026: schneller mit AVIF Bilder sind auf den meisten Seiten der größte Bremsklotz für die Ladez...

• WordPress absichern 2026: Schutz vor Hackerangriffen WordPress ist das beliebteste Ziel automatisierter Angriffe, neue Lück...

• Website umziehen 2026: ohne Ausfall und Ranking-Verlust Ein Hosting-Wechsel kann die Seite tagelang lahmlegen oder das Google-...

• E-Mail-Zustellbarkeit 2026: Raus aus dem Spam-Ordner Bestellbestätigungen, Newsletter und Kontaktmails landen plötzlich im ...

• Website-Backups 2026: Die Strategie gegen Datenverlust Ein Hack, ein fehlgeschlagenes Update, ein Serverausfall, und die Seit...

• Cookie-Banner 2026: Was jetzt wirklich Pflicht ist Cookie-Banner verschwinden 2026 doch nicht. Welche Regeln gelten, welc...