Kako testirati pristupačnost web-stranice: alati i ručne provjere

Evo priče koju često čujemo. Netko pokrene Lighthouse, dobije zelenih 100 za pristupačnost i ide dalje. Tjedan dana kasnije javi se kupac koji nije mogao platiti jer se do obrasca za karticu ne može doći tipkovnicom. Obje su stvari istinite. Automatizirana provjera je prošla, a web-stranica je ipak iznevjerila stvarnu osobu.

Ovaj vodič pokazuje kako temeljito testirati uz mali proračun: koje besplatne alate pokrenuti, ručnu rutinu od 15 minuta, prvi pokušaj s čitačem zaslona i kada platiti reviziju.

Može li mi automatizirani alat reći je li moja web-stranica pristupačna?

Ne. Automatizirani alati brzo pronalaze neke probleme, ali na mnoga pitanja o pristupačnosti mora odgovoriti čovjek. Kad je britanska Vladina digitalna služba (GDS) testirala 10 alata na stranici sa 143 poznata propusta, najbolji je pronašao 41 %. W3C to kaže jasno: alati za evaluaciju „ne mogu utvrditi pristupačnost, mogu samo pomoći u tome“.

Test GDS-a (otvara se u novoj kartici) potječe iz veljače 2017., a njegovih 41 % (koje je postigao Asqatasun) uključuje i podsjetnike alata za ručne provjere. Alati su se od tada poboljšali, ali jaz ima isti uzrok. Softver može utvrditi da slika nema alternativni tekst. Ne može utvrditi da je „crvena haljina“ pogrešan opis fotografije plavog odijela niti ima li vaš redoslijed fokusa smisla.

Zato alat za provjeru shvatite kao dojavnik požara, a ne kao cjelovit pregled zgrade. Ipak ga se isplati pokretati: WebAIM Million 2026 (otvara se u novoj kartici) pronašao je uočljive propuste na 95,9 % početnih stranica milijun najposjećenijih web-stranica, pa većinu web-stranica čekaju brzi popravci. Kako kaže W3C-ov vodič za odabir alata (otvara se u novoj kartici): „Potrebna je ljudska prosudba.“

Koje besplatne alate za testiranje pristupačnosti koristiti?

Koristite jedan ili dva automatizirana alata za provjeru, alat za kontrast i čitač zaslona. Alati primjenjuju različita pravila i različito prikazuju rezultate, pa dva alata obično uhvate više od jednoga. Svaki alat u nastavku ima besplatnu verziju. Prije nego što se na neki oslonite, provjerite njegove aktualne uvjete jer se nazivi, značajke i cijene mijenjaju.

Što mogu ručno provjeriti u 15 minuta?

Prilično mnogo. W3C-ove Easy Checks (otvara se u novoj kartici) obuhvaćaju naslove stranica, alternativni tekst, naslove odjeljaka, kontrast, poveznice za preskakanje, vidljiv fokus tipkovnice, jezik stranice, povećanje, titlove i oznake obrazaca. Odaberite jednu važnu stranicu, primjerice stranicu proizvoda ili obrazac za rezervaciju, i svakoj provjeri posvetite minutu ili dvije. Pronaći ćete stvari koje nijedan alat ne prijavljuje.

W3C navodi da te provjere „pokrivaju samo nekoliko pitanja pristupačnosti“, pa nisu potpuna evaluacija. Ipak je to najbolje utrošena četvrt sata:

1. Naslov stranice (1 minuta). Piše li na kartici preglednika o kakvoj je stranici riječ, primjerice „Rezervirajte stol | Rozina kuhinja“, umjesto posvuda „Početna“?
2. Slike (2 minute). Prikažite alternativni tekst pomoću WAVE-a ili sličnog alata. Je li točan? Preskaču li se ukrasne slike?
3. Naslovi (2 minute). Prikažite popis naslova i pročitajte ih zasebno. Funkcioniraju li kao kazalo sadržaja?
4. Kontrast (2 minute). Provjerite osnovni tekst, sitni sivi tekst, tekst gumba i tekst preko slika.
5. Tipkovnica (4 minute). Odložite miš i tipkom Tab prođite kroz stranicu (pogledajte sljedeći odjeljak).
6. Povećanje (2 minute). Možete li pri 200 %, a zatim pri 400 % i dalje sve pročitati i koristiti izbornik bez pomicanja ulijevo i udesno?
7. Obrasci i jezik (2 minute). Kliknite oznaku svakog polja; u dobro izrađenom obrascu to stavlja pokazivač u polje. U izvješću alata provjerite nedostaje li oznaka jezika stranice.

Kako testirati tipkovnicom?

Maknite miš. Pritišćite Tab za kretanje naprijed, Shift+Tab za povratak, Enter za otvaranje poveznica, razmaknicu ili Enter za pritiskanje gumba te strelice u izbornicima i izbornim gumbima. Svaki interaktivni element mora biti dostupan, uvijek morate vidjeti gdje ste i nikada ne smijete zapeti.

Na Macu Safari pri pritisku tipke Tab preskače poveznice dok u njegovim naprednim postavkama (Advanced) ne uključite mogućnost „Press Tab to highlight each item on a webpage“ („Pritisnite Tab za isticanje svake stavke na web-stranici“). Zatim provjerite:

• Vidite li uvijek gdje ste? Ako obrub fokusa nestane, korisnik tipkovnice je izgubljen.
• Je li redoslijed logičan? Fokus bi trebao pratiti redoslijed čitanja.
• Je li nešto prekriveno? Fiksno zaglavlje ili banner o kolačićima koji skriva element u fokusu krši kriterij Fokus nije zaklonjen u WCAG 2.2.
• Možete li ponovno izaći? Otvorite svaki izbornik, skočni prozor i odabir datuma, a zatim pokušajte izaći. Escape bi trebao zatvarati dijaloške okvire.
• Radi li cijeli put? Dodajte proizvod, promijenite količinu, primijenite kod za popust i dođite do plaćanja bez miša.

Svaki propust zapišite precizno: „Odabir veličine na stranici proizvoda ne otvara se tipkom Enter ni razmaknicom“ popravit će se mnogo brže nego „tipkovnica ne radi“.

Kako prvi put testirati čitačem zaslona?

Počnite s čitačem zaslona koji vaš uređaj već ima ili s NVDA-om na Windowsima i poslušajte jednu stranicu. Ne pokušavate ga koristiti kao stručnjak. Provjeravate najavljuju li se naslovi, poveznice, gumbi, slike i polja obrazaca smislenim nazivima te šuti li išta važno.

• Mac: Command+F5 uključuje i isključuje VoiceOver; Control+Option+U otvara rotor, popis naslova, poveznica i kontrola obrazaca.
• Windows: u NVDA-u pritisnite H za skakanje između naslova i Insert+F7 za popis poveznica i naslova.
• Mobitel: uključite VoiceOver (iPhone) ili TalkBack (Android) i prelazite prstom udesno za kretanje od stavke do stavke. Najprije naučite kako ga isključiti.

Slušajte ono što je najvažnije. U WebAIM-ovu istraživanju korisnika čitača zaslona iz 2024. (otvara se u novoj kartici) 71,6 % ispitanika reklo je da se na dugoj stranici najprije snalaze po naslovima, pa počnite ondje. Zatim otvorite popis poveznica: pet poveznica „Pročitajte više“ nikome ništa ne govori. „Dodaj u košaricu, tamnoplavi džemper“ koristan je gumb; „gumb“ nije. Na kraju ispunite obrazac i provjerite čita li se svako polje i svaka pogreška.

Budite skromni u zaključcima. Ako vam nešto zvuči pokvareno, vjerojatno jest; ako zvuči dobro, to nije dokaz. Kako iskusni korisnici zapravo rade, pročitajte u članku kako osobe s invaliditetom koriste web.

Kako provjeriti povećanje, prelamanje i razmak teksta?

Povećajte prikaz u pregledniku na 200 % i provjerite raste li tekst bez odrezivanja ili preklapanja. Zatim testirajte prelamanje: pri povećanju od 400 % u prozoru širokom 1.280 piksela sadržaj bi trebao stati bez vodoravnog pomicanja. Na kraju povećajte razmak između slova, riječi, redaka i odlomaka i provjerite da se ništa ne kvari ni ne nestaje.

Te provjere odgovaraju WCAG-ovim kriterijima Promjena veličine teksta (1.4.4), Prelamanje sadržaja (1.4.10) (otvara se u novoj kartici) i Razmak teksta (1.4.12) (otvara se u novoj kartici). Prelamanje koristi širinu od 320 CSS piksela, što prema W3C-u „odgovara početnoj širini prikaza od 1.280 CSS piksela pri povećanju od 400 %“. Razmak teksta traži da se ništa ne izgubi kad čitatelj postavi razmak redaka na 1,5 puta veličinu fonta, razmak odlomaka na 2 puta, razmak slova na 0,12 puta i razmak riječi na 0,16 puta.

Bookmarklet za razmak teksta, mala skripta spremljena kao knjižna oznaka, jednim klikom primjenjuje sve četiri vrijednosti. Tražite tekst koji izlazi iz gumba i oznake odrezane na rubu. Pri povećanju od 400 % prijenosno računalo prikazuje otprilike ono što prikazuje mali mobitel, pa dobro izrađena prilagodljiva web-stranica velik dio toga već prolazi.

Kako provjeriti obrasce, pogreške i naplatu?

Svaki važan obrazac ispunite tri puta: jednom ispravno, jednom sa svim poljima praznima i jednom s namjernim pogreškama. Svako polje mora imati vidljivu oznaku, svaka pogreška mora biti riječima objašnjena uz svoje polje, a u polja za lozinku i kod za potvrdu morate moći lijepiti.

• Pogreške. „Neispravan unos“ crvenom bojom nije dovoljan. „Upišite datum isteka u obliku MM/GG“ uz polje jest. Nakon slanja fokus bi trebao prijeći na sažetak pogrešaka ili na prvo problematično polje.
• Prijava i kodovi. Prema kriteriju pristupačne autentifikacije (otvara se u novoj kartici) u WCAG 2.2 blokiranje lijepljenja ili upravitelja lozinki je propust, osim ako postoji drugi način prijave.
• CAPTCHA i vremenska ograničenja. Korisnici čitača zaslona u WebAIM-ovu su istraživanju CAPTCHA proglasili najproblematičnijom stvari na webu. Provjerite postoji li pristupačna alternativa i mogu li se vremenska ograničenja produljiti.

Naš kontrolni popis za pristupačnost web-stranice ima potpuniji popis za trgovine, uključujući bannere o kolačićima i skočne prozore.

Što uključuje profesionalna revizija pristupačnosti i kada mi treba?

Revizija pristupačnosti strukturiran je pregled koji stručnjak provodi prema navedenoj normi, obično WCAG 2.1 ili 2.2 razine AA. Kombinira automatizirano skeniranje s ručnim testiranjem i testiranjem asistivnom tehnologijom vaših ključnih predložaka i korisničkih tijekova, a završava izvješćem s prioritetima. Treba vam kad se zakon odnosi na vas, prije velikog pokretanja ili kad klijenti traže dokaze.

Prije nego što dogovorite cijenu, pitajte:

• Prema kojoj normi, verziji i razini ćete testirati?
• Koji su predlošci i korisnički tijekovi obuhvaćeni? Za trgovinu: početna stranica, kategorija, proizvod, košarica, naplata, stranice korisničkog računa i obrasci.
• Testirate li ručno čitačima zaslona, tipkovnicom i povećanjem te na kojim preglednicima i uređajima?
• Rangira li izvješće probleme po ozbiljnosti, navodi li gdje se nalaze i predlaže li popravke?
• Je li ponovno testiranje uključeno?

Cijene se jako razlikuju ovisno o izvođaču, državi i opsegu, pa usporedite što je uključeno. Ako vas obuhvaća Europski akt o pristupačnosti, revizija podupire i vašu javnu izjavu; naš vodič kroz akt objašnjava tko je obuhvaćen.

Zašto testirati s korisnicima s invaliditetom?

Zato što usklađenost s normom i jednostavnost korištenja nisu isto. Naplata može ispunjavati svaki kriterij WCAG-a, a korisniku čitača zaslona ipak oduzeti dvadeset minuta. W3C navodi da evaluacija s korisnicima s invaliditetom „otkriva probleme upotrebljivosti koje sama evaluacija usklađenosti ne otkriva“ i vašem timu pokazuje kako ljudi stvarno koriste web-stranicu.

Ne treba vam laboratorij. Nekoliko sesija na vašem najvažnijem zadatku, primjerice pronalaženju proizvoda i plaćanju, naučit će vas više od još jednog kruga skeniranja. Sudionike pronađite preko udruga osoba s invaliditetom, agencija za istraživanje ili među vlastitim kupcima i platite im uloženo vrijeme. Pustite ih da koriste vlastite uređaje i postavke. W3C-ov vodič o uključivanju korisnika u evaluaciju (otvara se u novoj kartici) pokriva praktičnu stranu.

Što učiniti s rezultatima?

Poredajte probleme prema tome koliko jako blokiraju ljude i gdje se pojavljuju, popravite ih u vlastitom kodu i sadržaju web-stranice, ponovno testirajte i zabilježite što je još otvoreno. Neoznačeno polje na naplati važnije je od propusta u kontrastu u podnožju, a popravak u zajedničkom predlošku popravlja svaku stranicu koja ga koristi.

1. Odredite prioritete. Najprije blokirajući problemi u ključnim tijekovima (naplata, rezervacija, registracija), zatim zajednički predlošci, a onda pojedinačne stranice.
2. Popravljajte na izvoru. Promijenite temu, komponentu ili sadržaj, a ne samo simptom.
3. Ponovno testirajte. Ponovite iste provjere, ručno i alatima.
4. Dokumentirajte. Poznate probleme, s datumima, navedite u svojoj izjavi o pristupačnosti. Naš vodič kroz WCAG 2.2 objašnjava novije kriterije.
5. Ponavljajte. Provjeru tipkovnicom i skeniranje dodajte svakom izdanju.

Ako koristite widget za pristupačnost, uključujući naš, testirajte sa zatvorenim widgetom. Panel poput SiteAccessiblea posjetiteljima daje dodatne načine prilagodbe stranice, ali WCAG pita radi li stranica u zadanom stanju. Neki programi revizije ne ocjenjuju stranice na kojima radi overlay skripta, pa to najprije provjerite sa svojim revizorom.