Der US-Designer Matt Soriano ordnet die drei WCAG-Fassungen in zehn Design-Themen und baut einen eigenen Kontrast-Prüfer ein. Jede Regel erscheint mit Erfolgskriterium, Konformitätsstufe und einem Beispiel für Verstoß und Lösung direkt im Browser. Der praktische Kniff: Die komplette Spezifikation steht als Markdown-Datei zum Download bereit, vorbereitet für den KI-Assistenten.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Barrierefreiheit scheitert nicht am Willen, sondern an der Norm selbst: Die WCAG umfassen über 80 Erfolgskriterien, verteilt auf vier Prinzipien und drei Konformitätsstufen. Ein neues Gratis-Werkzeug ordnet diese Kriterien nach dem, was Gestalter tatsächlich entwerfen, von der Farbe bis zur Animation.
Das Wichtigste in Kürze
- Der A11y Experience Guide gliedert WCAG 2.0, 2.1 und 2.2 in zehn Design-Themen, von Farbe über Fokus bis Bewegung.
- Jedes Thema nennt das passende Erfolgskriterium samt Stufe A, AA oder AAA und zeigt ein Beispiel für Verstoß und saubere Lösung.
- Ein eingebauter Kontrast-Prüfer misst Farbpaare gegen die Schwelle von 4,5 zu 1 und schlägt eine besser lesbare Farbe vor.
- Die gesamte Spezifikation steht als Markdown-Datei zum Download, damit ein KI-Assistent die Regeln von Anfang an mitliest.
Was steckt im A11y Experience Guide?
Der A11y Experience Guide stammt von Matt Soriano, einem US-amerikanischen UX-Design-Director, und läuft ohne Anmeldung im Browser.[1] Statt der vier WCAG-Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit sortiert das Werkzeug die Norm in zehn Erlebnis-Themen: Farbe, Typografie, Fokus, Touch-Ziele, Layout, Formulare, Eingabe, Animation, Navigation und Medien.
Jedes Thema folgt demselben Dreischritt. Eine Synthese fasst die Design-Regel in einem Satz zusammen, darunter stehen die konkreten Erfolgskriterien mit Nummer und Stufe, verlinkt zur amtlichen W3C-Fundstelle. Ein Live-Beispiel stellt den typischen Verstoß direkt neben die saubere Lösung, etwa eine Fehlermeldung, die allein über die Farbe Rot läuft.
Beim Thema Farbe steht die Rechnung schwarz auf weiß: Fließtext braucht ein Kontrastverhältnis von 4,5 zu 1, große Schrift 3 zu 1, Bedienelemente und Icons ebenfalls 3 zu 1.[2] Etwa jeder zwölfte Mann nimmt Farben eingeschränkt wahr, weshalb der Guide zu jeder Farbaussage eine zweite Kennzeichnung über Form, Symbol oder Text verlangt. Bei zu schwachem Kontrast schlägt der Prüfer eine besser lesbare Farbe vor, eine Aufgabe, die künftig auch die neue CSS-Funktion contrast-color im Browser übernimmt.
Wodurch hebt sich der Guide von WebAIM ab?
An reinen Kontrast-Rechnern herrscht kein Mangel, allen voran steht der WebAIM Contrast Checker als Branchenstandard. Der A11y Experience Guide bringt einen eigenen Prüfer mit, der Farbpaare bewertet und die Helligkeit ohne Farbtonwechsel nachjustiert. Der eigentliche Unterschied liegt eine Ebene höher: Das Werkzeug ordnet die Norm nicht nach juristischer Logik, sondern nach Entwurfsschritten, wie sie in Figma oder im Code tatsächlich anfallen.
Der zweite Unterschied zielt auf KI-gestützte Teams. Über einen Klick steht die komplette Spezifikation als Markdown-Datei bereit, ausdrücklich als Vorlage für Sprachmodelle gedacht. So lässt sich der Regelsatz einem Coding-Assistenten voranstellen, der Komponenten sonst ohne Rücksicht auf Barrierefreiheit ausgibt.
Ein Werkzeug, das die WCAG in Entwurfssprache übersetzt und die Regeln maschinenlesbar ausgibt, schließt genau die Lücke zwischen Anspruch und Alltag im deutschen Web.
— Markus Seyfferth, Chefredakteur Dr. Web
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025. Die maßgebliche Norm EN 301 549 verweist auf WCAG 2.1 in der Stufe AA, genau die Ebene, die der Guide in den Vordergrund stellt.
Was heißt das Werkzeug für die BFSG-Pflicht?
Für den deutschen Markt fällt der Zeitpunkt günstig: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz Online-Shops, Banking-Apps und viele weitere digitale Angebote zur Barrierefreiheit.[3] Maßgeblich ist die europäische Norm EN 301 549, und diese verweist auf WCAG 2.1 in der Stufe AA. Genau diese Stufe stellt der Guide in den Vordergrund.
Ein Orientierungswerkzeug ersetzt allerdings keine Prüfung. Der Guide erklärt die Kriterien und zeigt Muster, doch die tatsächliche Konformität einer Seite deckt erst ein gründliches Audit mit Screenreadern und echten Nutzern auf. Für Agenturen und Inhouse-Teams taugt das Werkzeug als schneller Einstieg und als gemeinsame Sprache zwischen Entwurf und Entwicklung, bevor der teurere Prüfschritt beginnt.
Ein erster Schritt kostet nichts: Sie exportieren den Regelsatz einmal und stellen ihn dem eigenen KI-Assistenten voran, bevor die nächste Komponente entsteht. So rückt Barrierefreiheit vom nachträglichen Fix an den Anfang des Entwurfs.
Quellen
[1] A11y Experience Guide: „A11y Experience Guide“ von Matt Soriano
[2] W3C: „Understanding Success Criterion 1.4.3: Contrast (Minimum)“
[3] Bundesministerium der Justiz: „Barrierefreiheitsstärkungsgesetz (BFSG)“
Mehr Newshunger?
- Barrierefreiheitsstärkungsgesetz: Schreibt Ihre KI barrierefreien Code?
- Wie ein blinder Kunde unsichtbare Barrierefreiheits-Lücken sichtbar machte
- Digitale Barrierefreiheit: So machen Sie Ihren Shop fit für alle Nutzer
- Webdesign-Tools: 25 Helfer für den Alltag in 2026
- CSS Units: Ein Nachschlagewerk misst alle 63 CSS-Einheiten live im Browser
