Kaip patikrinti svetainės prieinamumą: nemokami įrankiai ir rankinė patikra

Štai istorija, kurią girdime dažnai. Kas nors paleidžia Lighthouse, gauna žalią 100 už prieinamumą ir eina toliau. Po savaitės klientas parašo, kad negalėjo sumokėti, nes kortelės formos negalima pasiekti klaviatūra. Teisinga ir viena, ir kita. Automatinis patikrinimas buvo sėkmingas, o svetainė vis tiek nuvylė tikrą žmogų.

Šiame vadove parodyta, kaip tinkamai testuoti turint nedidelį biudžetą: kuriuos nemokamus įrankius paleisti, 15 minučių rankinė patikra, pirmasis bandymas su ekrano skaitytuvu ir kada verta mokėti už auditą.

Ar automatinis tikrintuvas gali pasakyti, ar mano svetainė prieinama?

Ne. Automatiniai tikrintuvai greitai randa dalį problemų, tačiau į daugelį prieinamumo klausimų gali atsakyti tik žmogus. Kai JK vyriausybės skaitmeninė tarnyba (Government Digital Service) išbandė 10 įrankių puslapyje su 143 žinomomis klaidomis, geriausias rado 41 %. W3C sako tiesiai: vertinimo įrankiai „negali nustatyti prieinamumo, jie gali tik padėti tai daryti.“

GDS testas (atsidaro naujame skirtuke) atliktas 2017 m. vasarį, o jo 41 % (Asqatasun) apėmė ir įrankio raginimus atlikti rankinius patikrinimus. Nuo to laiko įrankiai patobulėjo, tačiau spragos priežastis ta pati. Programa gali pasakyti, kad paveikslėlis neturi alternatyviojo teksto. Ji negali pasakyti, kad „raudona suknelė“ yra klaidingas mėlyno kostiumo nuotraukos aprašas arba ar jūsų fokuso tvarka logiška.

Taigi tikrintuvą laikykite dūmų detektoriumi, o ne pastato ekspertize. Jį vis tiek verta paleisti: WebAIM Million 2026 (atsidaro naujame skirtuke) aptinkamų klaidų rado 95,9 % milijono populiariausių pagrindinių puslapių, todėl daugumoje svetainių yra ką greitai ir nesunkiai pataisyti. Kaip sakoma W3C įrankių pasirinkimo vadove (atsidaro naujame skirtuke), „Reikia žmogaus sprendimo.“

Kuriuos nemokamus prieinamumo testavimo įrankius naudoti?

Naudokite vieną ar du automatinius tikrintuvus, kontrasto tikrintuvą ir ekrano skaitytuvą. Įrankiai taiko skirtingas taisykles ir skirtingai pateikia rezultatus, todėl du tikrintuvai paprastai aptinka daugiau nei vienas. Kiekvienas toliau nurodytas įrankis turi nemokamą versiją. Prieš pasikliaudami, pasitikrinkite dabartines jų sąlygas, nes pavadinimai, funkcijos ir kainos keičiasi.

Ką galiu patikrinti rankiniu būdu per 15 minučių?

Gana daug. W3C Easy Checks (atsidaro naujame skirtuke) apima puslapių pavadinimus, alternatyvųjį tekstą, antraštes, kontrastą, peršokimo nuorodas, matomą klaviatūros fokusą, puslapio kalbą, mastelį, subtitrus ir formų etiketes. Pasirinkite vieną svarbų puslapį, pavyzdžiui, prekės puslapį ar rezervavimo formą, ir kiekvienam patikrinimui skirkite minutę ar dvi. Rasite dalykų, apie kuriuos nepraneša joks tikrintuvas.

W3C sako, kad šie patikrinimai „apima tik kelias prieinamumo problemas“, todėl tai nėra išsamus vertinimas. Vis dėlto tai geriausias ketvirtis valandos, kurį galite skirti:

1. Puslapio pavadinimas (1 minutė). Ar naršyklės skirtuke parašyta, koks tai puslapis, pavyzdžiui, „Staliuko rezervacija | Rožės virtuvė“, o ne visur „Pradžia“?
2. Paveikslėliai (2 minutės). Parodykite alternatyvųjį tekstą su WAVE ar panašiu įrankiu. Ar jis tikslus? Ar dekoracijos praleidžiamos?
3. Antraštės (2 minutės). Išvardykite antraštes ir perskaitykite jas atskirai. Ar jos galėtų atstoti turinį?
4. Kontrastas (2 minutės). Patikrinkite pagrindinį tekstą, smulkų pilką tekstą, mygtukų tekstą ir tekstą ant paveikslėlių.
5. Klaviatūra (4 minutės). Padėkite pelę į šalį ir Tab klavišu pereikite per puslapį (žr. kitą skyrių).
6. Mastelis (2 minutės). Padidinę iki 200 %, o tada iki 400 %, ar vis dar galite viską perskaityti ir naudotis meniu neslinkdami į šoną?
7. Formos ir kalba (2 minutės). Spustelėkite kiekvieno lauko etiketę; gerai sukurtoje formoje žymeklis atsiduria lauke. Įrankio ataskaitoje patikrinkite, ar nurodyta puslapio kalba.

Kaip testuoti klaviatūra?

Padėkite pelę į šalį. Spauskite Tab, kad judėtumėte pirmyn, Shift+Tab, kad grįžtumėte, Enter, kad atidarytumėte nuorodas, tarpo klavišą ar Enter, kad paspaustumėte mygtukus, o rodyklių klavišus meniu ir akučių mygtukų grupėse. Kiekvienas interaktyvus elementas turi būti pasiekiamas, visada turite matyti, kur esate, ir niekur neturėtumėte įstrigti.

Mac kompiuteryje Safari, paspaudus Tab, praleidžia nuorodas, kol išplėstiniuose jos nustatymuose neįjungiate parinkties „Press Tab to highlight each item on a webpage“ (Tab klavišu paryškinti kiekvieną tinklalapio elementą). Tada patikrinkite:

• Ar visada matote, kur esate? Jei fokuso rėmelis dingsta, klaviatūros naudotojas pasiklysta.
• Ar tvarka logiška? Fokusas turėtų sekti skaitymo tvarką.
• Ar kas nors uždengta? Fiksuota antraštė ar slapukų juosta, slepianti fokusą turintį elementą, pažeidžia WCAG 2.2 kriterijų Focus Not Obscured.
• Ar galite vėl išeiti? Atidarykite kiekvieną meniu, iškylantįjį langą ir datos pasirinkimą, tada pabandykite išeiti. Escape turėtų uždaryti dialogo langus.
• Ar veikia visas kelias? Be pelės pridėkite prekę, pakeiskite kiekį, pritaikykite nuolaidos kodą ir pasiekite mokėjimą.

Kiekvieną klaidą užsirašykite tiksliai: „Prekės puslapio dydžio pasirinkimo negalima atidaryti Enter ar tarpo klavišu“ bus ištaisyta daug greičiau nei „klaviatūra neveikia“.

Kaip pirmą kartą testuoti su ekrano skaitytuvu?

Pradėkite nuo ekrano skaitytuvo, kurį jūsų įrenginys jau turi, arba NVDA Windows sistemoje, ir paklausykite vieno puslapio. Nebandote juo naudotis kaip ekspertas. Tikrinate, ar antraštės, nuorodos, mygtukai, paveikslėliai ir formų laukai perskaitomi su prasmingais pavadinimais ir ar niekas svarbaus nenutyla.

• Mac: Command+F5 įjungia ir išjungia VoiceOver; Control+Option+U atidaro rotorių, t. y. antraščių, nuorodų ir formos valdymo elementų sąrašą.
• Windows: NVDA spauskite H, kad šokinėtumėte tarp antraščių, ir Insert+F7, kad pamatytumėte nuorodų ir antraščių sąrašą.
• Telefonas: įjunkite VoiceOver (iPhone) arba TalkBack (Android) ir braukite į dešinę, kad pereitumėte nuo elemento prie elemento. Pirmiausia išmokite jį išjungti.

Klausykitės to, kas svarbiausia. WebAIM 2024 m. ekrano skaitytuvų apklausoje (atsidaro naujame skirtuke) 71,6 % respondentų teigė, kad ilgą puslapį pirmiausia naršo pagal antraštes, todėl nuo jų ir pradėkite. Tada atsidarykite nuorodų sąrašą: penkios nuorodos „Skaityti daugiau“ niekam nieko nepasako. „Į krepšelį, tamsiai mėlynas megztinis“ yra naudingas mygtukas, o tiesiog „mygtukas“ ne. Galiausiai užpildykite formą ir patikrinkite, ar kiekvienas laukas ir klaida perskaitomi.

Išvadas darykite atsargiai. Jei jums atrodo, kad kažkas neveikia, tikriausiai taip ir yra; jei viskas skamba gerai, tai dar ne įrodymas. Kaip iš tikrųjų dirba patyrę naudotojai, skaitykite straipsnyje kaip žmonės su negalia naudojasi internetu.

Kaip patikrinti mastelį, persitvarkymą ir teksto tarpus?

Padidinkite naršyklės mastelį iki 200 % ir patikrinkite, ar tekstas didėja nenusikirpdamas ir nepersidengdamas. Tada patikrinkite persitvarkymą: 1 280 pikselių pločio lange padidinus iki 400 %, turinys turi tilpti be slinkimo į šoną. Galiausiai padidinkite tarpus tarp raidžių, žodžių, eilučių ir pastraipų ir patikrinkite, ar niekas nesuyra ir nedingsta.

Tai atitinka WCAG kriterijus Resize Text (1.4.4), Reflow (1.4.10) (atsidaro naujame skirtuke) ir Text Spacing (1.4.12) (atsidaro naujame skirtuke). Reflow naudoja 320 CSS pikselių plotį, kuris, kaip pažymi W3C, „prilygsta 1280 CSS pikselių pradiniam peržiūros srities pločiui esant 400 % priartinimui“. Text Spacing reikalauja, kad niekas nedingtų, kai skaitytojas nustato eilučių aukštį 1,5 karto didesnį už šrifto dydį, tarpą po pastraipų 2 kartus, tarpą tarp raidžių 0,12 karto ir tarpą tarp žodžių 0,16 karto didesnį.

Teksto tarpų žymelės skriptas (bookmarklet), t. y. mažas skriptas, išsaugotas kaip žymelė, vienu spustelėjimu pritaiko visas keturias reikšmes. Ieškokite teksto, išlendančio iš mygtukų, ir etikečių, nukirptų ties kraštu. Padidinus iki 400 %, nešiojamasis kompiuteris rodo maždaug tą patį, ką mažas telefonas, todėl gerai sukurta prisitaikanti svetainė didžiąją dalį šių patikrinimų jau atitinka.

Kaip patikrinti formas, klaidas ir apmokėjimą?

Kiekvieną svarbią formą užpildykite tris kartus: kartą teisingai, kartą palikę visus laukus tuščius ir kartą su tyčinėmis klaidomis. Kiekvienas laukas turi turėti matomą etiketę, kiekviena klaida turi būti paaiškinta žodžiais šalia savo lauko, o į slaptažodžio ir patvirtinimo kodo laukus turi būti galima įklijuoti.

• Klaidos. Raudono užrašo „Neteisinga įvestis“ nepakanka. Užrašo „Įveskite galiojimo datą, pvz., 08/27“ šalia lauko pakanka. Pateikus formą, fokusas turėtų pereiti prie klaidų santraukos arba pirmojo lauko su klaida.
• Prisijungimai ir kodai. Pagal WCAG 2.2 prieinamo autentifikavimo kriterijų (atsidaro naujame skirtuke) įklijavimo ar slaptažodžių tvarkyklių blokavimas yra pažeidimas, nebent yra kitas prisijungimo būdas.
• CAPTCHA ir laiko apribojimai. WebAIM apklausoje ekrano skaitytuvų naudotojai CAPTCHA įvardijo kaip didžiausią problemą internete. Patikrinkite, ar yra prieinama alternatyva ir ar laiko apribojimus galima pratęsti.

Mūsų svetainės prieinamumo kontroliniame sąraše rasite išsamesnį sąrašą parduotuvėms, įskaitant slapukų juostas ir iškylančiuosius langus.

Ką apima profesionalus prieinamumo auditas ir kada man jo reikia?

Prieinamumo auditas yra struktūruota specialisto peržiūra pagal įvardytą standartą, dažniausiai WCAG 2.1 arba 2.2 AA lygį. Jis derina automatinį skenavimą su rankiniu ir pagalbinių technologijų testavimu pagrindiniuose jūsų šablonuose ir keliuose, o baigiasi ataskaita su prioritetais. Jo reikia, kai jums taikomas įstatymas, prieš didelį paleidimą arba kai klientai prašo įrodymų.

Prieš susitardami dėl kainos, paklauskite:

• Pagal kokį standartą, versiją ir lygį testuosite?
• Kurie šablonai ir keliai įtraukti? Parduotuvei: pagrindinis, kategorijos, prekės, krepšelio, apmokėjimo, paskyros puslapiai ir formos.
• Ar testuojate rankiniu būdu su ekrano skaitytuvais, klaviatūra ir masteliu, ir kuriose naršyklėse bei įrenginiuose?
• Ar ataskaitoje problemos surikiuotos pagal rimtumą, nurodyta jų vieta ir pasiūlyti sprendimai?
• Ar įtrauktas pakartotinis testas?

Kainos labai skiriasi priklausomai nuo tiekėjo, šalies ir apimties, todėl lyginkite, kas įtraukta. Jei jums taikomas Europos prieinamumo aktas, auditas taip pat pagrindžia jūsų viešą pareiškimą; mūsų Europos prieinamumo akto vadove paaiškinta, kam aktas taikomas.

Kodėl verta į testavimą įtraukti žmones su negalia?

Todėl, kad atitikti standartą ir būti patogiam naudoti nėra tas pats. Apmokėjimas gali atitikti kiekvieną WCAG kriterijų ir vis tiek ekrano skaitytuvo naudotojui užtrukti dvidešimt minučių. W3C sako, kad vertinimas, kuriame dalyvauja naudotojai su negalia, „atskleidžia naudojimo problemas, kurių neaptinka vien atitikties vertinimas“, ir parodo jūsų komandai, kaip žmonės iš tikrųjų naudojasi svetaine.

Laboratorijos nereikia. Kelios sesijos su svarbiausia jūsų užduotimi, pavyzdžiui, prekės paieška ir apmokėjimu, išmokys daugiau nei dar vienas skenavimų ratas. Dalyvių ieškokite per neįgaliųjų organizacijas, tyrimų agentūras ar tarp savo klientų ir sumokėkite žmonėms už jų laiką. Leiskite jiems naudotis savo įrenginiais ir nustatymais. W3C vadove apie naudotojų įtraukimą į vertinimą (atsidaro naujame skirtuke) aptariama praktinė pusė.

Ką daryti su rezultatais?

Surūšiuokite problemas pagal tai, kaip stipriai jos blokuoja žmones ir kur jos pasitaiko, ištaisykite jas pačios svetainės kode ir turinyje, testuokite iš naujo ir užfiksuokite, kas dar neišspręsta. Formos laukas be etiketės apmokėjime svarbesnis už kontrasto klaidą poraštėje, o pataisymas bendrame šablone sutaiso kiekvieną jį naudojantį puslapį.

1. Nustatykite prioritetus. Pirmiausia kliūtys pagrindiniuose keliuose (apmokėjimas, rezervacija, registracija), tada bendri šablonai, tada pavieniai puslapiai.
2. Taisykite šaltinį. Keiskite temą, komponentą ar turinį, o ne tik simptomą.
3. Testuokite iš naujo. Pakartokite tuos pačius patikrinimus ne tik įrankiais, bet ir rankiniu būdu.
4. Dokumentuokite. Žinomas problemas su datomis išvardykite savo prieinamumo pareiškime. Naujesni kriterijai paaiškinti mūsų WCAG 2.2 vadove.
5. Kartokite. Kiekvienai naujai versijai atlikite klaviatūros patikrinimą ir skenavimą.

Jei naudojate prieinamumo valdiklį, įskaitant mūsiškį, testuokite svetainę, kai valdiklis uždarytas. Skydelis, pavyzdžiui, SiteAccessible, suteikia lankytojams papildomų būdų pritaikyti puslapį, bet WCAG klausia, ar puslapis veikia toks, koks rodomas iš pradžių. Kai kurios audito sistemos nevertina puslapių, kuriuose veikia perdangos skriptas, todėl pirmiausia pasitarkite su auditoriumi.