Inspektor pristupačnosti provodi automatske WCAG 2.1 Level AA provjere na bilo kojoj web stranici i generira kategorizirani izvještaj o problemima s pristupačnošću. Otkrijte nedovoljan color contrast ratio, nedostajući alt text na slikama, nepravilnu uporabu ARIA uloga i atributa, nedostajuće oznake obrazaca, probleme s navigacijom tipkovnicom te nedostajuće landmark regije — s isticanjem elementa jednim klikom za svaki pronađeni problem.
Pristupačnost weba nije opcija — zakonski je zahtjev u mnogim jurisdikcijama i neophodna je za 15% svjetskog stanovništva koje živi s invaliditetom. Ipak, problemi s pristupačnošću nevidljivi su tijekom normalnog razvoja i testiranja. Gumb može izgledati ispravno, ali biti potpuno nedostupan screen readerima jer je stiliziran div bez atributa role. Tekst vama može biti čitljiv, ali ne zadovoljavati contrast ratio zahtjeve za korisnike s oštećenjem vida. Inspektor pristupačnosti automatski otkriva ove nevidljive probleme. Provjerava desetke WCAG 2.1 Level AA kriterija, uključujući color contrast ratios (minimalno 4.5:1 za normalni tekst, 3:1 za veliki tekst), nedostajući alt text na slikama, nedostajuće oznake na elementima obrazaca, nepravilne ARIA uloge i atribute, nedostajuće landmark regije dokumenta (nav, main, footer) te indikatore fokusa tipkovnice. Svaki problem uključuje zahvaćeni element, specifični WCAG kriterij koji je prekršen i preporuku za ispravljanje. Kliknite bilo koji problem kako biste istaknuli element na stranici.
Provodi automatske provjere prema WCAG 2.1 Level AA kriterijima uspjeha, uključujući kategorije perceptivnosti, operabilnosti, razumljivosti i robusnosti. Svaka provjera prikazuje specifični kriterij (npr. 1.4.3 Contrast, 1.1.1 Non-text Content) i status prolaz/pad.
Izračunava contrast ratio između teksta i boja pozadine za svaki tekstualni element na stranici. Označava elemente ispod 4.5:1 za normalni tekst ili 3:1 za veliki tekst (18px+ ili 14px+ bold). Prikazuje stvarni omjer i minimalno potreban.
Skenira svaki img, svg i element s ulogom slike. Označava nedostajuće atribute alt, prazan alt na neukrasnim slikama i pretjerano generičan alt text ("image", "photo"). Predlaže treba li svakoj slici opisni alt, prazan alt (ukrasna) ili role="presentation".
Provjerava nepravilnu uporabu ARIA uloga (uloge na krivim elementima), nedostajuće obvezne ARIA atribute (npr. aria-label na ikonskim gumbima), duplirane ID-ove na koje se referira aria-labelledby te nedostajuće landmark regije (bez main, bez nav). Preporučuje semantičke HTML alternative.
Osigurava da svaki element obrasca (text, email, password, checkbox, select) ima pridruženu oznaku — putem elementa label s odgovarajućim for/id, aria-label ili aria-labelledby. Neoznačeni elementi nedostupni su screen readerima.
Problemi su kategorizirani kao Pogreške (obavezno ispraviti — prepreke pristupu), Upozorenja (trebalo bi ispraviti — potencijalne prepreke) i Prolazi (potvrđeno pristupačno). Broj pogrešaka istaknuto je prikazan. Kliknite bilo koji problem kako biste istaknuli zahvaćeni element na stranici.
Prije lansiranja nove stranice ili funkcionalnosti, pokrenite Inspektor pristupačnosti kako biste rano uočili probleme. Nedostajući alt text, neoznačena polja obrasca i kršenja kontrasta lako je ispraviti tijekom razvoja, ali skupo otkriti u produkciji.
Mnoge jurisdikcije zahtijevaju usklađenost s WCAG 2.1 Level AA (ADA u SAD-u, EAA u EU-u). Pokrenite inspektor na javno dostupnim stranicama kako biste identificirali nedostatke u usklađenosti prije nego postanu pravni rizici.
Uključite provjeru pristupačnosti kao dio svog QA procesa. Nakon vizualnog QA i funkcionalnog testiranja, pokrenite Inspektor pristupačnosti kako biste provjerili da implementacija ne uvodi regresije pristupačnosti.
Pokrenite inspektor na svom trenutnom sajtu tijekom timskog sastanka kako biste prikazali stvarne probleme s pristupačnošću. Vizualno isticanje i jasna objašnjenja pomažu programerima razumjeti kako izgleda pristupačan markup i zašto je to važno.
Revidirajte stranice koje uključuju widgete trećih strana, ugrađeni sadržaj ili HTML koji generiraju korisnici. Ovi izvori često uvode probleme s pristupačnošću (nedostajući alt text, kršenja kontrasta) za koje ste ipak odgovorni kao vlasnik stranice.
Otvorite DevSuite Pro plutajući dock i kliknite ikonu Inspektora pristupačnosti. Alat skenira DOM stranice radi problema s pristupačnošću.
Prikazuje se kategorizirani izvještaj s Pogreškama (crveno), Upozorenjima (žuto) i Prolazima (zeleno). Svaki odjeljak navodi specifične probleme sa zahvaćenim elementima i referencama na WCAG kriterije.
Kliknite bilo koji problem kako biste istaknuli zahvaćeni element na stranici obojenim rubom i pomakli se do njega. Veza između izvještaja i DOM elementa je neposredna.
Svaki problem uključuje specifičnu preporuku: "Dodajte alt text koji opisuje sadržaj slike", "Povećajte kontrast boje teksta na najmanje 4.5:1", "Dodajte element label s for='email'".
Napravite izmjene u kodu, osvježite stranicu i ponovo pokrenite reviziju. Broj pogrešaka trebao bi se smanjivati kako se problemi rješavaju. Ciljajte na nula pogrešaka.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
