Vi byggde en WCAG-scanner och upptäckte varför Lighthouse inte räcker
Problemet med ett "bra betyg"
De flesta utvecklare som jobbar med tillgänglighet känner till Lighthouse. Du kör en audit, får ett grönt tal, och känner dig trygg. Men det finns ett fundamentalt problem med hur Lighthouse räknar.
Lighthouse accessibility-audit bygger på ett viktat medelvärde. Den räknar andelen godkända kontroller av alla den kör, viktat efter impact. Det innebär att en sida med 500 godkända regler och 5 underkända fortfarande kan landa på 95+. Felen späds ut av allt som fungerar.
Det är en rimlig modell om frågan är "hur bra är användarupplevelsen generellt?"
Men det är en farlig modell för juridisk compliance.
I DOS-lagen, EN 301 549 och European Accessibility Act handlar frågan inte om hur stor andel av sidan som fungerar, utan om det finns ett specifikt hinder som utestänger en användare. Svaret på den frågan är binärt per krav. Antingen uppfyller du WCAG 1.4.3 (kontrast) eller så gör du det inte. Att du samtidigt klarar 200 andra kriterier ändrar inte den juridiska exponeringen.
Lighthouse svarar på rätt fråga för utvecklare som vill ha en snabb överblick. Men den svarar på fel fråga för den som vill veta: "Löper vi risk för tillsyn från DIGG?"
Det är den frågan vår motor är byggd för att besvara.
Vad vi byggde
Hela projektet är open source och strukturerat som en npm-monorepo med tre paket.
@holmdigital/engine är själva scanning-motorn med tillhörande CLI. Den kör axe-core 4.11 och html-validate i headless Chromium via Puppeteer, scannar en URL, mappar varje WCAG-violation till juridiska ramverk och producerar en compliance-rapport med riskbedömning. Ramverken som stöds inkluderar DOS-lagen, EN 301 549, European Accessibility Act, Section 508 och DDA, bland andra.
@holmdigital/standards är en regulatorisk databas, en maskinläsbar mappning av WCAG-kriterier till nationell lagstiftning. Den innehåller enforcement bodies som DIGG, Logius och AHRC, riskbedömningar och juridisk kontext per regel. Tänk dig ett "Rosetta Stone" mellan tekniska tillgänglighetsregler och juridiska krav.
@holmdigital/components är ett React-komponentbibliotek med tillgänglighetsredogörelser, badges och compliance-widgetar. Det renderar juridiskt korrekta statements anpassade per locale.
Totalt stöds 9 språk och 17 jurisdiktioner, från Sverige och DOS-lagen till Australien och DDA.
Stacken
Vi valde en genomgående TypeScript-stack (5.7+) med tsup för bygge (CJS + ESM + DTS), Vitest för testning och npm workspaces för monorepo-hantering. Scanning-motorn drivs av axe-core och html-validate under huven, med Puppeteer för rendering. Komponenterna är byggda i React 18.
Inget exotiskt. Poängen var att hålla stacken tråkig nog att vara underhållbar, och tillräckligt vältestad för att vara pålitlig.
Den regulatoriska mappningen
Den mest tidskrävande delen av projektet var inte scanning-motorn. Det var den juridiska mappningen. Det finns 46 WCAG-regler som behöver kopplas till krav i 17 jurisdiktioner. Varje koppling kräver korsreferenser mellan WCAG-kriterier, EN 301 549-klausuler och nationella lagar. Det är hundratals datapunkter, och varje enskild mappning behöver vara verifierad mot faktisk lagtext och myndigheternas egen dokumentation.
Det är också här värdet ligger. Att köra axe-core kan vem som helst göra. Att veta att en specifik violation innebär en risk under DOS-lagen, med DIGG som tillsynsmyndighet, och att samma violation faller under DDA i Australien med AHRC som enforcement body. Det kräver en databas som inte finns någon annanstans i open source.
Varför vi delar det som open source
Tillgänglighet borde inte vara en konkurrensfördel. Det borde vara en baseline. Genom att göra motorn och den regulatoriska databasen öppen hoppas vi att fler verktyg kan bygga på samma grund, att fler organisationer kan förstå sin juridiska exponering, och att branschen som helhet kan röra sig från "vi fick 95 i Lighthouse" till "vi har noll blockerande violations per WCAG-krav."
Testa själv
Installera motorn och kör en scan på valfri sajt:
npm install @holmdigital/engine
npx hd-a11y-scan
Hela kodbasen finns på GitHub, och vår wiki innehåller komplett dokumentation, designfilosofi och compliance-guider.
Vi vill ha feedback. Kör den mot era sajter, rapportera buggar, ifrågasätt våra juridiska mappningar. Det är så open source blir bättre.