Accessibility Audit: WCAG- und BFSG-konform 2026
Accessibility Audit erklärt: Ablauf, Tools, WCAG-Konformitätsstufen und BFSG-Pflichten 2026. Mit Praxis-Tipps für PHP und Symfony.
Mehr erfahren- Erstellt:
- Aktualisiert:
- Autor:
- Roland Golla
Was ist Accessibility Testing? Definition 2026
Accessibility Testing bezeichnet den laufenden Prozess der Qualitätssicherung, der sicherstellt, dass digitale Produkte die Barrierefreiheitsanforderungen kontinuierlich erfüllen. Im Unterschied zum einmaligen Accessibility Audit ist Accessibility Testing ein integrierter Bestandteil des Entwicklungszyklus: automatisierte Tests in der CI/CD-Pipeline, manuelle Prüfungen nach Deployments und regelmäßige Screenreader-Tests durch Entwickler.
Rechtlicher Hintergrund 2026: Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft und verpflichtet privatwirtschaftliche Unternehmen zur dauerhaften digitalen Barrierefreiheit nach WCAG 2.1 Level AA. Dauerhaft ist dabei das entscheidende Wort: Eine einmalige Prüfung reicht nicht, jede neue Feature-Entwicklung kann bestehende Konformität brechen. Accessibility Testing ist die systematische Antwort darauf.
Accessibility Testing deckt drei Ebenen ab: Statische Analyse im Editor (eslint-plugin-jsx-a11y), automatisierte Tests in der Pipeline (axe-core in Cypress) und manuelle Tests mit echten Assistenztechnologien wie NVDA, VoiceOver oder TalkBack. Nur die Kombination aller drei Ebenen liefert echte WCAG-Konformität.
Inhaltsverzeichnis
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign
Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.
Die drei Ebenen des Accessibility Testings
Ein professionelles Accessibility Testing-Setup arbeitet auf drei aufeinander aufbauenden Ebenen, die zusammen eine lückenlose Abdeckung aller WCAG-Kriterien ermöglichen:
- Ebene 1 – Statische Analyse (Shift Left):
eslint-plugin-jsx-a11yprüft React/JSX-Code bereits im Editor auf häufige A11Y-Fehler wie fehlende Alt-Texte, falsche ARIA-Rollen oder nicht-interaktive Klick-Handler. Fehler werden vor dem Commit sichtbar, bevor sie überhaupt im Browser landen. - Ebene 2 – Automatisierte Tests in CI/CD: axe-core als Cypress-Plugin oder als eigenständige Test-Stage prüft gerenderte Seiten automatisch nach jedem Deployment. Regressions werden sofort erkannt und blockieren den Release-Prozess bevor sie in Produktion gehen.
- Ebene 3 – Manuelle Tests: Tastaturnavigation (Tab, Enter, Pfeiltasten), Screenreader-Tests mit NVDA+Firefox und VoiceOver+Safari, Zoom auf 200% und Farbblindheits-Simulation. Diese Tests decken ca. 60 bis 70 Prozent der WCAG-Kriterien ab, die kein automatisiertes Tool findet.
Accessibility Testing mit Cypress und axe-core 2026
Die Integration von axe-core in Cypress ist 2026 der De-facto-Standard für automatisiertes Accessibility Testing in modernen Webanwendungen. Das Setup ist in wenigen Minuten einsatzbereit:
Code:
npm install --save-dev cypress axe-core cypress-axe
In der Cypress-Konfiguration einbinden und dann in Tests verwenden:
Code:
// cypress/support/e2e.js
import 'cypress-axe';
// cypress/e2e/accessibility.cy.js
describe('Accessibility Tests', () => {
it('Startseite ist WCAG 2.1 AA konform', () => {
cy.visit('/');
cy.injectAxe();
cy.checkA11y(null, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa', 'wcag21aa']
}
});
});
});
NCA empfiehlt, Accessibility Tests als eigene Stage in der CI/CD-Pipeline zu führen, direkt nach den Unit-Tests und vor dem Deployment in die Staging-Umgebung. So werden A11Y-Regressions blockiert, bevor sie Nutzer erreichen. Die cy.checkA11y()-Methode gibt bei Fehlern einen detaillierten Bericht mit WCAG-Kriterium, betroffenen Elementen und Korrekturvorschlägen aus.
Manuelle Accessibility Tests: Checkliste 2026
Automatisierte Tests allein sind nicht ausreichend. Diese manuelle Checkliste deckt die wichtigsten Prüfpunkte ab, die kein Tool zuverlässig erkennt:
- Tastaturnavigation: Ist jede interaktive Funktion per Tab erreichbar? Ist die Tab-Reihenfolge logisch? Gibt es Fokus-Traps in Modals (gewollt) und außerhalb (ungewollt)?
- Sichtbare Fokus-Indikatoren: Ist der aktuelle Tastaturfokus immer sichtbar? CSS
outline: noneohne Alternative ist ein WCAG 2.4.7-Verstoß. - Screenreader-Ankündigungen: Werden dynamische Inhalte (AJAX-Updates, Fehlermeldungen, Toast-Notifications) von Screenreadern korrekt angekündigt via
aria-live? - Formular-Validierung: Sind Fehlermeldungen programmatisch mit dem Feld verbunden (
aria-describedby)? Werden sie von Screenreadern vorgelesen? - 200%-Zoom: Bricht das Layout bei 200% Zoom? Erscheint horizontales Scrollen? (WCAG 1.4.4)
- Farbkontrast: Fließtext mindestens 4,5:1, große Texte und UI-Elemente mindestens 3:1. Prüfung mit axe oder dem WebAIM Contrast Checker.
- Bilder und Icons: Haben alle informativen Bilder Alt-Texte? Haben dekorative Bilder
alt=""? Sind Icon-Buttons mitaria-labelbeschriftet?
Accessibility Testing in PHP- und Symfony-Projekten
In PHP- und Symfony-basierten Projekten entstehen Barrierefreiheitsprobleme häufig an spezifischen Stellen, die NCA aus der täglichen Projektarbeit kennt:
- Symfony Form Builder: Generierte Formular-IDs müssen manuell mit
label forverknüpft werden. Das Form-Theme sollte auf barrierefreie Ausgabe geprüft werden. - Twig-Templates: Nicht-semantisches HTML ist der häufigste Befund –
div-Suppen stattnav,main,button. Twig-Templates sind gut testbar mit axe in Cypress-E2E-Tests. - Sulu CMS Redaktionsinhalte: Rich-Text-Eingaben können problematisches HTML produzieren. NCA empfiehlt axe-Tests auf allen CMS-Seiten-Templates, nicht nur auf statischen Seiten.
- Flash-Messages und AJAX-Responses: Symfony-Flash-Messages sind ohne
aria-livefür Screenreader unsichtbar. Eine einfache Twig-Komponente mitrole="alert"löst das Problem.
NCA integriert Accessibility Testing direkt in bestehende Symfony/Cypress-Test-Suites und schult Entwicklungsteams in A11Y-konformem Coding. Das Ergebnis: Barrierefreiheit wird Teil der Definition of Done, nicht ein nachträglicher Audit-Punkt.
Häufig gestellte Fragen (FAQ)
Die wichtigsten Fragen zu Accessibility Testing, Tools und CI/CD-Integration 2026.
Was ist Accessibility Testing 2026 und warum ist es wichtig?
Accessibility Testing ist der kontinuierliche Prozess, der sicherstellt, dass digitale Produkte dauerhaft die WCAG-Barrierefreiheitsstandards erfüllen. Seit dem 28. Juni 2025 verlangt das BFSG dauerhafte Konformität – nicht nur eine einmalige Prüfung. Jede neue Entwicklung kann bestehende Barrierefreiheit brechen, weshalb Testing in den Entwicklungszyklus integriert sein muss.
Welche Tools eignen sich für Accessibility Testing 2026?
Die wichtigsten Tools sind axe DevTools (Browser-Extension und CI/CD-Integration), Lighthouse (in Chrome DevTools integriert), WAVE (WebAIM), eslint-plugin-jsx-a11y für statische Code-Analyse und cypress-axe für automatisierte E2E-Tests. Für manuelle Tests kommen NVDA, VoiceOver und TalkBack als Screenreader zum Einsatz.
Wie integriere ich axe-core in Cypress für Accessibility Testing 2026?
Installation via npm: cypress und cypress-axe installieren, dann in cypress/support/e2e.js importieren. In Tests cy.injectAxe() aufrufen und mit cy.checkA11y() prüfen. Als Tags wcag2a, wcag2aa und wcag21aa angeben für vollständige WCAG 2.1 AA Abdeckung. NCA empfiehlt eine eigene CI/CD-Stage für diese Tests.
Was decken automatisierte Accessibility Tests ab 2026?
Automatisierte Tools wie axe oder Lighthouse erkennen zuverlässig ca. 30 bis 40 Prozent aller WCAG-Kriterien: fehlende Alt-Texte, Kontrastprobleme, fehlende Formular-Labels, doppelte IDs und grundlegende ARIA-Fehler. Die restlichen 60 bis 70 Prozent – komplexe Interaktionen, Fokus-Reihenfolge, Screenreader-Ankündigungen – erfordern manuelle Tests.
Wie unterscheidet sich Accessibility Testing vom Accessibility Audit 2026?
Ein Accessibility Audit ist eine einmalige, umfassende Bestandsaufnahme mit detailliertem Bericht. Accessibility Testing ist der laufende Prozess im Entwicklungsalltag. Beide ergänzen sich: Der Audit liefert die Baseline, Testing stellt sicher, dass neue Entwicklungen diese Baseline nicht unterschreiten.
Wie teste ich Tastaturnavigation auf Barrierefreiheit 2026?
Manuell: Maus weglegen und nur mit Tab, Shift+Tab, Enter und Pfeiltasten navigieren. Prüfen: Ist jede interaktive Funktion erreichbar? Ist die Reihenfolge logisch? Ist der Fokus immer sichtbar? Gibt es Fokus-Fallen außerhalb von Modals? Automatisiert: Fokus-Sichtbarkeit kann teilweise mit axe geprüft werden (WCAG 2.4.7, 2.4.11).
Wie teste ich Screenreader-Kompatibilität 2026?
NVDA mit Firefox unter Windows ist der kostengünstige Einstieg (beide kostenlos). VoiceOver mit Safari unter macOS/iOS ist für Apple-Plattformen unverzichtbar. TalkBack für Android. Wichtige Prüfpunkte: Werden alle Inhalte sinnvoll vorgelesen? Werden Formulare korrekt beschriftet? Werden dynamische Updates angekündigt?
Was ist eslint-plugin-jsx-a11y und wie hilft es beim Accessibility Testing?
eslint-plugin-jsx-a11y ist ein ESLint-Plugin für React/JSX-Projekte, das häufige A11Y-Fehler statisch analysiert: fehlende Alt-Texte, falsche ARIA-Rollen, nicht-interaktive Klick-Handler auf Divs. Es zeigt Fehler direkt im Editor und verhindert, dass bekannte Probleme überhaupt committet werden.
Wie integriere ich Accessibility Testing in agile Sprints 2026?
NCA empfiehlt: A11Y-Kriterien in die Definition of Done aufnehmen, eslint-plugin-jsx-a11y als Pre-Commit-Hook, axe-core als eigene CI/CD-Stage nach Unit-Tests, und quartalsweise manuelle Audits durch Experten. So entsteht ein lückenloser Qualitätsprozess ohne Mehraufwand im Sprint-Alltag.
Ist Accessibility Testing für PHP-Projekte mit Symfony möglich?
Ja. Cypress mit axe-core testet das gerenderte HTML unabhängig vom Backend-Framework. NCA integriert Accessibility Testing direkt in bestehende Symfony/Cypress-Test-Suites. Typische Symfony-spezifische Prüfpunkte sind Form-Builder-Labels, Flash-Message-Ankündigungen und Twig-Template-Semantik.
Welche WCAG-Kriterien prüft Accessibility Testing automatisch 2026?
axe-core mit den Tags wcag2a, wcag2aa und wcag21aa prüft u.a.: Farbkontraste (1.4.3), Alt-Texte (1.1.1), Formular-Labels (1.3.1, 3.3.2), Sprach-Attribut (3.1.1), doppelte IDs (4.1.1), ARIA-Rollen (4.1.2) und Tastaturbedienbarkeit (2.1.1). Komplexe Kriterien wie Fokus-Reihenfolge oder Screenreader-Ausgabe erfordern manuelle Tests.
Wie hilft NCA beim Aufbau von Accessibility Testing 2026?
NCA richtet axe-core in bestehenden Cypress-Test-Suites ein, integriert Tests als eigene CI/CD-Stage, schult Entwicklungsteams in A11Y-konformem Coding und unterstützt bei der Erstellung der gesetzlich vorgeschriebenen Barrierefreiheitserklärung. Vereinbaren Sie eine kostenlose Erstberatung unter roland@nevercodealone.de.
Was ist A11Y? Definition, WCAG 2.2, BFSG-Pflichten und technische Umsetzung fuer barrierefreie Websites 2026.
Was ist ein Accessibility Audit? Ablauf, Tools, WCAG-Stufen und BFSG-Anforderungen 2026 – mit 12 FAQs und Praxis-Tipps für PHP-Projekte.
axe-core, Pa11y, cypress-axe und eslint-plugin-jsx-a11y: die Accessibility Testing Toolchain 2026 in vier Ebenen erklärt, von Shift Left bis zur CI Pipeline.
Was sind Accessible Forms? HTML-Attribute, ARIA, Fehlermeldungen und BFSG-konforme Implementierung barrierefreier Formulare 2026.
Was ist ein ACR? Accessibility Conformance Report nach VPAT 2.5 mit WCAG 2.2 und EN 301 549 als BFSG-konformer Compliance-Nachweis für digitale Produkte 2026.
Barrierefreie PDFs 2026: BFSG-Pflicht, PDF/UA-Standards, die 7 Kernanforderungen und Tools wie PAC 2024. Mit 12 FAQs und NCA-Consulting.
Alternative Eingabegeräte ermöglichen Menschen mit motorischen Einschränkungen die selbstständige Nutzung digitaler Systeme. NCA erklärt Typen, WCAG Anforderungen und Umsetzung 2026.
Was ein guter Alt Text 2026 leistet, wie er BFSG und WCAG erfüllt, welche KI Tools helfen und welche Fehler du vermeiden solltest. Im NCA Glossar.
Der ADA verpflichtet auch deutsche Unternehmen mit US-Geschäft zur digitalen Barrierefreiheit nach WCAG 2.1 Level AA. Pflichten, Klagerisiko und Vergleich zu EAA und BFSG.
ANDI Accessible Name Inspector 2026: Bookmarklet zur Accessibility Prüfung, Module, Vergleich zu axe und WAVE, BFSG und WCAG Konformität. Im NCA Glossar.
ARIA 2026: Rollen, Zustände und Patterns für barrierefreie Webanwendungen, fünf goldene Regeln, typische Fehler und WCAG 2.2 Konformität. Im NCA Glossar.
Audiodeskription 2026: was AD ist, wie sie BFSG und WCAG erfüllt, wann sie Pflicht ist und wie du Videos zugänglich machst. Im NCA Glossar.
Barrierefreie Formulare 2026: Best Practices, ARIA Patterns, typische Fehler und WCAG 2.2 Konformität nach BFSG. Mit Code Beispielen. Im NCA Glossar.
Erfahrt, wie ihr durch barrierefreie Headlines eure Webseite zugänglicher macht. Praxistipps und Beispiele für die Umsetzung nach WCAG 2.1.
Barrierefreie Icons nach WCAG 2.2: SVG, ARIA, Kontrast 3:1, Mindestgröße 24x24. Praxis und Code für inklusives Webdesign 2026.
Atkinson Hyperlegible Next, Inter, Lexend und Co: Die besten Open Source Schriftarten für barrierefreies Webdesign 2026, WCAG konform und BFSG ready
BFSG-Guide 2026: Wer ist betroffen, welche Strafen drohen, wie setzen Sie Barrierefreiheit um? Mit 13 FAQs, Umsetzungs-Roadmap und aktuellen Abmahnwellen-Infos.
Klassische CAPTCHAs blockieren Nutzer mit Behinderungen und gefährden die BFSG Konformität. Friendly Captcha, Cloudflare Turnstile und Altcha im Vergleich 2026.
CSS gestaltet barrierefreie Webseiten. Mit WCAG 2.2, focus-visible, prefers-reduced-motion und relativen Einheiten erreichst du Compliance und bessere UX für alle.
Erfahren Sie, wie Color Accessibility die Zugänglichkeit von digitalen Inhalten durch bewusste Farbwahl und Kontraste verbessert.
Erfahren Sie, was Compliance im Kontext der digitalen Barrierefreiheit bedeutet und wie Sie sicherstellen können, dass Ihre digitalen Produkte und konform sind.
Lernen Sie, was Contrast Enhancement bedeutet und wie es beiträgt, die Lesbarkeit von Texten für Menschen mit Sehbehinderungen zu verbessern.
Erfahren Sie mehr über die Deutsche Gebärdensprache (DGS) und ihre Rolle in der digitalen Barrierefreiheit auf Webseiten.
Erfahren Sie, wie die vier Grundprinzipien der digitalen Barrierefreiheit – Wahrnehmbar, Bedienbar, Verständlich und Robust (POUR) – die Entwicklung zugänglicher digitaler Inhalte leiten und wie Sie diese in Ihren Projekten umsetzen können.
Erfahren Sie, was digitale Barrierefreiheit bedeutet und wie Sie sicherstellen können, dass Ihre digitalen Inhalte für alle zugänglich sind.
Entdecken Sie, wie Diktieren die digitale Barrierefreiheit verbessert, indem es Nutzern ermöglicht, Text durch Spracheingabe zu generieren.
Verstehen Sie die Rolle des DOM in der digitalen Barrierefreiheit, wie es die Interaktion zwischen Webinhalten und assistiven Technologien ermöglicht,
Vertiefen Sie Ihr Verständnis für die Entwicklung barrierefreier digitaler Inhalte und erfahren Sie, wie Sie Ihre Websites für alle Nutzer zugänglich machen.
Der European Accessibility Act revolutioniert die digitale Barrierefreiheit in der EU. Erfahren Sie, wie Sie die gesetzlichen Anforderungen bis 2025 meistern.
Erfahre, was Farbkontrast ist, die Bedeutung für die digitale Barrierefreiheit und wie Sie sicherstellen können, dass Ihre digitalen Inhalte zugänglich sind.
Erfahre, was ein Farbkontrast-Rechner ist, warum er für barrierefreies Design entscheidend ist und wie Du ihn nutzt, um die Lesbarkeit Deiner Inhalte zu optimieren.
Erfahren Sie, wie die Trennung von Backend und Frontend die Entwicklung agiler, anpassungsfähiger digitaler Erlebnisse ermöglicht.
Entdecken Sie die Bedeutung von Informations- und Kommunikationstechnologie (ICT) für die digitale Barrierefreiheit, einschließlich Einblicke in Best Practices.
Erfahren Sie, wie dieser Prozess zur Förderung der digitalen Barrierefreiheit bei der Beschaffung von IT-Produkten und -Dienstleistungen beiträgt.
Inter ist die weitverbreitetste Open Source UI Schriftart. Inspirationsquelle für Vercels Geist, Next.js Default und Accessibility Workhorse.
Erfahren Sie, was Keyboard Navigation bedeutet und wie sie die Zugänglichkeit von Webseiten durch die reine Nutzung der Tastatur verbessert.
Vertiefen Sie Ihr Verständnis von Konformität im Kontext der digitalen Barrierefreiheit, entdecken Sie, warum sie entscheidend ist.
Erfahren Sie mehr über Leichte und Einfache Sprache, zwei wichtige Formen der sprachlichen Vereinfachung, die darauf abzielen, Texte für Menschen zugänglicher zu machen.
Erfahren Sie, wie eine sorgfältige Lesereihenfolge die digitale Barrierefreiheit verbessert und weshalb sie für Nutzer mit Sehbehinderungen unerlässlich ist.
Erfahren Sie, wie die logische Reihenfolge von Inhalten die digitale Barrierefreiheit beeinflusst und wie Sie eine konsistente Struktur in Projekten gewährleisten.
Erfahren Sie alles über die Nutzung von Lupenfunktionen zur Verbesserung der digitalen Barrierefreiheit, entdecken Sie, wie Vergrößerungswerkzeuge die Zugänglichkeit erhöhen, und lernen Sie Best Practices für die Implementierung in digitalen Inhalten kennen.
Was die MLBF ist, wie sie das BFSG durchsetzt und was Unternehmen 2026 zur Marktüberwachung der digitalen Barrierefreiheit wissen müssen.
Vertiefen Sie Ihr Verständnis der ARIA-Konzepte "Name, Rolle, Zustand" und deren Bedeutung für die digitale Barrierefreiheit, um Webinhalte für assistive Technologien optimiert zu gestalten.
Erfahren Sie, wie die korrekte Handhabung von nicht-textuellen Inhalten die digitale Barrierefreiheit verbessert.
Entdecken Sie, wie offene Beschriftungen (Open Captions) die Zugänglichkeit von Videoinhalten verbessern, indem sie eine permanente Untertitelung bieten, die für alle Zuschauer sichtbar ist, und lernen Sie, wie Sie Open Captions effektiv in Ihren digitalen Medien einsetzen können.
Entdecken Sie, warum Operabilität ein Schlüsselaspekt der digitalen Barrierefreiheit ist, und lernen Sie, wie Sie sicherstellen können, dass Ihre digitalen Inhalte und Anwendungen für alle Nutzer bedienbar sind.
Entdecken Sie, wie repräsentative Stichprobentestung zur Sicherstellung der digitalen Barrierefreiheit beiträgt.
Erfahren Sie, was Responsive Design ist und wie es durch flexible und adaptive Layouts die Zugänglichkeit von Webseiten verbessert.
Erfahren Sie, warum Robustheit ein zentrales Prinzip der digitalen Barrierefreiheit darstellt.
Erfahren Sie, was Semantic HTML ist und wie es die Webzugänglichkeit durch verbesserte Strukturierung und Bedeutung von Webinhalten unterstützt.
Entdecken Sie, wie der Silktide Accessibility Checker Ihre Website WCAG-konform und zugänglich für alle macht. Umfassende Prüfungen, einfache Lösungen.
Stark: Die All-in-One-Plattform für digitale Barrierefreiheit. Beschleunigen Sie Compliance und Workflows mit integrierten Tools für Designer und Entwickler.
Erfahren Sie, was Text-to-Speech ist, wie es funktioniert und wie es digitale Zugänglichkeit für Menschen mit Sehbehinderungen oder Leseschwierigkeiten erhöht.
Übergangsfristen zur Barrierefreiheit für Onlineshops: Gemäß dem Barrierefreiheitsstärkungsgesetz (BFSG) ist der 28. Juni 2025 Stichtag für E-commerce Seiten.
Entdecken Sie, wie Universal Design hilft, Produkte, Umgebungen und digitale Medien für alle Menschen nutzbar zu machen.
Erfahren Sie, was Closed Captions sind und wie sie die Zugänglichkeit von audiovisuellen Medien für Gehörlose und Schwerhörige verbessern.
Erfahren Sie mehr über Voice Recognition und wie sie die Interaktion mit digitalen Geräten für Menschen mit verschiedenen Behinderungen vereinfacht.
Erfahren Sie, was die Web Content Accessibility Guidelines (WCAG) sind und wie sie die digitale Zugänglichkeit fördern.