Kratak odgovor: WCAG 2.2 je važeća verzija Smjernica za pristupačnost web sadržaja koje objavljuje W3C. Preporuka W3C-a postala je 5. oktobra 2023, a važeći tekst nosi datum 12. decembra 2024. Nivo AA znači da stranica ispunjava svaki kriterij nivoa A i svaki kriterij nivoa AA, ukupno 55: 31 na nivou A i 24 na nivou AA. W3C navodi da sadržaj koji ispunjava WCAG 2.2 ispunjava i WCAG 2.0 i 2.1, pa ova lista pokriva i starije verzije. Za pravnu stranu u EU pogledajte naš vodič o Evropskom aktu o pristupačnosti.
Kako koristiti ovu listu
Kriteriji su grupisani po četiri principa WCAG-a: uočljivost, upravljivost, razumljivost i robusnost. Za svaki kriterij tabela navodi nivo, šta čovjek treba provjeriti i koliko alat može pomoći:
- Djelimično automatski: alat nađe dio grešaka, ali prolaz i dalje mora potvrditi čovjek. Po našoj podjeli to važi za 26 od 55 kriterija.
- Ručno: pouzdanog automatskog testa nema, pa provjerava čovjek. To važi za preostalih 29.
Nijedan kriterij nije označen kao potpuno automatski. I kad alat ništa ne nađe, neko mora potvrditi rezultat, što odgovara i savjetu W3C-a da alati za procjenu ne mogu utvrditi pristupačnost, nego samo pomoći u tome. Testirajte stranice koje predstavljaju Vaš sajt, poput početne, stranice sa sadržajem, pretrage, obrasca i naplate, i to u svim stanjima: otvoren meni, prikazane greške, vidljivi baneri.
Šta je novo u WCAG 2.2
WCAG 2.2 donosi šest novih kriterija na nivoima A i AA, i još tri na nivou AAA koje ova lista ne obuhvata. Uglavnom pomažu ljudima koji ne mogu koristiti miš ili imaju smanjenu pokretljivost ruku i ljudima sa kognitivnim teškoćama.
| Kriterij | Nivo | Šta traži |
|---|---|---|
| 2.4.11 Fokus nije zaklonjen (minimum) | AA | Element koji dobije fokus tastature ne smije biti potpuno sakriven iza fiksnog zaglavlja, banera za kolačiće ili drugog sadržaja. |
| 2.5.7 Pokreti prevlačenja | AA | Sve što radi prevlačenjem, poput klizača ili lista koje se mogu sortirati, mora raditi i jednostavnim klikovima ili dodirima. |
| 2.5.8 Veličina cilja (minimum) | AA | Elementi na koje se klikće moraju imati najmanje 24 × 24 CSS piksela ili dovoljno prostora oko sebe kako bi se lako pogodili. |
| 3.2.6 Dosljedna pomoć | A | Ako sajt nudi pomoć, poput broja telefona, kontakt-obrasca ili chata, ona se mora nalaziti na istom mjestu na svakoj stranici na kojoj je ponuđena. |
| 3.3.7 Suvišan ponovni unos | A | Podaci koje je posjetilac već unio u istom postupku moraju se automatski popuniti ili ponuditi za odabir, a ne tražiti ponovo. |
| 3.3.8 Pristupačna autentifikacija (minimum) | AA | Prijava ne smije zahtijevati test pamćenja ili rješavanja zagonetke osim ako postoji lakša alternativa, pa upravitelji lozinki i lijepljenje moraju raditi. |
Izvor: W3C, What's New in WCAG 2.2. Novi kriteriji nivoa AAA su 2.4.12, 2.4.13 i 3.3.9. Bosanski nazivi su naš prijevod, jer zvaničnog prijevoda nema.
Jedan kriterij je uklonjen: 4.1.1 Parsing je zastario i više nije dio WCAG 2.2. W3C napominje da ga, gdje propis još traži WCAG 2.0 ili 2.1, možda treba i dalje testirati i navoditi u izvještaju.
Princip 1: Uočljivost
Informacija mora doći do čovjeka kroz čulo koje može koristiti: alternativni tekst za slike, titlovi i transkripti za medije, struktura u kodu te dovoljno kontrasta i prilagodljivosti u prikazu.
| Kriterij | Nivo | Šta provjeriti | Test |
|---|---|---|---|
| 1.1.1 Netekstualni sadržaj | A | Provjerite da li alternativni tekst zaista opisuje ono što slika prenosi u svom kontekstu i da li su slike označene kao ukrasne zaista samo ukras. | Djelimično automatski |
| 1.2.1 Samo zvuk i samo video (snimljeno) | A | Pronađite svaki snimak koji ima samo zvuk ili samo sliku i potvrdite da uz njega postoji potpun transkript ili opis. | Ručno |
| 1.2.2 Titlovi (snimljeno) | A | Pustite svaki video s uključenim titlovima i provjerite da li postoje, da li su tačni i usklađeni sa slikom te da li navode važne zvukove. | Djelimično automatski |
| 1.2.3 Audio-opis ili medijska alternativa (snimljeno) | A | Pogledajte svaki video i procijenite da li je informacija koja se samo vidi dostupna i kroz audio-opis ili tekstualnu verziju. | Ručno |
| 1.2.4 Titlovi (uživo) | AA | Ako sajt prenosi video uživo, potvrdite da tokom prenosa postoje čitljivi titlovi u stvarnom vremenu. | Ručno |
| 1.2.5 Audio-opis (snimljeno) | AA | Poslušajte svaki video bez gledanja i provjerite da li audio-opis nadoknađuje vizuelne informacije koje biste inače propustili. | Ručno |
| 1.3.1 Informacije i odnosi | A | Uporedite ono što vidite s onim što čitač ekrana izgovara: vizuelni naslovi, liste, tabele i grupe trebaju biti tako označeni i u kodu. | Djelimično automatski |
| 1.3.2 Smislen redoslijed | A | Pročitajte stranicu bez CSS-a ili čitačem ekrana i provjerite da li sadržaj tim redoslijedom i dalje ima smisla. | Ručno |
| 1.3.3 Senzorne karakteristike | A | Potražite upute koje se pozivaju na oblik, položaj ili zvuk i provjerite da li element imenuju i riječima. | Ručno |
| 1.3.4 Orijentacija ekrana | AA | Okrenite telefon ili tablet na ključnim stranicama i potvrdite da sadržaj nije zaključan na jednu orijentaciju. | Djelimično automatski |
| 1.3.5 Prepoznavanje svrhe unosa | AA | Provjerite da li svako polje koje traži podatke o samom posjetiocu ima odgovarajuću vrijednost autocomplete, a ne samo ispravno napisanu. | Djelimično automatski |
| 1.4.1 Upotreba boje | A | Pogledajte grafikone, obrasce i statusne poruke u sivim tonovima i provjerite da se ništa važno ne gubi. | Djelimično automatski |
| 1.4.2 Kontrola zvuka | A | Učitajte svaku stranicu s uključenim zvukom i potvrdite da se automatski zvuk može lako zaustaviti kontrolom pri vrhu stranice. | Djelimično automatski |
| 1.4.3 Kontrast (minimum) | AA | Provjerite tekst preko slika, prelaza boja i videa te tekst u stanjima prelaska mišem, fokusa i greške, koje automatski alati često ne mogu izmjeriti. | Djelimično automatski |
| 1.4.4 Promjena veličine teksta | AA | Uvećajte prikaz u pregledniku na 200% i provjerite da nijedan tekst nije odsječen, preklopljen ili sakriven. | Djelimično automatski |
| 1.4.5 Slike teksta | AA | Potražite banere, dugmad i grafike u kojima je tekst dio slike i provjerite da li bi mogao biti pravi tekst. | Ručno |
| 1.4.10 Prelamanje sadržaja | AA | Uvećajte prikaz u desktop pregledniku na 400% i provjerite da li su sav sadržaj i sve funkcije i dalje dostupni te da se ništa ne preklapa. | Djelimično automatski |
| 1.4.11 Netekstualni kontrast | AA | Izmjerite kontrast ivica polja, dugmadi s ikonama, kućica za označavanje i linija na grafikonima u odnosu na susjedne boje. | Ručno |
| 1.4.12 Razmaci u tekstu | AA | Primijenite alat za povećanje razmaka teksta (bookmarklet) na ključnim stranicama i provjerite da li je tekst na dugmadi, menijima i karticama odsječen ili preklopljen. | Djelimično automatski |
| 1.4.13 Sadržaj pri prelasku mišem ili fokusu | AA | Pređite mišem i tasterom Tab preko elemenata koji otkrivaju dodatni sadržaj i provjerite da li ga taster Esc zatvara i možete li pokazivač pomjeriti na njega. | Ručno |
Princip 2: Upravljivost
Sve mora raditi tastaturom i drugim načinima unosa, ostaviti dovoljno vremena, izbjegavati sadržaj koji može izazvati napade te olakšati snalaženje i pogađanje ciljeva.
| Kriterij | Nivo | Šta provjeriti | Test |
|---|---|---|---|
| 2.1.1 Tastatura | A | Sklonite miš i tasterima Tab, Shift+Tab, Enter, razmaknicom i strelicama dođite do svake kontrole, menija i obrasca te ih koristite. | Djelimično automatski |
| 2.1.2 Bez zamke za tastaturu | A | Tasterom Tab uđite u ugrađene plejere, mape, chat prozore i dijaloge i potvrdite da iz njih uvijek možete izaći tasterom Tab ili Esc. | Djelimično automatski |
| 2.1.4 Prečice od jednog tastera | A | Pritiskajte pojedinačna slova i brojeve na stranici; ako se nešto desi, potvrdite da se prečice mogu isključiti ili promijeniti. | Ručno |
| 2.2.1 Podesivo vrijeme | A | Potražite istek sesije, obrasce s vremenskim ograničenjem i sadržaj koji se sam mijenja te provjerite da li su posjetioci upozoreni i mogu li tražiti više vremena. | Djelimično automatski |
| 2.2.2 Pauziranje, zaustavljanje, sakrivanje | A | Provjerite da li slajderi, karuseli, animacije i trake s vijestima imaju vidljivu kontrolu za pauzu ili zaustavljanje koja radi i tastaturom. | Djelimično automatski |
| 2.3.1 Najviše tri bljeska ili ispod praga | A | Pregledajte videe, animacije i GIF-ove u potrazi za brzim bljeskanjem, a ako nešto brzo bljeska, provjerite to alatom kao što je PEAT. | Ručno |
| 2.4.1 Preskakanje blokova | A | Pritisnite Tab odmah nakon učitavanja stranice i provjerite da li se pojavljuje vidljiv link za preskakanje koji fokus prebacuje na glavni sadržaj. | Djelimično automatski |
| 2.4.2 Naslov stranice | A | Pročitajte naslove nekoliko stranica i provjerite da li je svaki jedinstven i govori Vam gdje se nalazite. | Djelimično automatski |
| 2.4.3 Redoslijed fokusa | A | Prođite tasterom Tab kroz cijelu stranicu, uključujući menije i dijaloge, i provjerite da li se fokus kreće razumnim redom i nikada ne skače neočekivano. | Ručno |
| 2.4.4 Svrha linka (u kontekstu) | A | Pročitajte tekstove linkova samostalno i zajedno s okolnom rečenicom i provjerite možete li zaključiti kuda svaki vodi. | Djelimično automatski |
| 2.4.5 Više načina | AA | Provjerite da li sajt nudi barem dvoje od sljedećeg: glavnu navigaciju, pretragu, mapu sajta ili linkove između povezanih stranica. | Ručno |
| 2.4.6 Naslovi i oznake | AA | Pročitajte popis naslova i oznake polja izvan konteksta i provjerite da li je svaka jasna i konkretna. | Ručno |
| 2.4.7 Vidljiv fokus | AA | Prođite tasterom Tab kroz svaki interaktivni element i provjerite da li je indikator fokusa jasno vidljiv na svakom, i na tamnim pozadinama i preko slika. | Djelimično automatski |
| 2.4.11 Fokus nije zaklonjen (minimum) | AA | Prođite tasterom Tab kroz stranicu dok je baner za kolačiće otvoren i ponovo nakon pomicanja te provjerite da li je fokusirani element uvijek barem djelimično vidljiv. | Djelimično automatski |
| 2.5.1 Pokreti pokazivačem | A | Provjerite mape, slajdere i galerije koji koriste pokrete i potvrdite da postoje dugmad ili druge alternative jednim pokazivačem. | Ručno |
| 2.5.2 Otkazivanje radnje pokazivača | A | Pritisnite i držite dugmad i linkove, pomjerite pokazivač u stranu pa otpustite i provjerite da se radnja nije izvršila. | Ručno |
| 2.5.3 Vidljiva oznaka u nazivu | A | Uporedite vidljive oznake s onim što čitač ekrana izgovara i provjerite da li su vidljive riječi uključene, najbolje na početku. | Djelimično automatski |
| 2.5.4 Aktiviranje pokretom | A | Ako neka funkcija reaguje na pokret uređaja, potvrdite da postoji alternativa putem dugmeta i da se reakcija na pokret može isključiti. | Ručno |
| 2.5.7 Pokreti prevlačenja | AA | Pronađite svaku interakciju prevlačenja ili klizača i potvrdite da se može obaviti i pojedinačnim klikovima, npr. dugmadima sa strelicama. | Ručno |
| 2.5.8 Veličina cilja (minimum) | AA | Na telefonu provjerite male ikone, dugmad za zatvaranje i linkove postavljene blizu jedan drugom te potvrdite da su izuzeci, poput linkova unutar rečenice, ispravno primijenjeni. | Djelimično automatski |
Princip 3: Razumljivost
Stranice moraju navesti svoj jezik, ponašati se predvidivo i pomoći ljudima da izbjegnu i isprave greške u obrascima.
| Kriterij | Nivo | Šta provjeriti | Test |
|---|---|---|---|
| 3.1.1 Jezik stranice | A | Provjerite da li navedeni jezik odgovara jeziku na kojem je stranica zaista napisana, posebno na prevedenim stranicama. | Djelimično automatski |
| 3.1.2 Jezik dijelova | AA | Potražite citate, izraze ili odjeljke na drugom jeziku i provjerite da li svaki ima ispravan atribut lang. | Djelimično automatski |
| 3.2.1 Pri fokusu | A | Prođite tasterom Tab kroz sve kontrole i provjerite da se ništa ne otvara, šalje ili pomjera neočekivano samo zato što je element dobio fokus. | Ručno |
| 3.2.2 Pri unosu | A | Mijenjajte padajuće menije, kućice za označavanje i radio-dugmad i provjerite da stranica ne prelazi na drugu adresu niti šalje obrazac bez upozorenja. | Ručno |
| 3.2.3 Dosljedna navigacija | AA | Uporedite zaglavlje, meni i podnožje na nekoliko stranica i provjerite da li stavke zadržavaju isti redoslijed. | Ručno |
| 3.2.4 Dosljedno označavanje | AA | Provjerite da li ikone i dugmad koji se ponavljaju imaju iste oznake i isti alternativni tekst na svakoj stranici. | Ručno |
| 3.2.6 Dosljedna pomoć | A | Uporedite nekoliko stranica i provjerite da li kontakt-podaci i linkovi za pomoć ostaju na istom mjestu u odnosu na ostatak stranice. | Ručno |
| 3.3.1 Prepoznavanje grešaka | A | Pošaljite obrasce prazne i s pogrešnim podacima i provjerite da li je svaka greška opisana tekstom, a ne samo crvenim okvirom. | Ručno |
| 3.3.2 Oznake ili upute | A | Provjerite da li svako polje ima vidljivu, trajnu oznaku, a ne samo tekst koji nestaje pri kucanju, i da li su traženi formati objašnjeni. | Djelimično automatski |
| 3.3.3 Prijedlog ispravke greške | AA | Izazovite greške, poput pogrešnog formata datuma, i provjerite da li poruka objašnjava kako izgleda ispravan unos. | Ručno |
| 3.3.4 Sprječavanje grešaka (pravno, finansijsko, podaci) | AA | Prođite kroz plaćanje, rezervaciju i brisanje naloga i potvrdite da postoji korak pregleda, potvrda ili mogućnost poništavanja. | Ručno |
| 3.3.7 Suvišan ponovni unos | A | Prođite kroz obrasce u više koraka i provjerite da se podaci, poput adrese za dostavu, ne traže dva puta bez opcije „isto kao gore“. | Ručno |
| 3.3.8 Pristupačna autentifikacija (minimum) | AA | Pokušajte se prijaviti uz upravitelj lozinki i lijepljenjem te provjerite da li svaka CAPTCHA koja traži prepisivanje izobličenog teksta ili rješavanje zagonetke ima alternativu. | Ručno |
Princip 4: Robusnost
Kod mora pomoćnim tehnologijama reći šta je koja kontrola i šta se dešava na stranici.
| Kriterij | Nivo | Šta provjeriti | Test |
|---|---|---|---|
| 4.1.2 Naziv, uloga, vrijednost | A | Čitačem ekrana isprobajte menije, kartice, harmonike i prekidače i provjerite da li svaki najavljuje šta je, kako se zove i da li je otvoren, odabran ili pritisnut. | Djelimično automatski |
| 4.1.3 Statusne poruke | AA | Uz uključen čitač ekrana pokrenite pretragu, dodavanje u korpu i slanje obrasca i provjerite da li se poruke koje se pojave pročitaju. | Ručno |
Kriteriji i nivoi: W3C WCAG 2.2; bosanski nazivi su naš prijevod. Kolona „Test“ je naša oprezna podjela, ista koju koristi naša besplatna provjera.
Kako testirati ručno
Veći dio liste svodi se na nekoliko ručnih testova koje može naučiti svako u Vašem timu. Radite ih na pravim stranicama, a ne na dizajnu:
- Tastatura: sklonite miš i koristite Tab, Shift+Tab, Enter, razmaknicu, Esc i strelice. Do svakog linka, dugmeta, menija i obrasca mora se moći doći i koristiti ga, fokus mora uvijek biti vidljiv i kretati se logičnim redom, i nigdje ne smijete zaglaviti.
- Čitači ekrana: koristite NVDA uz Firefox ili Chrome na Windowsu i VoiceOver na Macu i iPhoneu. Slušajte naslove, tekstove linkova, oznake polja i poruke o greškama i provjerite da li dugmad najavljuju svoj naziv i stanje.
- Uvećanje: na 200% nijedan tekst ne smije biti odsječen (1.4.4). Na 400% u desktop pregledniku sa prozorom širine 1.280 piksela, što W3C izjednačava sa širinom od 320 CSS piksela, sadržaj se mora prelomiti bez pomicanja u stranu (1.4.10).
- Razmaci u tekstu: postavite visinu reda na 1,5 veličine fonta, razmak iza pasusa na 2, razmak između slova na 0,12 i razmak između riječi na 0,16 veličine fonta, na primjer alatom (bookmarklet), i provjerite da tekst nije odsječen ni preklopljen (1.4.12).
- Kontrast: izmjerite tekst, i preko slika i u stanjima prelaska mišem i greške, prema omjeru 4,5:1 (3:1 za krupan tekst), a ivice, ikone i indikatore fokusa prema 3:1.
- Obrasci: pošaljite svaki obrazac prazan i s pogrešnim podacima i provjerite da li su greške imenovane tekstom, da li objašnjavaju ispravku i da li ih čitač ekrana pročita.
- Mobitel: okrenite telefon, provjerite da ciljevi za dodir imaju najmanje 24 × 24 CSS piksela ili dovoljno prostora oko sebe i pokušajte svako prevlačenje zamijeniti pojedinačnim dodirima.
Šta automatski alati nađu, a šta propuste
Automatski alati su brzi i vrijedi ih pustiti pri svakom objavljivanju, ali testiraju ono što se može izmjeriti u kodu: alternativni tekst koji nedostaje, kontrast teksta na jednobojnoj pozadini, polja obrasca bez oznake, jezik ili naslov stranice koji nedostaje i neispravne ARIA atribute. Ne mogu procijeniti da li alternativni tekst ima smisla, da li je redoslijed fokusa logičan, da li poruka o grešci pomaže ni da li su titlovi tačni.
Objavljena mjerenja zavise od metode. U testu britanske vladine digitalne službe (GDS) iz 2017. na stranici sa 143 namjerne greške najbolji pojedinačni alat našao je 37% grešaka (41% ako se računaju i upozorenja za ručnu provjeru), svih deset alata zajedno 71%, a 29% nije našao nijedan alat. Deque, kompanija koja razvija axe-core, navodi da su njeni automatski testovi u prvim revizijama više od 13.000 stranica našli 57,38% grešaka; taj broj mjeri količinu grešaka, a ne kriterije WCAG-a, i dolazi iz Dequeovih vlastitih podataka. U oba slučaja čist automatski rezultat je početak, a ne kraj.
Besplatna provjera i revizija
Naša besplatna provjera pristupačnosti za oko minutu testira do 10 stranica prema WCAG 2.2 A i AA: pravila axe-core, a uz njih tastaturu, vidljiv fokus, prikaz na 320 px i kontrast preko slika, uz spisak onoga što čovjek još mora provjeriti. Naša revizija pristupačnosti, od 600 KM, ručno pokriva svih 55 kriterija tastaturom i čitačima ekrana, a popravke radimo u Vašem kodu po fiksnoj cijeni dogovorenoj poslije revizije. Cijene su konačne i na njih se ništa ne dodaje. Ne izdajemo certifikate; dokumentujemo šta smo testirali i šta smo popravili. Pogledajte reviziju pristupačnosti.
Naša cijena
Revizija pristupačnosti · od 600 KM
Izvori
- W3C: Smjernice za pristupačnost web sadržaja (WCAG) 2.2, preporuka od 12.12.2024.
- W3C WAI: šta je novo u WCAG 2.2
- W3C: Understanding Conformance (nivoi usklađenosti, WCAG 2.2)
- W3C: kriterij 1.4.10 Reflow (prelamanje sadržaja)
- W3C: kriterij 1.4.12 Text Spacing (razmaci u tekstu)
- W3C WAI: izbor alata za procjenu pristupačnosti
- GOV.UK blog o pristupačnosti: test alata na najnepristupačnijoj web stranici (24.2.2017.)
- Deque: istraživanje pokrivenosti automatskog testiranja
- AccessibleEU: evropski standard pristupačnosti EN 301 549 je ažuriran (7.9.2026.)
Autor teksta
Adi Zeljković — Founder, Luminor Solutions
Dio Luminor tima — radi na strategiji, dizajnu, izradi i rastu projekata o kojima pišemo.