Accessibility Inspector suorittaa automaattisia WCAG 2.1 Level AA -tarkistuksia mille tahansa verkkosivulle ja tuottaa luokitellun raportin saavutettavuusongelmista. Tunnista riittämättömät värikontrastisuhteet, puuttuvat kuvan alt-tekstit, virheelliset ARIA-roolit ja -attribuutit, puuttuvat lomake-etiketit, näppäimistönavigointiongelmat ja puuttuvat maamerkkialueet — yhdellä napsautuksella korostettuna jokaisesta löydetystä ongelmasta.
Verkkosaavutettavuus ei ole vapaaehtoista — se on lakisääteinen vaatimus monilla lainkäyttöalueilla ja välttämätön 15 prosentille maailman väestöstä, joka elää jonkinlaisen vamman kanssa. Saavutettavuusongelmat ovat kuitenkin näkymättömiä tavallisen kehitystyön ja testauksen aikana. Painike saattaa näyttää hyvältä, mutta olla täysin tavoittamattomissa ruudunlukijoille, koska se on tyylitelty div-elementti ilman role-attribuuttia. Teksti saattaa olla sinulle luettavaa, mutta epäonnistua kontrastivaatimuksissa heikkonäköisten käyttäjien kohdalla. Accessibility Inspector tuo nämä näkymättömät ongelmat automaattisesti esille. Se tarkistaa kymmeniä WCAG 2.1 Level AA -kriteereitä, kuten värikontrastisuhteet (vähintään 4.5:1 normaalille tekstille, 3:1 suurelle tekstille), puuttuvat alt-tekstit kuvissa, puuttuvat etiketit lomakekentissä, virheelliset ARIA-roolit ja -attribuutit, puuttuvat asiakirjan maamerkit (nav, main, footer) sekä näppäimistön kohdistusilmaisimet. Jokainen ongelma sisältää kyseisen elementin, rikotun WCAG-kriteerin ja suosituksen sen korjaamiseksi. Napsauta mitä tahansa ongelmaa korostaaksesi elementin sivulla.
Suorittaa automaattisia tarkistuksia WCAG 2.1 Level AA -menestyskriteerien perusteella, mukaan lukien havaittavuus-, käytettävyys-, ymmärrettävyys- ja vikasietoisuuskategoriat. Jokainen tarkistus näyttää kyseisen kriteerin (esim. 1.4.3 Kontrasti, 1.1.1 Muu kuin tekstisisältö) sekä hyväksytty/hylätty-tilan.
Laskee tekstin ja taustavärien välisen kontrastisuhteen jokaiselle sivun tekstielementille. Merkitsee elementit, jotka alittavat 4.5:1 normaalille tekstille tai 3:1 suurelle tekstille (18 px tai enemmän, tai 14 px tai enemmän lihavoidulla). Näyttää todellisen suhteen ja vaaditun vähimmäisarvon.
Skannaa jokaisen img-, svg- ja image-role-elementin. Merkitsee puuttuvat alt-attribuutit, tyhjät alt-tekstit ei-koristeellisissa kuvissa ja liian yleiset alt-tekstit ("image", "photo"). Ehdottaa, tarvitseeko kukin kuva kuvailevaa alt-tekstiä, tyhjää alt-tekstiä (koristekuva) vai role="presentation".
Tarkistaa virheellisen ARIA-roolin käytön (roolit väärissä elementeissä), puuttuvat pakolliset ARIA-attribuutit (esim. aria-label kuvakepainikkeissa), aria-labelledby-viittauksissa olevat päällekkäiset tunnisteet sekä puuttuvat maamerkkialueet (ei main-elementtiä, ei nav-elementtiä). Suosittelee semanttisia HTML-vaihtoehtoja.
Varmistaa, että jokaisella lomake-elementillä (text, email, password, checkbox, select) on siihen liitetty etiketti — joko for/id-parin avulla, aria-label- tai aria-labelledby-attribuutilla. Etiketittömät kentät ovat tavoittamattomissa ruudunlukijoille.
Ongelmat luokitellaan seuraavasti: Virheet (korjattava — esteet pääsylle), Varoitukset (tulisi korjata — mahdolliset esteet) ja Hyväksytyt (saavutettavuus vahvistettu). Virheiden määrä näkyy selkeästi. Napsauta mitä tahansa ongelmaa korostaaksesi kyseisen elementin sivulla.
Ennen uuden sivun tai ominaisuuden julkaisua aja Accessibility Inspector havaitaksesi ongelmat ajoissa. Puuttuvat alt-tekstit, etiketittömät lomakekentät ja kontrastirikkomukset on helppo korjata kehitysvaiheessa, mutta kalliita löytää tuotannossa.
Monet lainkäyttöalueet edellyttävät WCAG 2.1 Level AA -vaatimustenmukaisuutta (ADA Yhdysvalloissa, EAA EU:ssa). Aja tarkastaja julkisilla sivuillasi tunnistaaksesi vaatimustenmukaisuuspuutteet ennen kuin niistä tulee oikeudellisia riskejä.
Sisällytä saavutettavuustarkistus osaksi QA-prosessiasi. Visuaalisen QA:n ja toiminnallisen testauksen jälkeen aja Accessibility Inspector varmistaaksesi, ettei toteutus tuo mukanaan saavutettavuusregressioita.
Aja tarkastaja nykyisellä sivustollasi tiimikokouksessa näyttääksesi todellisia saavutettavuusongelmia. Visuaalinen korostus ja selkeät selitykset auttavat kehittäjiä ymmärtämään, miltä saavutettava merkintäkoodi näyttää ja miksi sillä on merkitystä.
Tarkasta sivuja, jotka sisältävät kolmannen osapuolen widgettejä, upotettua sisältöä tai käyttäjien luomaa HTML:ää. Nämä lähteet tuovat usein mukanaan saavutettavuusongelmia (puuttuvat alt-tekstit, kontrastirikkomukset), joista olet silti vastuussa sivun omistajana.
Avaa DevSuite Pro -kelluva telakka ja napsauta Accessibility Inspector -kuvaketta. Työkalu skannaa sivun DOM:n saavutettavuusongelmien varalta.
Luokiteltu raportti ilmestyy Virheillä (punainen), Varoituksilla (keltainen) ja Hyväksytyillä (vihreä). Jokainen osio luettelee yksittäiset ongelmat kyseisten elementtien ja WCAG-kriteereiden viittauksineen.
Napsauta mitä tahansa ongelmaa korostaaksesi kyseisen elementin sivulla värirajauksen avulla ja vierittääksesi siihen. Yhteys raportin ja DOM-elementin välillä on välitön.
Jokainen ongelma sisältää tarkan suosituksen: "Lisää alt-teksti, joka kuvaa kuvan sisältöä", "Kasvata tekstin värikontrastia vähintään arvoon 4.5:1", "Lisää label-elementti, jossa on for='email'".
Tee muutoksia koodissasi, lataa sivu uudelleen ja suorita tarkastus uudelleen. Virheiden määrän pitäisi vähentyä, kun ongelmat ratkaistaan. Tavoitteena on nolla virhettä.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
