Ilmainen työkalu: Saavutettavuus

Verkkosivuston saavutettavuustesti

Syötä osoitteesi, niin testaamme sivun ja enintään neljä muuta keskeistä sivua oikeassa selaimessa WCAG 2.2:n A- ja AA-tason sääntöjä vasten. Jokaisesta esteestä näet elementin, sivun, kuvakaappauksen ja selityksen siitä, keihin se vaikuttaa.

Ilmainen. Testaa enintään viisi keskeistä sivua noin minuutissa.

Mitä tämä työkalu tarkistaa

  • Viisi sivua, jotka edustavat sivustoasi

    Syöttämäsi sivu sekä enintään neljä sen linkeistä sivustotyypin mukaan valittua sivua. Verkkokaupassa tämä tarkoittaa kokoelmaa, tuotetta, ostoskoria ja sisältösivua; muilla sivustoilla esimerkiksi hinnasto-, yhteystieto-, artikkeli- tai palvelusivua. Sivupohjat toistuvat, joten yksi tuotesivu näyttää yleensä kaikkien tuotesivujen ongelmat.

  • WCAG-säännöt renderöidyllä sivulla

    Jokainen sivu ladataan Chromiumissa koossa 1366 × 900, ja axe-core, Dequen avoimen lähdekoodin sääntömoottori, ajaa WCAG 2.0:n, 2.1:n ja 2.2:n A- ja AA-tason sääntönsä sen jälkeen, kun sivun skriptit on suoritettu. Näin löytyvät myös ongelmat, jotka teema tai sovellus luo vasta, kun sivu rakentuu selaimessa.

  • Vakavuus ja onnistumiskriteerit

    Jokaisesta säännöstä, jota sivusto ei läpäise, näytetään sen vakavuus (kriittinen, vakava, kohtalainen tai vähäinen), WCAG-onnistumiskriteerit, joihin se liittyy, sekä se, kuinka moneen elementtiin ja sivuun se vaikuttaa.

  • Virheellinen elementti korostettuna

    Esimerkkielementin HTML-koodi ja kuvakaappaus sivusta, jossa elementti on rajattu, jotta sinä tai kehittäjäsi löydätte sen sivupohjasta arvailematta.

  • Kohdat, joista ihmisen on päätettävä

    Kun axe-core löytää jotain, mitä se ei pysty ratkaisemaan, kuten tekstiä taustakuvan päällä, jonka kontrastia se ei voi mitata, kohta merkitään tarkistettavaksi (needs review). Sitä ei koskaan lasketa virheeksi.

  • Näppäimistötesti

    Ensimmäisellä sivulla painamme Tab-näppäintä 40 kertaa ja kirjaamme, minne fokus siirtyy: liikkuuko se lainkaan, jääkö se kiertämään silmukkaan (usein evästebannerin sisällä), onko ensimmäinen pysähdys ohituslinkki ja missä fokusoiduissa elementeissä fokusilmaisin ei näy. Viimeinen tarkistus on heuristinen, joten se näytetään tarkistettavana (needs review).

Mitä se ei voi tarkistaa

  • Kuulla, mitä ruudunlukuohjelma lukee ääneen. Ohjelmisto voi varmistaa, että painikkeella on nimi, mutta ei sitä, onko nimi järkevä ääneen luettuna.
  • Arvioida videon ja äänen tekstityksiä, tekstivastineita tai kuvailutulkkausta.
  • Arvioida kognitiivisia ja sisältöön liittyviä kriteerejä, kuten ovatko ohjeet selkeitä tai auttavatko virheilmoitukset käyttäjää korjaamaan tilanteen.
  • Testata kirjautumisen, salasanan tai bottisuojauksen takana olevia sivuja tai käydä läpi kassaa.
  • Kertoa, onko sivustosi WCAG:n mukainen tai noudattaako se mitään lakia. Automaattiset säännöt löytävät osan ongelmista; loput vaativat ihmisen arviota.

Miksi sillä on merkitystä

Saavutettavuusesteet ovat usein pieniä sivupohjavirheitä, joilla on suuria vaikutuksia. Pelkästä kuvakkeesta koostuva ostoskoripainike, jolla ei ole saavutettavaa nimeä, luetaan ääneen pelkkänä sanana ”painike”, joten ruudunlukuohjelman käyttäjä ei tiedä, mitä se tekee. Harmaa teksti valkoisella pohjalla, joka ei yllä kontrastisuhteeseen 4,5:1, on vaikealukuista monille heikkonäköisille ja kenelle tahansa, joka käyttää puhelinta kirkkaassa auringonvalossa.

Koska sama ylätunniste, tuotekortti ja alatunniste toistuvat jokaisella sivulla, yksi korjaus sivupohjaan voi poistaa satoja virheitä kerralla. Siksi tulokset on ryhmitelty säännöittäin elementti- ja sivumäärineen sen sijaan, että jokainen esiintymä listattaisiin erillisenä ongelmana.

Saavutettavuudella on monissa maissa myös oikeudellinen puoli. Skannaus ei voi kertoa, koskeeko jokin laki sinua tai täytätkö sen vaatimukset. Se antaa sinulle päivätyn luettelon todellisista esteistä omilla sivuillasi, ja siitä on käytännöllistä aloittaa joka tapauksessa.

Miten tuloksia luetaan

Kriittinen
Este voi estää joitakin ihmisiä käyttämästä elementtiä lainkaan, esimerkiksi lomakekenttä ilman nimiötä tai painike ilman nimeä. Korjaa nämä ensin.
Vakava
Este vaikeuttaa joidenkin ihmisten tehtävää huomattavasti, kuten leipäteksti, joka ei täytä kontrastisuhdetta.
Kohtalainen
Este aiheuttaa vaikeuksia tai hämmennystä, mutta sen voi yleensä kiertää.
Vähäinen
Pieni ongelma tai haitta. Silti korjaamisen arvoinen, kun seuraavan kerran muokkaat kyseistä sivupohjaa.
WCAG-onnistumiskriteerit
Säännön vieressä olevat numerot, kuten 1.1.1 tai 1.4.3, ovat kriteerit, joita se testaa. Sääntö, jolle ei ole merkitty kriteeriä, on hyvä käytäntö (best practice) eikä WCAG-vaatimus.
Elementit ja sivut
Kuinka moni elementti ei läpäissyt sääntöä ja kuinka monella testatulla sivulla. Sääntö, joka epäonnistuu jokaisella sivulla, on yleensä jaetussa osassa, kuten ylätunnisteessa, valikossa tai alatunnisteessa.
Tarkistettava
axe-core löysi jotain, mitä se ei pystynyt ratkaisemaan. Tarkista elementti itse: se voi läpäistä tai olla läpäisemättä. Näitä kohtia ei lasketa virheiksi.
Fokusloukku
Tab-näppäin kierrätti fokusta samojen muutaman elementin välillä. Jos ne kuuluvat evästebanneriin, näppäimistön käyttäjät eivät ehkä pääse sivun muuhun sisältöön.
Fokus ei liiku (Focus doesn’t move)
Tab-näppäimen painaminen ei siirtänyt fokusta mihinkään. Linkit ja painikkeet voivat olla rakennettu div- tai span-elementeistä, tai jokin skripti nielee näppäinpainalluksen.
Ohituslinkki
Onko ensimmäinen kohde, johon Tab vie, ”Siirry sisältöön” -linkki. Ilman sitä näppäimistön käyttäjät joutuvat käymään koko ylätunnisteen läpi jokaisella sivulla. Myös maamerkit (landmarks) ja otsikot voivat täyttää kriteerin WCAG 2.4.1 Bypass Blocks.
Ei näkyvää fokusilmaisinta
Fokusoidut elementit, joissa emme havainneet ääriviivaa (outline), varjoa (box shadow) tai alleviivausta. Jokin muu tyyli, kuten värin muutos, voi silti olla näkyvä, joten käy nämä itse läpi Tab-näppäimellä varmistaaksesi.

Miten yleisimmät ongelmat korjataan

  • Teksti, joka ei täytä kontrastisuhdetta

    Tavallisen tekstin kontrastin taustaansa nähden on oltava vähintään 4,5:1 ja suuren tekstin (noin 24 px tai lihavoituna noin 18,7 px) 3:1. Vaihda väri teeman asetuksista tai design tokeneista eikä elementti kerrallaan, ja tarkista sitten uudelleen paikkamerkkiteksti, hover-tilat ja kuvien päällä oleva teksti.

  • Kuvat ilman alt-tekstiä

    Anna jokaiselle merkitykselliselle kuvalle alt-attribuutti, joka kertoo, mitä kuva esittää tai mitä se tekee, esimerkiksi tuotteen nimi ja väri. Koristekuville annetaan tyhjä alt (alt=""), jotta ruudunlukuohjelmat ohittavat ne. Shopifyssa alt-teksti lisätään tuotteen Media-osiossa kuvan kautta; WordPressissä Mediakirjaston Vaihtoehtoinen teksti -kenttään.

  • Lomakekentät ilman nimiöitä

    Liitä jokaiseen syötekenttään nimiö <label for> -elementillä, jonka arvo vastaa kentän id:tä, tai käytä aria-label-attribuuttia, jos näkyvää tekstiä ei ole. Älä käytä paikkamerkkitekstiä ainoana nimiönä: se katoaa heti, kun joku alkaa kirjoittaa. Uutiskirjeen tilauslomakkeet ja ylätunnisteen hakukentät ovat tavallisimmat syylliset.

  • Painikkeet ja linkit ilman saavutettavaa nimeä

    Ostoskorin, haun, valikon tai sosiaalisen median profiilien kuvakepainikkeet sisältävät usein pelkän SVG:n. Lisää näkyvä teksti tai aria-label, joka kertoo, mitä painike tekee (”Avaa ostoskori”, ei ”kuvake”), ja lisää itse SVG:hen aria-hidden="true".

  • Evästebanneri, joka vangitsee fokuksen

    Varmista, että jokaiseen bannerin painikkeeseen pääsee Tab-näppäimellä ja sitä voi käyttää Enter- tai välilyöntinäppäimellä, että bannerin sulkeminen palauttaa fokuksen sivulle ja että banneri, joka ei estä sivun käyttöä, ei pidä fokusta lainkaan. Tarkista suostumustyökalusi asetukset ja päivitä se, jos skripti on vanha.

  • CSS:ssä poistetut fokuksen ääriviivat

    Etsi tyylitiedostoistasi outline: none tai outline: 0 linkeiltä, painikkeilta ja :focus-valitsimelta. Korvaa se näkyvällä tyylillä, kuten :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Kysymyksiä tästä työkalusta

Onko tämä saavutettavuustesti ilmainen?

Kyllä. Rekisteröitymistä ei tarvita; vahvistat vain, että omistat tai hallinnoit sivustoa. Maksullinen Saavutettavuusraportti lisää enintään 20 sivua sivukartastasi, pelkällä näppäimistöllä tehtävän käyttöpolun, 320 px:n reflow-tarkistuksen, virheellisen koodisi pohjalta laaditut ennen ja jälkeen -koodiesimerkit, tekoälykehotteet, PDF:n ja 5 uudelleentestausta.

Kuinka suuren osan WCAG:stä automaattinen testi voi tarkistaa?

Vain osan. Sääntö voi tarkistaa, että kuvalla on alt-teksti, mutta ei sitä, kuvaako teksti kuvaa, ja että kentällä on nimiö, mutta ei sitä, onko nimiö selkeä. Pidä tuloksia luettelona varmoista ongelmista ja testaa loput näppäimistöllä ja ruudunlukuohjelmalla.

Jos skannaus ei löydä mitään, onko sivustoni ADA:n tai WCAG:n mukainen?

Ei. Mikään automaattinen testi ei voi osoittaa, että sivusto on WCAG:n mukainen tai että se noudattaa ADA:ta, EU:n esteettömyysdirektiiviä (European Accessibility Act) tai mitään muuta lakia. Puhdas tulos tarkoittaa, että automaattiset säännöt eivät löytäneet virheitä testatuilta sivuilta.

Voinko tarkistaa testiympäristön (staging) tai kirjautumisen takana olevia sivuja?

Kirjautumisen, salasanan tai bottisuojauksen takana olevia sivuja ei voi testata. Jos bottisuojauksesi estää skannauksen, salli FixReportsScanner-käyttäjäagentti (user agent) tai testaa julkista staging-kopiota.

Korjasin ongelman. Miksi tulos näyttää samalta?

Saman osoitteen tuloksia voidaan käyttää uudelleen viimeisen tunnin aikana tehdystä skannauksesta. Odota, että tunti kuluu, ja tyhjennä mahdollinen sivuvälimuisti tai CDN-välimuisti ennen kuin testaat uudelleen.

Lähteet

Aiheeseen liittyvät työkalut

Saavutettavuusraportti ($174, kertamaksu) jatkaa täydestä ilmaisesta skannauksesta ja lisää sivuja, jokaisen havainnon vaatiman muutoksen, PDF-tiedoston ja uusintatestit korjaustesi varmistamiseen.

Lue lisää: Saavutettavuusraportti