HTML Accessibility Auditor

De flesta snabba tillgänglighetskontrollerna är antingen en ytlig sökordsskanning eller ett tungviktsbibliotek som du måste lita på som en svart låda. Det här verktyget tar en tredje väg: det analyserar vilken HTML du än klistrar in med webbläsarens egen inbyggda DOMParser – ingen axe-core, inget externt tillgänglighetsbibliotek, inget nedladdat – och går sedan igenom det resulterande DOM-trädet med en uppsättning handskrivna kontroller som speglar vanliga, verkliga WCAG 2.1-felmönster. Det betyder att logiken är fullt inspekterbar och granskningen körs helt i din webbläsare: markeringen du klistrar in, och alla färgpar du testar, laddas aldrig upp eller skickas någonstans.

Kontrollerna täcker de fel som oftast dyker upp på riktiga sidor: <img>-element utan något alt-attribut alls (ett äkta WCAG-fel, skilt från det avsiktligt tomma alt="" som används för dekorativa bilder, som korrekt lämnas oflaggade), bildar kontroller utan möjlighet för hjälpmedel att veta vad de är till för (kontrolleras mot varje riktig väg till en etikett, som <markeras i en riktig väg till en etikett). <label>, eller ett aria-label/aria-labeledby-attribut), rubriknivåer som hoppar utan förvarning (en <h1> direkt till en <h3>, eller ett dokument utan <h1> alls, eller mer än ett), länkar utan href eller med vag text utanför sammanhanget som "klicka här" eller "läs mer" och när ett helt tidigare dokument saknas (inte bara ett gammalt fragment i HTML).

Det enastående stycket är äkta kontrastmatematik, inte en ytlig heuristik som ser läsbar ut. För alla element som har en inline-färg och bakgrundsfärg, läser verktyget båda värdena, löser dem till riktiga RGB-tal via webbläsarens egen CSS-motor (så hex, rgb(), hsl() och namngivna färger som "tomat" fungerar alla identiskt) och beräknar den exakta WCAG-relativa luminansen för var och en — L = +7×15202G 0,0722×B, med varje kanal gammakorrigerad först med den verkliga sRGB-överföringskurvan — innan de kombineras till den officiella formeln för kontrastförhållande, (ljusare L + 0,05) / (mörkare L + 0,05). Elementets egen teckenstorlek och teckensnittsvikt avgör om de strängare tröskelvärdena för "normal text" eller de mer milda tröskelvärdena för "stor text" (18pt+, eller 14pt+ fetstil) gäller, och resultatet kontrolleras mot alla fyra riktiga WCAG-talen på en gång: 4,5:1 och 3:1 för AA1 och AA: AA: 4,5 aldrig i kolumn a1 och AA: 47:5. enstaka falska bra/dåliga dom.

Detta är en medvetet ärlig, pragmatisk delmängd av en fullständig tillgänglighetsrevision, inte ett certifieringsverktyg: det utvärderar inte JavaScript-driven interaktivitet, ARIA-widgetmönster utöver grundläggande märkning, tangentbordsfokusordning eller något som kräver att sidan faktiskt renderas och körs. Behandla det som ett snabbt första pass som fångar upp några av de vanligaste och mest följdriktiga WCAG-felen – saknad alt-text, omärkta fält, bruten rubrikhierarki, text med låg kontrast och vaga länkar – innan en sida skickas, tillsammans med (inte istället för) en fullständig manuell granskning eller ett dedikerat granskningsverktyg för allt som skickas till produktion.