Tilgængelighedsinspektor kører automatiserede WCAG 2.1 Niveau AA-tjek på en webside og producerer en kategoriseret rapport over tilgængelighedsproblemer. Registrer utilstrækkelige farvekontrastverholdold, manglende billede-alt-tekst, upassende ARIA-roller og -attributter, manglende formulaetiketter, tastaturnavigationsproblemer og manglende landmærkeregioner — med et-klik-elementfremhævning for hvert fundet problem.
Webtilgængelighed er ikke valgfri — det er et lovkrav i mange jurisdiktioner og afgørende for de 15% af verdensbefolkningen, der lever med handicap. Alligevel er tilgængelighedsproblemer usynlige under normal udvikling og test. En knap kan se fin ud, men være fuldstændig utilgængelig for skærmlæsere, fordi den er et stiliseret div uden en rolle-attribut. Tekst kan være læselig for dig, men ikke opfylde kontrastkrav for brugere med synsnedsættelse. Tilgængelighedsinspektor afslører disse usynlige problemer automatisk. Det tjekker snesevis af WCAG 2.1 Niveau AA-kriterier, herunder farvekontrastverholdold (minimum 4,5:1 for normal tekst, 3:1 for stor tekst), manglende alt-tekst på billeder, manglende etiketter på forminput, upassende ARIA-roller og -attributter, manglende dokumentlandmærker og tastaturfokasindikatorer. Hvert problem inkluderer det berørte element, det specifikke WCAG-kriterium, der er overtrådt, og en anbefaling om, hvordan det løses. Klik på et problem for at fremhæve elementet på siden.
Kører automatiserede tjek mod WCAG 2.1 Niveau AA's succeskriterier, herunder opfattelighed, operabilitet, forståelighed og robusthedskategorier. Hvert tjek viser det specifikke kriterium (f.eks. 1.4.3 Kontrast, 1.1.1 Ikke-tekstindhold) og godkendt/fejlet status.
Beregner kontrastforholdet mellem tekst og baggrundsfarver for hvert tekstelement på siden. Markerer elementer under 4,5:1 for normal tekst eller 3:1 for stor tekst (18px+ eller 14px+ fed). Viser det faktiske forhold og det krævede minimum.
Scanner alle img-, svg- og billedrollelementer. Markerer manglende alt-attributter, tom alt på ikke-dekorative billeder og overly generisk alt-tekst. Foreslår, om hvert billede behøver beskrivende alt, tom alt (dekorativ) eller role=presentation.
Tjekker for upassende ARIA-rollebrug (roller på forkerte elementer), manglende påkrævede ARIA-attributter (f.eks. aria-label på ikonknapper), duplikerede ID'er refereret af aria-labelledby og manglende landmærkeregioner (ingen main, ingen nav). Anbefaler semantiske HTML-alternativer.
Sikrer, at alle forminput (tekst, e-mail, adgangskode, afkrydsningsfelt, vælg) har en tilknyttet etiket — enten via et etiketelement med matchende for/id, aria-label eller aria-labelledby. Umærkede input er utilgængelige for skærmlæsere.
Problemer kategoriseres som Fejl (skal rettes — adgangsbarrierer), Advarsler (bør rettes — potentielle barrierer) og Godkendte (bekræftet tilgængelige). Fejltæller vises fremtrædende. Klik på et problem for at fremhæve det berørte element på siden.
Inden du lancerer en ny side eller funktion, kør Tilgængeligheds-inspektoren for at fange problemer tidligt. Manglende alt-tekst, umærkede formularfelter og kontrastovertrædelser er nemme at rette under udvikling, men dyre at opdage i produktion.
Mange jurisdiktioner kræver WCAG 2.1 Niveau AA-overholdelse (ADA i USA, EAA i EU). Kør inspektoren på dine offentlige sider for at identificere overholdelsesgab, inden de bliver juridiske risici.
Inkluder tilgængeligheds-tjek som en del af din QA-proces. Efter visuel QA og funktionel test, kør Tilgængeligheds-inspektoren for at verificere, at implementeringen ikke introducerer tilgængeligheds-regrationer.
Kør inspektoren på dit nuværende sted under et teammmøde for at vise rigtige tilgængeligheds-problemer. Den visuelle fremhævning og klare forklaringer hjælper udviklere med at forstå, hvad tilgængeligt markup ser ud og hvorfor det er vigtigt.
Auditér sider, der inkluderer tredjepartswidgets, indlejret indhold eller brugergenereret HTML. Disse kilder introducerer ofte tilgængeligheds-problemer (manglende alt-tekst, kontrastovertrædelser), som du stadig er ansvarlig for som sideejeren.
Åbn den flydende DevSuite Pro-dock, og klik på Tilgængelighedsinspektor-ikonet. Værktøjet scanner sidens DOM for tilgængelighedsproblemer.
En kategoriseret rapport vises med Fejl (rød), Advarsler (gul) og Godkendte (grøn). Hver sektion viser specifikke problemer med berørte elementer og WCAG-kriteriereferencer.
Klik på et problem for at fremhæve det berørte element på siden med en farvet kant og rulle til det. Forbindelsen mellem rapporten og DOM-elementet er øjeblikkelig.
Hvert problem inkluderer en specifik anbefaling: Tilføj alt-tekst, der beskriver billedindholdet, Øg skrifttypefarvekontrasten til mindst 4,5:1, Tilføj et etiket-element med for=email.
Foretag ændringer i din kode, genindlæs siden og kør auditten igen. Fejltælleren bør falde, efterhånden som problemer løses. Stræb efter nul fejl.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
