Ilmainen työkalu: Saavutettavuus
WCAG 2.2 -tarkistus
Näe, missä sivustosi on kunkin WCAG 2.2:n 55 A- ja AA-tason onnistumiskriteerin osalta. Jokainen kriteeri saa yhden neljästä tilasta, joten näet, mitä automaattiset testit kattoivat ja mitä ihmisen on vielä tarkistettava.
Ilmainen. Testaa enintään viisi keskeistä sivua noin minuutissa.
Mitä tämä työkalu tarkistaa
Jokainen A- ja AA-tason kriteeri
Kaikki 55 kriteeriä, 31 A-tasolla ja 24 AA-tasolla, WCAG:n järjestyksessä numeroineen ja nimineen. 4.1.1 Parsing on jätetty pois, koska WCAG 2.2 merkitsee sen vanhentuneeksi.
Automaattiset tulokset kriteereihin yhdistettyinä
axe-coren säännöt ajetaan syöttämälläsi sivulla ja enintään neljällä keskeisellä sivulla, ja jokainen tulos liitetään niihin onnistumiskriteereihin, joita sääntö testaa. Kriteeri hylätään, jos jokin sen säännöistä epäonnistuu yhdelläkin testatulla sivulla.
Näppäimistöhavainnot
Ensimmäisellä sivulla tehtävä 40 painalluksen Tab-testi tuottaa tietoa kriteeriin 2.1.2 No Keyboard Trap sekä heuristisena, tarkistettavaksi näytettävänä tietona kriteeriin 2.4.7 Focus Visible.
Ratkaisemattomat tulokset erillään
Kun sääntö ei pääse ratkaisuun, esimerkiksi kuvan päällä olevan tekstin kohdalla, sen kriteereille näytetään Tarkistettava eikä läpäisyä tai hylkäystä.
Näkyvät aukot pisteytyksen sijaan
Kriteerit, joita mikään automaattinen sääntö ei kata, merkitään manuaaliseksi tarkistukseksi (Manual check). Mitään ei keskiarvoisteta prosenttiluvuksi, joka peittäisi sen, mitä ei testattu.
Mitä se ei voi tarkistaa
- Ratkaista kriteerejä, jotka vaativat ihmisen harkintaa, kuten 1.4.10 Reflow, 1.4.11 Non-text Contrast, tekstityksiä ja kuvailutulkkausta koskevat 1.2-kriteerit sekä lomakevirheitä koskevat kriteerit 3.3.1:stä 3.3.4:ään.
- Muuttaa tilaa ”Ei automaattisia virheitä” (No automated failures) läpäisyksi. Sääntö, joka ajettiin ja läpäistiin, kattaa vain sen, mitä kyseinen sääntö testaa.
- Laatia vaatimustenmukaisuusväitettä, saavutettavuusselostetta tai VPAT-raporttia. Vaatimustenmukaisuuden arvioivat ihmiset kokonaisten sivujen ja kokonaisten prosessien perusteella.
- Testata AAA-tasoa tai muita kuin skannauksen viittä sivua.
- Päästä kirjautumisen tai kassan takana oleviin vaiheisiin, joissa yleensä sovelletaan esimerkiksi kriteerejä 3.3.7 Redundant Entry ja 3.3.8 Accessible Authentication.
Miksi sillä on merkitystä
WCAG on kirjoitettu onnistumiskriteereinä, ja niiden avulla auditoijat, hankintatiimit ja saavutettavuusselosteet kuvaavat sivustoa. Luettelo epäonnistuneista säännöistä kertoo, mitä korjata. Kriteerinäkymä kertoo, mitä sivustosta voi ja ei vielä voi sanoa.
Automaattiset työkalut ulottuvat alle puoleen A- ja AA-tason kriteereistä: axe-core yhdistää sääntönsä noin 25:een kriteeriin 55:stä. Muille ei ole luotettavaa automaattista testiä. Ohjelmisto ei pysty päättelemään, ehdottaako virheilmoitus korjausta (3.3.3) tai toimiiko sivu yhä 320 CSS-pikselin levyisenä (1.4.10). Kun ne listataan manuaalisina tarkistuksina, näkyy, missä testausta on vielä tehtävä.
Kriteeri voi jäädä täyttymättä, vaikka automaattisia virheitä ei löytyisi. Kriteerin 1.1.1 Non-text Content säännöt tarkistavat, että kuvalla on alt-teksti; ne eivät pysty päättelemään, että alt="IMG_2041.jpg" on hyödytön sille, joka ei näe kuvaa.
Miten tuloksia luetaan
- Hylätty
- Ainakin yksi tähän kriteeriin liittyvä automaattinen sääntö ei täyttynyt testatulla sivulla. Tämä on varma ongelma; saavutettavuustesti näyttää sen taustalla olevat elementit ja sivut.
- Tarkistettava
- Automaattinen tarkistus merkitsi jotain, mitä se ei pystynyt ratkaisemaan, kuten liukuvärin päällä olevan tekstin kontrastin. Ihmisen on katsottava elementti.
- Ei automaattisia virheitä
- Ainakin yksi kriteeriin liittyvä axe-coren sääntö ajettiin ja läpäistiin. Tämä ei ole vaatimustenmukaisuus: säännöt kattavat vain osan siitä, mitä kriteeri edellyttää.
- Ei testattavaa
- Kriteerille on automaattisia sääntöjä, mutta testatuilla sivuilla ei ollut niille mitään tarkistettavaa, esimerkiksi ei videota tekstityssäännöille tai ei lomakkeita nimiösäännöille. Testaa se käsin, jos sivustollasi on tällaista sisältöä muualla.
- Manuaalinen tarkistus
- Mikään automaattinen sääntö ei kata tätä kriteeriä, joten skannaus ei kerro siitä mitään suuntaan tai toiseen. Testaa se käsin.
- A-taso ja AA-taso
- A-taso on vähimmäistaso. WCAG:hen viittaavat säännökset ja linjaukset mainitsevat yleensä AA-tason, joka sisältää jokaisen A-tason kriteerin.
Miten yleisimmät ongelmat korjataan
4.1.2 Name, Role, Value hylätty
Mukautetut säätimet, jotka on rakennettu div- tai span-elementeistä (valikot, välilehdet, haitarit, kytkimet), eivät kerro avustavalle teknologialle, mitä ne ovat tai ovatko ne auki. Käytä mahdollisuuksien mukaan natiivia <button>-elementtiä, anna sille nimi ja aseta aria-expanded tai aria-pressed, jotta sen tila luetaan ääneen.
1.3.1 Info and Relationships hylätty
Rakenteen on oltava merkintäkoodissa, ei pelkästään tyyleissä. Käytä lihavoitujen kappaleiden sijaan oikeita h2- ja h3-elementtejä, luetteloille ul- tai ol-elementtejä, taulukon otsakkeille th-elementtejä scope-attribuutin kanssa ja lomakekenttien ryhmille nimiöitä tai fieldset-elementtiä legend-elementin kanssa.
3.1.1 Language of Page hylätty
Lisää html-elementtiin lang-attribuutti, esimerkiksi <html lang="en">. WordPress-teemat tulostavat sen yleensä language_attributes()-funktiolla; Shopify-teemassa käytä tiedostossa layout/theme.liquid koodia <html lang="{{ request.locale.iso_code }}">.
2.5.8 Target Size (Minimum) hylätty
Pieniin kuvakkeisiin ja tiiviisti asetettuihin linkkeihin on vaikea osua sormella. Tee jokaisesta kohteesta vähintään 24 × 24 CSS-pikseliä tai sijoita pienet kohteet niin, että kunkin keskelle asetettu 24 px:n ympyrä ei osu toiseen kohteeseen. Täyte (padding) suurentaa kohdetta muuttamatta kuvaketta.
Manuaalisten tarkistusten läpikäynti
Aloita nopeista. Kriteeriä 1.4.10 Reflow varten zoomaa 1280 px leveä selainikkuna 400 %:iin ja tarkista, ettei mikään vaadi vaakasuuntaista vieritystä. Kriteerejä 2.4.7 ja 2.4.11 varten käy sivu läpi Tab-näppäimellä ja tarkista, että fokus näkyy aina eikä jää koskaan kiinteän ylätunnisteen tai evästebannerin alle. Kriteeriä 3.3.1 varten lähetä lomake virheellisillä tiedoilla ja katso, kuvataanko virheet selkeästi tekstinä.
Kysymyksiä tästä työkalusta
Mitä WCAG 2.2 muutti A- ja AA-tasoilla?
Kuusi kriteeriä lisättiin: 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.2.6 Consistent Help, 3.3.7 Redundant Entry ja 3.3.8 Accessible Authentication (Minimum). WCAG 2.2 lisää myös kolme AAA-tason kriteeriä ja poistaa kriteerin 4.1.1 Parsing.
Miksi 4.1.1 Parsing ei ole luettelossa?
WCAG 2.2 merkitsee kriteerin 4.1.1 Parsing vanhentuneeksi ja poistaa sen, koska selaimet ja avustavat teknologiat eivät enää ole riippuvaisia sen kattamista merkintävirheistä. W3C:n mukaan WCAG 2.0:ssa ja 2.1:ssä sen katsotaan nyt aina täyttyvän HTML-sisällön osalta.
Kattaako WCAG 2.2:n täyttäminen myös WCAG 2.1:n?
Kyllä. WCAG 2.2 on taaksepäin yhteensopiva: sisältö, joka on 2.2:n mukainen, on myös 2.1:n ja 2.0:n mukainen. Testaus 2.2:ta vasten kattaa siis myös vanhemmat versiot, joihin monet säännökset ja linjaukset yhä viittaavat.
Voinko käyttää tätä saavutettavuusselosteen tai VPAT-raportin laatimiseen?
Se on lähtökohta, ei vaatimustenmukaisuusraportti. Seloste tai VPAT edellyttää, että jokainen kriteeri arvioidaan, useimmat niistä ihmisen toimesta; luettelot ”Manuaalinen tarkistus” (Manual check) ja ”Tarkistettava” näyttävät, mitkä sitä vielä vaativat.
Miksi niin monen kriteerin tilana on ”Manuaalinen tarkistus”?
Koska niille ei ole automaattista sääntöä. Kysymykset siitä, voiko aikarajaa pidentää, näkyykö ohje samassa paikassa jokaisella sivulla tai vaatiiko kirjautuminen muistitestin, riippuvat siitä, miten ihmiset käyttävät sivustoa, eivätkä merkintäkoodista, jonka sääntö voi lukea.
Lähteet
- W3C: Verkkosisällön saavutettavuusohjeet (WCAG) 2.2(avautuu uuteen välilehteen)
- W3C WAI: What’s New in WCAG 2.2 (WCAG 2.2:n uudistukset)(avautuu uuteen välilehteen)
- W3C WAI: Understanding WCAG 2.2 (kriteerien selitykset)(avautuu uuteen välilehteen)
- W3C WAI: How to Meet WCAG (pikaopas)(avautuu uuteen välilehteen)
- W3C WAI: Understanding 4.1.1 Parsing (vanhentunut ja poistettu)(avautuu uuteen välilehteen)
- W3C: WCAG-EM, verkkosivustojen saavutettavuuden arviointimenetelmä(avautuu uuteen välilehteen)
- Deque: axe-coren sääntöjen kuvaukset(avautuu uuteen välilehteen)
Aiheeseen liittyvät työkalut
- SaavutettavuusSaavutettavuustestiTestaa sivustosi oikeassa selaimessa WCAG 2.2:n A- ja AA-tason sääntöjä vasten ja näe jokainen este elementin, sivun ja merkityksen kanssa.Avaa työkalu
- TekniikkaIlmainen verkkosivuston auditointiYksi skannaus saavutettavuudesta, SEO:sta, nopeudesta, konversiosta, tietoturvasta ja sähköpostiasetuksista sekä kunkin alueen tärkeimmät havainnot.Avaa työkalu
Tarvitsetko korjaukset etkä vain havaintoja?
Saavutettavuusraportti ($174, kertamaksu) jatkaa täydestä ilmaisesta skannauksesta ja lisää sivuja, jokaisen havainnon vaatiman muutoksen, PDF-tiedoston ja uusintatestit korjaustesi varmistamiseen.