Kā testēt vietnes piekļūstamību: bezmaksas rīki un pārbaudes

Lūk, stāsts, ko dzirdam bieži. Kāds palaiž Lighthouse, saņem zaļu 100 par piekļūstamību un dodas tālāk. Pēc nedēļas klients raksta, ka nevarēja samaksāt, jo kartes veidlapu nevar sasniegt ar tastatūru. Abas lietas ir patiesas. Automātiskā pārbaude bija veiksmīga, bet vietne tomēr pievīla reālu cilvēku.

Šajā pamācībā parādīts, kā ar nelielu budžetu testēt pareizi: kurus bezmaksas rīkus palaist, 15 minūšu manuālu pārbaužu kārtība, pirmais mēģinājums ar ekrāna lasītāju un kad vērts maksāt par auditu.

Vai automātisks pārbaudes rīks var pateikt, vai mana vietne ir piekļūstama?

Nē. Automātiskie pārbaudes rīki dažas problēmas atrod ātri, taču uz daudziem piekļūstamības jautājumiem var atbildēt tikai cilvēks. Kad Apvienotās Karalistes valdības digitālais dienests (Government Digital Service) testēja 10 rīkus lapā ar 143 zināmām kļūdām, labākais atrada 41 %. W3C to saka tieši: novērtēšanas rīki “nevar noteikt piekļūstamību, tie var tikai palīdzēt to izdarīt.”

GDS tests (atveras jaunā cilnē) veikts 2017. gada februārī, un tā 41 % (Asqatasun) ietvēra arī rīka norādes uz manuālām pārbaudēm. Kopš tā laika rīki ir uzlabojušies, taču plaisai ir tas pats iemesls. Programmatūra var pateikt, ka attēlam nav alternatīvā teksta. Tā nevar pateikt, ka “sarkana kleita” ir nepareizs apraksts zila uzvalka fotoattēlam, vai to, vai jūsu fokusa secība ir loģiska.

Tāpēc uztveriet pārbaudes rīku kā dūmu detektoru, nevis ēkas ekspertīzi. Palaist to tomēr ir vērts: WebAIM Million 2026 (atveras jaunā cilnē) atrada konstatējamas kļūdas 95,9 % no miljona populārāko sākumlapu, tāpēc lielākajā daļā vietņu gaida ātri ieguvumi. Kā teikts W3C ceļvedī par rīku izvēli (atveras jaunā cilnē): “Ir vajadzīgs cilvēka spriedums.”

Kurus bezmaksas piekļūstamības testēšanas rīkus izmantot?

Izmantojiet vienu vai divus automātiskos pārbaudes rīkus, kontrasta pārbaudes rīku un ekrāna lasītāju. Rīki piemēro dažādus noteikumus un rezultātus parāda atšķirīgi, tāpēc divi rīki parasti atrod vairāk nekā viens. Katram tālāk minētajam rīkam ir bezmaksas versija. Pirms uz tiem paļaujaties, pārbaudiet aktuālos noteikumus, jo nosaukumi, funkcijas un cenas mainās.

Ko varu manuāli pārbaudīt 15 minūtēs?

Diezgan daudz. W3C vienkāršās pārbaudes (Easy Checks) (atveras jaunā cilnē) aptver lapu nosaukumus, alternatīvo tekstu, virsrakstus, kontrastu, izlaišanas saites, redzamu tastatūras fokusu, lapas valodu, tālummaiņu, subtitrus un veidlapu etiķetes. Izvēlieties vienu svarīgu lapu, piemēram, produkta lapu vai rezervēšanas veidlapu, un katrai pārbaudei veltiet minūti vai divas. Atradīsiet lietas, par kurām neziņo neviens rīks.

W3C norāda, ka šīs pārbaudes “aptver tikai dažas piekļūstamības problēmas”, tātad tās nav pilns novērtējums. Tomēr tā ir vislabāk pavadītā stundas ceturtdaļa:

1. Lapas nosaukums (1 minūte). Vai pārlūkprogrammas cilnē rakstīts, kāda lapa tā ir, piemēram, “Galdiņa rezervēšana | Restorāns Rosa”, nevis visur “Sākums”?
2. Attēli (2 minūtes). Parādiet alternatīvo tekstu ar WAVE vai līdzīgu rīku. Vai tas ir precīzs? Vai rotājumi tiek izlaisti?
3. Virsraksti (2 minūtes). Parādiet virsrakstu sarakstu un izlasiet tos atsevišķi. Vai tie darbojas kā satura rādītājs?
4. Kontrasts (2 minūtes). Pārbaudiet pamattekstu, sīku pelēku tekstu, pogu tekstu un tekstu uz attēliem.
5. Tastatūra (4 minūtes). Nolieciet peli malā un ar tabulēšanas taustiņu izejiet cauri lapai (skatiet nākamo sadaļu).
6. Tālummaiņa (2 minūtes). Vai ar 200 % un pēc tam 400 % tālummaiņu joprojām varat visu izlasīt un lietot izvēlni, neritinot uz sāniem?
7. Veidlapas un valoda (2 minūtes). Noklikšķiniet uz katra lauka etiķetes; labi veidotā veidlapā tas novieto kursoru laukā. Pārbaudiet rīka pārskatā, vai lapas valoda ir norādīta.

Kā testēt ar tastatūru?

Nolieciet peli prom. Spiediet tabulēšanas taustiņu, lai virzītos uz priekšu, Shift+Tab, lai atgrieztos, Enter, lai atvērtu saites, atstarpes taustiņu vai Enter, lai nospiestu pogas, un bultiņu taustiņus izvēlnēs un radiopogās. Katram interaktīvajam elementam jābūt sasniedzamam, jums vienmēr jāredz, kur atrodaties, un jūs nekur nedrīkstat iestrēgt.

Mac datorā Safari, spiežot tabulēšanas taustiņu, izlaiž saites, līdz papildu iestatījumos (Advanced) ieslēdzat opciju “Press Tab to highlight each item on a webpage” (tabulēšanas taustiņš izceļ katru tīmekļa lapas elementu). Pēc tam pārbaudiet:

• Vai vienmēr redzat, kur atrodaties? Ja fokusa kontūra pazūd, tastatūras lietotājs ir apmaldījies.
• Vai secība ir loģiska? Fokusam jāseko lasīšanas secībai.
• Vai kaut kas to aizsedz? Fiksēta galvene vai sīkdatņu josla, kas paslēpj fokusā esošo elementu, neatbilst WCAG 2.2 kritērijam Fokuss nav aizsegts.
• Vai varat atkal tikt ārā? Atveriet katru izvēlni, uznirstošo logu un datuma atlasītāju un tad mēģiniet iziet. Taustiņam Escape jāaizver dialoglodziņi.
• Vai viss ceļš darbojas? Pievienojiet produktu, mainiet daudzumu, ievadiet atlaides kodu un nonāciet līdz maksājumam bez peles.

Katru kļūdu pierakstiet precīzi: “Produkta lapas izmēra atlasītāju nevar atvērt ar Enter vai atstarpes taustiņu” tiek salabots daudz ātrāk nekā “tastatūra nestrādā”.

Kā pirmo reizi testēt ar ekrāna lasītāju?

Sāciet ar ekrāna lasītāju, kas jau ir jūsu ierīcē, vai ar NVDA sistēmā Windows, un noklausieties vienu lapu. Jūs nemēģināt to lietot kā eksperti. Jūs pārbaudāt, vai virsraksti, saites, pogas, attēli un veidlapu lauki tiek nolasīti ar saprātīgiem nosaukumiem un vai nekas svarīgs nepaliek kluss.

• Mac: Command+F5 ieslēdz un izslēdz VoiceOver; Control+Option+U atver rotoru – virsrakstu, saišu un veidlapu vadīklu sarakstu.
• Windows: NVDA programmā spiediet H, lai pārlēktu starp virsrakstiem, un Insert+F7, lai parādītu saišu un virsrakstu sarakstu.
• Tālrunis: ieslēdziet VoiceOver (iPhone) vai TalkBack (Android) un velciet pa labi, lai pārietu no elementa uz elementu. Vispirms iemācieties, kā to izslēgt.

Ieklausieties tajā, kas ir vissvarīgākais. WebAIM 2024. gada ekrāna lasītāju aptaujā (atveras jaunā cilnē) 71,6 % respondentu norādīja, ka garā lapā vispirms pārvietojas pa virsrakstiem, tāpēc sāciet ar tiem. Pēc tam atveriet saišu sarakstu: piecas saites ar nosaukumu “Lasīt vairāk” nevienam neko nepasaka. “Ielikt grozā, tumši zils džemperis” ir noderīga poga, “poga” nav. Visbeidzot aizpildiet veidlapu un pārbaudiet, vai katrs lauks un katra kļūda tiek nolasīta.

Esiet piesardzīgi secinājumos. Ja jums šķiet, ka kaut kas ir salūzis, tā droši vien arī ir; ja izklausās labi, tas vēl nav pierādījums. Par to, kā patiesībā strādā pieredzējuši lietotāji, lasiet rakstā kā cilvēki ar invaliditāti lieto tīmekli.

Kā pārbaudīt tālummaiņu, satura pārkārtošanos un teksta atstarpes?

Palieliniet pārlūkprogrammā lapu līdz 200 % un pārbaudiet, vai teksts palielinās, netiekot nogriezts un nepārklājoties. Pēc tam testējiet satura pārkārtošanos: ar 400 % tālummaiņu 1280 pikseļu platā logā saturam jāietilpst bez ritināšanas uz sāniem. Visbeidzot palieliniet atstarpes starp burtiem, vārdiem, rindām un rindkopām un pārbaudiet, vai nekas nesalūzt un nepazūd.

Tas atbilst WCAG kritērijiem Teksta izmēra maiņa (1.4.4), Satura pārkārtošanās (1.4.10) (atveras jaunā cilnē) un Teksta atstarpes (1.4.12) (atveras jaunā cilnē). Satura pārkārtošanās kritērijs izmanto 320 CSS pikseļu platumu, kas, kā norāda W3C, “ir līdzvērtīgs sākotnējam 1280 CSS pikseļu skatlauka platumam ar 400 % tālummaiņu.” Teksta atstarpju kritērijs prasa, lai nekas nezustu, ja lasītājs iestata rindstarpu 1,5 reizes lielāku par fonta izmēru, rindkopu atstarpi 2 reizes, burtu atstarpi 0,12 reizes un vārdu atstarpi 0,16 reizes lielāku.

Teksta atstarpju grāmatzīmes skripts jeb neliels skripts, kas saglabāts kā grāmatzīme, ar vienu klikšķi piemēro visas četras vērtības. Meklējiet tekstu, kas izlīst ārpus pogām, un etiķetes, kas malā tiek nogrieztas. Ar 400 % tālummaiņu klēpjdators rāda aptuveni to pašu, ko mazs tālrunis, tāpēc labi veidota adaptīva vietne lielu daļu no tā jau tā izpilda.

Kā pārbaudīt veidlapas, kļūdu ziņojumus un norēķinus?

Aizpildiet katru svarīgo veidlapu trīs reizes: vienreiz pareizi, vienreiz atstājot visus laukus tukšus un vienreiz ar apzinātām kļūdām. Katram laukam jābūt redzamai etiķetei, katrai kļūdai jābūt paskaidrotai vārdiem blakus attiecīgajam laukam, un paroles un verifikācijas koda laukos jāvar ielīmēt.

• Kļūdas. Sarkans “Nederīga ievade” nav pietiekami. “Ievadiet derīguma termiņu formātā MM/GG” blakus laukam ir. Pēc iesniegšanas fokusam jāpāriet uz kļūdu kopsavilkumu vai pirmo kļūdaino lauku.
• Pieteikšanās un kodi. Saskaņā ar WCAG 2.2 piekļūstamas autentifikācijas kritēriju (atveras jaunā cilnē) ielīmēšanas vai paroļu pārvaldnieku bloķēšana neatbilst prasībām, ja vien nav cita veida, kā pieteikties.
• CAPTCHA un laika ierobežojumi. WebAIM aptaujā ekrāna lasītāju lietotāji CAPTCHA atzina par problemātiskāko elementu tīmeklī. Pārbaudiet, vai ir piekļūstama alternatīva un vai laika ierobežojumus var pagarināt.

Mūsu tīmekļa vietnes piekļūstamības kontrolsarakstā ir plašāks saraksts e-veikaliem, tostarp par sīkdatņu joslām un uznirstošajiem logiem.

Ko ietver profesionāls piekļūstamības audits un kad tas vajadzīgs?

Piekļūstamības audits ir speciālista strukturēta pārbaude pēc konkrēta standarta, parasti WCAG 2.1 vai 2.2 AA līmeņa. Tas apvieno automātisku skenēšanu ar manuālu testēšanu un testēšanu ar palīgtehnoloģijām jūsu galvenajās veidnēs un lietotāju ceļos un noslēdzas ar prioritizētu ziņojumu. Tas vajadzīgs, ja uz jums attiecas likums, pirms lielas palaišanas vai tad, kad klienti prasa pierādījumus.

Pirms vienojaties par cenu, pajautājiet:

• Pēc kāda standarta, versijas un līmeņa jūs testēsiet?
• Kuras veidnes un lietotāju ceļi ir iekļauti? E-veikalam: sākumlapa, kategorija, produkts, grozs, norēķini, konta lapas un veidlapas.
• Vai testējat manuāli ar ekrāna lasītājiem, tastatūru un tālummaiņu, un kurās pārlūkprogrammās un ierīcēs?
• Vai ziņojumā problēmas sakārtotas pēc nopietnības, norādīta to atrašanās vieta un ieteikti labojumi?
• Vai atkārtota pārbaude ir iekļauta?

Cenas ļoti atšķiras atkarībā no piegādātāja, valsts un apjoma, tāpēc salīdziniet, kas ir iekļauts. Ja uz jums attiecas Eiropas Piekļūstamības akts, audits arī pamato jūsu publisko paziņojumu; mūsu pamācībā par EAA skaidrots, uz ko tas attiecas.

Kāpēc testēt kopā ar lietotājiem ar invaliditāti?

Tāpēc, ka atbilstība standartam un ērta lietošana nav viens un tas pats. Norēķinu process var atbilst visiem WCAG kritērijiem un tomēr ekrāna lasītāja lietotājam aizņemt divdesmit minūtes. W3C norāda, ka novērtēšana kopā ar lietotājiem ar invaliditāti “atklāj lietojamības problēmas, kuras neatklāj tikai atbilstības novērtēšana”, un tā parāda jūsu komandai, kā cilvēki vietni patiesībā lieto.

Laboratorija nav vajadzīga. Dažas sesijas ar jūsu svarīgāko uzdevumu, piemēram, produkta atrašanu un samaksu, iemācīs vairāk nekā vēl viena skenēšanas kārta. Dalībniekus meklējiet ar cilvēku ar invaliditāti organizāciju, pētījumu aģentūru vai savu klientu starpniecību un samaksājiet cilvēkiem par viņu laiku. Ļaujiet viņiem izmantot savas ierīces un iestatījumus. W3C ceļvedī par lietotāju iesaistīšanu novērtēšanā (atveras jaunā cilnē) aplūkota praktiskā puse.

Ko darīt ar rezultātiem?

Sakārtojiet problēmas pēc tā, cik nopietni tās traucē cilvēkiem un kur tās rodas, labojiet tās pašas vietnes kodā un saturā, testējiet atkārtoti un pierakstiet, kas vēl nav atrisināts. Lauks bez etiķetes norēķinos ir svarīgāks par kontrasta kļūdu kājenē, un labojums kopīgā veidnē salabo katru lapu, kas šo veidni izmanto.

1. Nosakiet prioritātes. Vispirms šķēršļi galvenajos lietotāju ceļos (norēķini, rezervēšana, reģistrācija), tad kopīgās veidnes, tad atsevišķas lapas.
2. Labojiet avotā. Mainiet tēmu, komponentu vai saturu, nevis tikai simptomu.
3. Testējiet atkārtoti. Atkārtojiet tās pašas pārbaudes gan manuāli, gan ar rīkiem.
4. Dokumentējiet. Uzskaitiet zināmās problēmas ar datumiem savā piekļūstamības paziņojumā. Mūsu pamācībā par WCAG 2.2 izskaidroti jaunākie kritēriji.
5. Atkārtojiet. Pievienojiet tastatūras pārbaudi un skenēšanu katrai jaunai versijai.

Ja izmantojat piekļūstamības logrīku, arī mūsējo, testējiet ar aizvērtu logrīku. Tāds panelis kā SiteAccessible dod apmeklētājiem papildu iespējas pielāgot lapu, taču WCAG jautā, vai lapa darbojas noklusējuma stāvoklī. Dažas audita shēmas nevērtē lapas, kurās darbojas pārklājuma skripts, tāpēc vispirms pajautājiet savam auditoram.