Kuidas testida veebisaidi ligipääsetavust: tasuta tööriistad

Siin on lugu, mida kuuleme sageli. Keegi käivitab Lighthouse'i, saab ligipääsetavuse eest rohelise 100 ja läheb edasi. Nädal hiljem kirjutab klient, et ei saanud maksta, sest kaardivormini ei jõua klaviatuuriga. Mõlemad on tõsi. Automaatkontroll läks läbi ja sait jättis ometi päris inimese hätta.

See juhend näitab, kuidas väikese eelarvega korralikult testida: milliseid tasuta tööriistu käivitada, 15-minutiline käsitsi kontrollimise rutiin, esimene katse ekraanilugejaga ja millal tasub auditi eest maksta.

Kas automaatkontrollija oskab öelda, kas minu veebisait on ligipääsetav?

Ei. Automaatkontrollijad leiavad mõned probleemid kiiresti, kuid paljudele ligipääsetavuse küsimustele saab vastata ainult inimene. Kui Ühendkuningriigi valitsuse digiteenistus (Government Digital Service) testis kümmet tööriista lehel, millel oli 143 teadaolevat viga, leidis parim neist 41%. W3C ütleb otse: hindamistööriistad „ei saa ligipääsetavust kindlaks teha, need saavad selles ainult abiks olla.“

GDS-i test (avaneb uuel vahelehel) pärineb 2017. aasta veebruarist ja selle 41% (Asqatasunilt) sisaldas ka tööriista soovitusi käsitsi kontrollimiseks. Tööriistad on vahepeal paremaks läinud, kuid lõhe põhjus on sama. Tarkvara oskab öelda, et pildil puudub alternatiivtekst. See ei oska öelda, et „punane kleit“ on vale kirjeldus sinise ülikonna fotole, ega seda, kas teie fookuse järjekord on loogiline.

Nii et pidage kontrollijat suitsuanduriks, mitte hoone ekspertiisiks. Käivitada tasub seda siiski: WebAIM Million 2026 (avaneb uuel vahelehel) leidis tuvastatavaid vigu 95,9%-l miljonist populaarseimast avalehest, nii et enamikul saitidel on kiiresti parandatavaid vigu. Nagu ütleb W3C juhend tööriistade valimise kohta (avaneb uuel vahelehel): „Vaja on inimese otsustust.“

Milliseid tasuta ligipääsetavuse testimise tööriistu kasutada?

Kasutage üht või kaht automaatkontrollijat, kontrastikontrollijat ja ekraanilugejat. Tööriistad rakendavad erinevaid reegleid ja esitavad tulemusi erinevalt, nii et kaks kontrollijat leiavad tavaliselt rohkem kui üks. Igal allpool toodud tööriistal on tasuta versioon. Enne kui neile toetute, kontrollige nende kehtivaid tingimusi, sest nimed, funktsioonid ja hinnad muutuvad.

Mida saan 15 minutiga käsitsi kontrollida?

Üsna palju. W3C lihtsad kontrollid (Easy Checks) (avaneb uuel vahelehel) hõlmavad lehe pealkirju, alternatiivteksti, vahepealkirju, kontrasti, vahelejätulinke, nähtavat klaviatuurifookust, lehe keelt, suurendust, subtiitreid ja vormisilte. Valige üks oluline leht, näiteks tooteleht või broneerimisvorm, ja andke igale kontrollile minut või kaks. Leiate asju, millest ükski kontrollija ei teata.

W3C ütleb, et need kontrollid „hõlmavad vaid mõnda ligipääsetavusprobleemi“, nii et need ei ole täielik hindamine. Siiski on see parim veerand tundi, mida saate kulutada:

1. Lehe pealkiri (1 minut). Kas brauseri vahekaart ütleb, mis leht see on, näiteks „Laua broneerimine | Restoran Rosa“, mitte igal pool „Avaleht“?
2. Pildid (2 minutit). Kuvage alternatiivtekst WAVE'i või muu sarnase tööriistaga. Kas see on täpne? Kas kaunistused jäetakse vahele?
3. Vahepealkirjad (2 minutit). Kuvage pealkirjade loend ja lugege neid eraldi. Kas need toimivad sisukorrana?
4. Kontrast (2 minutit). Kontrollige põhiteksti, väikest halli teksti, nuppude teksti ja piltide peal olevat teksti.
5. Klaviatuur (4 minutit). Pange hiir kõrvale ja liikuge tabulaatoriga läbi lehe (vt järgmist jaotist).
6. Suurendus (2 minutit). Kas 200% ja seejärel 400% juures saate endiselt kõike lugeda ja menüüd kasutada ilma külgsuunas kerimata?
7. Vormid ja keel (2 minutit). Klõpsake iga välja sildil; hästi ehitatud vormis viib see kursori väljale. Kontrollige tööriista raportist, kas lehe keel on määramata.

Kuidas klaviatuuriga testida?

Pange hiir ära. Vajutage edasi liikumiseks tabulaatorit, tagasi minekuks Shift+Tab, linkide avamiseks Enterit, nuppude vajutamiseks tühikut või Enterit ning menüüdes ja raadionuppudes nooleklahve. Iga interaktiivne element peab olema kättesaadav, peaksite alati nägema, kus olete, ja te ei tohiks kuhugi kinni jääda.

Macis jätab Safari tabulaatorit vajutades lingid vahele, kuni lülitate selle täpsemates seadetes (Advanced) sisse valiku „Press Tab to highlight each item on a webpage“ (tabulaatori vajutus tõstab esile iga veebilehe elemendi). Seejärel kontrollige:

• Kas näete alati, kus olete? Kui fookuse piirjoon kaob, on klaviatuurikasutaja eksinud.
• Kas järjekord on loogiline? Fookus peaks järgima lugemisjärjekorda.
• Kas miski katab seda? Kleepuv päis või küpsiseriba, mis peidab fookusega elemendi, rikub WCAG 2.2 kriteeriumi Fookus pole varjatud.
• Kas pääsete uuesti välja? Avage iga menüü, hüpikaken ja kuupäevavalija ning proovige siis lahkuda. Escape-klahv peaks dialoogid sulgema.
• Kas kogu teekond toimib? Lisage toode, muutke kogust, kasutage sooduskoodi ja jõudke maksmiseni ilma hiireta.

Kirjutage iga viga täpselt üles: „Tootelehe suurusevalikut ei saa avada Enteri ega tühikuklahviga“ parandatakse palju kiiremini kui „klaviatuur ei tööta“.

Kuidas esimest korda ekraanilugejaga testida?

Alustage ekraanilugejast, mis teie seadmes juba on, või Windowsis NVDA-st ja kuulake läbi üks leht. Te ei püüa seda kasutada nagu ekspert. Te kontrollite, et pealkirjad, lingid, nupud, pildid ja vormiväljad loetakse ette mõistlike nimedega ja et miski oluline ei jää vait.

• Mac: Command+F5 lülitab VoiceOveri sisse ja välja; Control+Option+U avab rootori, mis loetleb pealkirjad, lingid ja vormi juhtelemendid.
• Windows: NVDA-s vajutage pealkirjade vahel hüppamiseks H ning linkide ja pealkirjade loendi avamiseks Insert+F7.
• Telefon: lülitage sisse VoiceOver (iPhone) või TalkBack (Android) ja pühkige elemendilt elemendile liikumiseks paremale. Õppige kõigepealt selgeks, kuidas see välja lülitada.

Kuulake seda, mis on kõige olulisem. WebAIM-i 2024. aasta ekraanilugejate uuringus (avaneb uuel vahelehel) ütles 71,6% vastanutest, et pika lehe puhul liiguvad nad kõigepealt pealkirjade järgi, nii et alustage sealt. Seejärel avage linkide loend: viis linki nimega „Loe edasi“ ei ütle kellelegi midagi. „Lisa ostukorvi, tumesinine kampsun“ on kasulik nupp, „nupp“ ei ole. Lõpuks täitke vorm ja kontrollige, et iga väli ja viga loetakse ette.

Olge järeldustega tagasihoidlikud. Kui teile tundub, et midagi on katki, siis tõenäoliselt ongi; kui kõlab hästi, ei ole see veel tõend. Seda, kuidas kogenud kasutajad tegelikult töötavad, lugege artiklist kuidas puuetega inimesed veebi kasutavad.

Kuidas kontrollida suurendust, ümberpaigutumist ja tekstivahesid?

Suurendage brauseris lehte 200%-ni ja kontrollige, et tekst kasvab, ilma et see ära lõigataks või kattuks. Seejärel testige ümberpaigutumist: 400% suurenduse juures 1280 piksli laiuses aknas peaks sisu mahtuma ilma külgsuunas kerimiseta. Lõpuks suurendage tähtede, sõnade, ridade ja lõikude vahet ning kontrollige, et midagi ei läheks katki ega kaoks.

Need vastavad WCAG kriteeriumidele Teksti suuruse muutmine (1.4.4), Ümberpaigutumine (1.4.10) (avaneb uuel vahelehel) ja Tekstivahed (1.4.12) (avaneb uuel vahelehel). Ümberpaigutumise kriteerium kasutab 320 CSS-piksli laiust, mis W3C märkuse järgi „vastab 400% suurenduse juures 1280 CSS-piksli laiusele algsele vaateaknale.“ Tekstivahede kriteerium nõuab, et midagi ei läheks kaotsi, kui lugeja seab reavaheks 1,5-kordse fondi suuruse, lõiguvaheks 2-kordse, tähevaheks 0,12-kordse ja sõnavaheks 0,16-kordse.

Tekstivahede järjehoidjaskript ehk väike järjehoidjana salvestatud skript rakendab kõik neli väärtust ühe klõpsuga. Otsige teksti, mis nuppudest välja valgub, ja silte, mis serva juures ära lõigatakse. 400% suurenduse juures näitab sülearvuti umbes sama, mida väike telefon, nii et hästi ehitatud kohanduv sait läbib suure osa sellest juba niigi.

Kuidas kontrollida vorme, veateateid ja maksmist?

Täitke iga oluline vorm kolm korda: üks kord õigesti, üks kord kõik väljad tühjaks jättes ja üks kord meelega vigu tehes. Igal väljal peaks olema nähtav silt, iga viga peaks olema sõnadega selgitatud oma välja kõrval ning parooli- ja kinnituskoodi väljadele peaks saama kleepida.

• Veateated. Punane „Vigane sisend“ ei ole piisav. „Sisestage kehtivusaeg kujul KK/AA“ välja kõrval on. Pärast saatmist peaks fookus liikuma vigade kokkuvõttele või esimesele vigasele väljale.
• Sisselogimine ja koodid. WCAG 2.2 ligipääsetava autentimise kriteeriumi (avaneb uuel vahelehel) järgi on kleepimise või paroolihaldurite blokeerimine viga, kui pole muud sisenemisviisi.
• CAPTCHA-d ja ajapiirangud. WebAIM-i uuringus pidasid ekraanilugeja kasutajad CAPTCHA-t veebi kõige problemaatilisemaks elemendiks. Kontrollige, kas on olemas ligipääsetav alternatiiv ja kas ajapiiranguid saab pikendada.

Meie veebisaidi ligipääsetavuse kontrollnimekirjas on e-poodide jaoks põhjalikum loend, sealhulgas küpsiseribad ja hüpikaknad.

Mida sisaldab professionaalne ligipääsetavuse audit ja millal seda vaja on?

Ligipääsetavuse audit on spetsialisti struktureeritud ülevaatus kindla standardi, tavaliselt WCAG 2.1 või 2.2 taseme AA, järgi. See ühendab automaatse skannimise käsitsi ja abitehnoloogiaga testimisega teie peamistel mallidel ja teekondadel ning lõpeb prioriseeritud aruandega. Seda on vaja, kui seadus teile kehtib, enne suurt käivitamist või kui kliendid küsivad tõendeid.

Enne hinnas kokkuleppimist küsige:

• Millise standardi, versiooni ja taseme järgi te testite?
• Millised mallid ja teekonnad on kaasatud? E-poe puhul: avaleht, kategooria, tooteleht, ostukorv, maksmine, kontolehed ja vormid.
• Kas testite käsitsi ekraanilugejate, klaviatuuri ja suurendusega ning millistes brauserites ja seadmetes?
• Kas aruanne järjestab probleemid raskusastme järgi, näitab nende asukohta ja pakub parandusi?
• Kas kordustest on hinna sees?

Hinnad erinevad pakkuja, riigi ja ulatuse järgi palju, nii et võrrelge, mis on hinna sees. Kui Euroopa ligipääsetavuse akt teile kehtib, toetab audit ka teie avalikku teatist; meie EAA juhend selgitab, keda akt hõlmab.

Miks testida koos puuetega kasutajatega?

Sest standardile vastamine ja kasutusmugavus ei ole sama asi. Maksmisprotsess võib läbida kõik WCAG kriteeriumid ja võtta ekraanilugeja kasutajal ikkagi kakskümmend minutit. W3C ütleb, et hindamine koos puuetega kasutajatega „tuvastab kasutatavusprobleeme, mida ainult vastavushindamine ei avasta“, ning see näitab teie meeskonnale, kuidas inimesed saiti tegelikult kasutavad.

Laborit pole vaja. Mõni seanss teie kõige olulisema ülesandega, näiteks toote leidmise ja maksmisega, õpetab rohkem kui järjekordne skannimisring. Leidke osalejaid puuetega inimeste organisatsioonide, uuringufirmade või oma klientide kaudu ja makske inimestele nende aja eest. Laske neil kasutada oma seadmeid ja seadeid. W3C juhend kasutajate kaasamise kohta hindamisse (avaneb uuel vahelehel) käsitleb praktilist poolt.

Mida tulemustega teha?

Järjestage probleemid selle järgi, kui tõsiselt need inimesi takistavad ja kus need esinevad, parandage need saidi enda koodis ja sisus, testige uuesti ja pange kirja, mis on veel lahendamata. Siltideta väli maksmisel on olulisem kui kontrastiviga jaluses ning parandus ühises mallis parandab iga lehe, mis seda malli kasutab.

1. Seadke prioriteedid. Kõigepealt takistused peamistel teekondadel (maksmine, broneerimine, registreerumine), seejärel ühised mallid, siis üksikud lehed.
2. Parandage allikas. Muutke kujundusteemat, komponenti või sisu, mitte ainult sümptomit.
3. Testige uuesti. Korrake samu kontrolle, nii käsitsi kui ka tööriistadega.
4. Dokumenteerige. Loetlege teadaolevad probleemid koos kuupäevadega oma ligipääsetavuse teatises. Meie WCAG 2.2 juhend selgitab uuemaid kriteeriume.
5. Korrake. Lisage igasse väljalaskesse klaviatuurikontroll ja skannimine.

Kui kasutate ligipääsetavuse vidinat, ka meie oma, testige saiti nii, et vidin on suletud. Paneel nagu SiteAccessible annab külastajatele lisavõimalusi lehe kohandamiseks, kuid WCAG küsib, kas leht töötab vaikeolekus. Mõni auditeerimis- või sertifitseerimisskeem ei hinda lehti, kus töötab ülekatteskript, nii et küsige kõigepealt oma audiitorilt.