HTML Accessibility Auditor

De flesta snabba tillgänglighetskontroller är antingen en ytlig nyckelordsskanning eller ett tungt bibliotek man måste lita på som en svart låda. Det här verktyget tar en tredje väg: det tolkar HTML-koden du klistrar in med webbläsarens egen inbyggda DOMParser – ingen axe-core, inget externt tillgänglighetsbibliotek, inget som laddas ner – 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 granskningsbar och att granskningen körs helt inuti din webbläsare: koden du klistrar in, och alla färgpar du testar, laddas aldrig upp eller skickas någonstans.

Kontrollerna täcker de problem som oftast dyker upp på riktiga sidor: <img>-element utan något alt-attribut alls (ett äkta WCAG-fel, skilt från det medvetet tomma alt="" som används för dekorativa bilder, vilket korrekt lämnas oflaggat), formulärkontroller utan något sätt för hjälpmedel att veta vad de är till för (kontrolleras mot varje verklig väg till en etikett – ett matchande <label for>, att vara omsluten av en <label>, eller ett aria-label/aria-labelledby-attribut), rubriknivåer som hoppar utan förvarning (en <h1> direkt till en <h3>, eller ett dokument utan någon <h1> alls, eller fler än en), länkar utan href eller med vag, kontextlös text som "klicka här" eller "läs mer", och ett saknat lang-attribut när ett fullständigt HTML-dokument (inte bara ett fragment) klistras in.

Den utmärkande detaljen är äkta kontrastmatematik, inte en ytlig heuristik som "ser läsbar ut". För varje element som har en inline color och background-color läser verktyget båda värdena, omvandlar dem till verkliga RGB-tal via webbläsarens egen CSS-motor (så att hex, rgb(), hsl() och namngivna färger som "tomato" alla fungerar likadant) och beräknar den exakta relativa luminansen enligt WCAG för varje – L = 0.2126×R + 0.7152×G + 0.0722×B, där varje kanal först gammakorrigeras 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 font-size och font-weight avgör om de striktare trösklarna för "normal text" eller de generösare för "large text" (18pt+, eller 14pt+ fetstil) gäller, och resultatet kontrolleras samtidigt mot alla fyra riktiga WCAG-numren: 4,5:1 och 3:1 för AA, 7:1 och 4,5:1 för AAA – aldrig ihopbakat till ett enda falskt godkänt/underkänt-besked.

Detta är en medvetet ärlig, pragmatisk delmängd av en fullständig tillgänglighetsgranskning, inte ett certifieringsverktyg: det utvärderar inte JavaScript-driven interaktivitet, ARIA-widgetmönster utöver grundläggande etikettering, tangentbordsfokusordning eller något som kräver att sidan faktiskt renderas och körs. Se det som en snabb första genomgång som fångar några av de vanligaste och mest betydelsefulla WCAG-felen – saknad alt-text, oetiketterade fält, trasig rubrikhierarki, text med låg kontrast och vaga länkar – innan en sida publiceras, vid sidan av (inte istället för) en fullständig manuell granskning eller ett dedikerat granskningsverktyg för allt som ska till produktion.