WCAG standardi pristupačnosti u praksi: pravila, provera i kontrolna lista

Zamislite da otvorite sajt i ne vidite ništa. Ne zbog tehničke greške, već zato što niko ko ga je pravio nije mislio na ljude koji sajt koriste uz čitač ekrana, samo tastaturom ili uz uvećan tekst.

Prema podacima Svetske zdravstvene organizacije, najmanje 2,2 milijarde ljudi u svetu ima oštećenje vida na blizinu ili na daljinu. Ta brojka se odnosi samo na vid i obuhvata i blaža oštećenja, pa je to samo deo ljudi kojima pristupačan sajt olakšava život. Ovaj tekst je praktičan vodič: sedam pravila koja treba poznavati, kako da proverite sajt i kontrolna lista pre isporuke.

Kao UX/UI dizajner mogu da kažem da pristupačnost najčešće ne strada zbog loše namere, već zato što o njoj niko nije mislio dok se sajt dizajnirao.

Šta WCAG traži i koji nivo ciljati

WCAG (Web Content Accessibility Guidelines) su međunarodne smernice koje razvija W3C konzorcijum. Aktuelna verzija je WCAG 2.2, a verzija 3.0 je u razvoju. Svaki zahtev u smernicama zove se kriterijum uspešnosti, ima svoj broj i jedan od tri nivoa:

• Nivo A: minimalni zahtevi. Bez njih je sajt za mnoge neupotrebljiv.

• Nivo AA: preporučeni cilj. Uključuje i sve zahteve nivoa A, a propisi o pristupačnosti se najčešće oslanjaju upravo na njega.

• Nivo AAA: najviši nivo. Dobar je kao smer, ali ga sam W3C ne preporučuje kao opšti zahtev za ceo sajt, jer neki sadržaji ne mogu da ga ispune.

Svi kriterijumi su razvrstani u četiri principa: sadržaj treba da bude opažljiv, upotrebljiv, razumljiv i robustan. Šta ti principi znače i zašto su važni za posao, objasnio sam u tekstu šta je WCAG standard i zašto je važan. Ovde se bavim primenom, a uz svako pravilo navodim kriterijum i nivo da biste znali šta je obaveza za AA, a šta preporuka.

Sedam WCAG pravila koja svaki dizajner treba da zna

1. Kontrast boja

Kriterijum 1.4.3 Contrast (Minimum), nivo AA, traži odnos kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za krupan tekst. Kriterijum 1.4.11 Non-text Contrast, takođe AA, traži 3:1 za elemente interfejsa kao što su ivice polja, ikone i stanja dugmadi. Svetlosivi tekst na beloj pozadini je klasična greška: izgleda „elegantno“, ali ga osoba sa slabijim vidom jedva čita, kao i svako ko gleda u telefon na suncu.

Za proveru kontrasta možete da koristite:

• WebAIM Contrast Checker (besplatan)

• Figma dodatak „Contrast“

• Adobe Color, deo za pristupačnost

Savet: pogledajte dizajn i u crno-belom prikazu. Ako i tada sve čitate bez napora i razlikujete stanja elemenata, kontrast je verovatno dobar. Konačnu potvrdu ipak daje merenje.

2. Alternativni tekst za slike

Čitači ekrana ne „vide“ slike, već čitaju alt tekst koji vi napišete. To traži kriterijum 1.1.1 Non-text Content, nivo A. Dobar alt tekst kaže ono što slika saopštava u tom kontekstu. Dekorativne slike dobijaju prazan alt atribut, pa ih čitač preskače.

Loš primer: alt="slika"

Dobar primer: alt="Žena radi na laptopu u kafeu, pored tastature je šoljica kafe"

3. Navigacija tastaturom i vidljiv fokus

Mnogi ljudi ne koriste miš: slepe osobe, osobe sa motoričkim teškoćama, ali i svako ko brže radi sa tastature. Kroz sajt se kreću tasterima Tab, Shift+Tab, Enter i strelicama. Kriterijum 2.1.1 Keyboard, nivo A, traži da sve što može mišem, može i tastaturom.

Koliko puta ste od klijenta čuli: „Ukloni tu ružnu plavu liniju oko dugmeta“? Ta linija je indikator fokusa i bez nje korisnik tastature ne zna gde se nalazi. Kriterijum 2.4.7 Focus Visible, nivo AA, traži da fokus uvek bude vidljiv. Zato ga ne uklanjajte, već ga dizajnirajte tako da se uklapa u vizuelni identitet.

WCAG 2.2 je dodao i 2.4.11 Focus Not Obscured (Minimum), nivo AA: element u fokusu ne sme da bude potpuno sakriven iza lepljivog zaglavlja, banera za kolačiće ili prozora za ćaskanje. Kriterijum 2.4.13 Focus Appearance, koji propisuje veličinu i kontrast indikatora fokusa, pripada nivou AAA. Nije obavezan za AA, ali je dobra mera kada dizajnirate fokus.

4. Semantički HTML

Čitači ekrana se oslanjaju na značenje HTML elemenata. Kriterijum 1.3.1 Info and Relationships, nivo A, traži da struktura koju korisnik vidi postoji i u kodu: dugmad kao <button>, naslovi u pravilnoj hijerarhiji, polja forme povezana sa svojim <label> elementima.

Kada predajete dizajn iz Figme, dodajte napomene o semantici: šta je naslov kog nivoa, šta je dugme, a šta link, kojim redom ide fokus. Developer tako ne mora da nagađa, a vi ne otkrivate greške tek na gotovom sajtu.

5. Veličina teksta i skaliranje

Kriterijum 1.4.4 Resize Text, nivo AA, traži da tekst može da se uveća do 200% bez gubitka sadržaja ili funkcionalnosti. Srodan je 1.4.10 Reflow, takođe AA: sadržaj treba da se prelomi u jednu kolonu bez vodoravnog skrolovanja kada korisnik jako zumira stranicu.

U praksi to znači rem jedinice umesto px za veličinu fonta i kontejnere koji rastu sa tekstom. Ne postavljajte fiksnu visinu ili max-height na blokove teksta bez overflow: auto, jer se uvećan tekst tada odseče.

6. Forme i poruke o greškama

Greška u formi može da ostane potpuno neprimećena ako je označena samo crvenom ivicom polja. Kriterijum 1.4.1 Use of Color, nivo A, traži da boja ne bude jedini nosilac informacije. 3.3.1 Error Identification, nivo A, traži da greška bude opisana tekstom, a 3.3.3 Error Suggestion, nivo AA, da korisniku predložite ispravku kada je ona poznata.

Loša poruka: „Greška u formi“. Ne kaže ni gde je problem ni kako se rešava.

Dobra poruka: „Imejl adresa mora da sadrži znak @. Primer: ime@domen.com“. Stoji uz polje na koje se odnosi i kaže šta treba uraditi.

7. Animacije i kretanje

Animacije mogu da izazovu vrtoglavicu i mučninu kod osoba sa vestibularnim poremećajima, a svima ostalima da odvuku pažnju sa sadržaja. Za nivo A važe dva zahteva. Prema kriterijumu 2.2.2 Pause, Stop, Hide, sadržaj koji se sam pokreće, traje duže od pet sekundi i prikazan je uz drugi sadržaj mora da može da se pauzira, zaustavi ili sakrije. To se odnosi na karusele, pozadinske video snimke i trake koje se same pomeraju. Prema kriterijumu 2.3.1 Three Flashes or Below Threshold, ništa na stranici ne treba da bljesne više od tri puta u sekundi.

Mogućnost da korisnik isključi animacije koje pokreće interakcija, na primer paralaksu pri skrolovanju, opisuje kriterijum 2.3.3 Animation from Interactions. On je nivo AAA, dakle preporuka, a ne obaveza za AA. Ipak ga se vredi držati jer je jeftin: dovoljno je da sajt poštuje sistemsko podešavanje prefers-reduced-motion.

Kako da proverite pristupačnost sajta

Provera ima dva dela. Alati brzo nalaze ono što se može izmeriti, a ostalo morate da probate sami.

Automatska provera

• axe DevTools (dodatak za Chrome): pronalazi greške u kodu i povezuje ih sa WCAG kriterijumima.

• Lighthouse u Chrome DevTools: besplatan, daje ocenu pristupačnosti i spisak problema.

• WAVE (WebAIM): označava greške direktno na stranici.

Alati otkrivaju samo deo problema. Mogu da utvrde da slika ima alt tekst, ali ne i da li je taj tekst smislen. Ocena 100 u Lighthouse izveštaju zato ne znači da je sajt pristupačan.

Ručna provera

• Odložite miš i prođite ključne tokove samo tastaturom: meni, formu, kupovinu.

• Uključite VoiceOver (Mac, iOS) ili NVDA (Windows, besplatan) i poslušajte kako vaš sajt zvuči.

• Prebacite ekran na crno-beli prikaz i pogledajte šta se gubi.

• Zumirajte pregledač na 200% i proverite da li se raspored raspada.

Česte zablude o pristupačnosti

„Pristupačan dizajn mora da bude ružan“

Zahtevi se tiču kontrasta, strukture i ponašanja, a ne stila. Sajt GOV.UK je poznat primer dizajna koji je građen oko pristupačnosti i zbog toga je pregledan. Ograničenja ovde rade isto što i svaki dobar brif: sužavaju izbor na rešenja koja rade.

„To je posao developera, ne dizajnera“

Veliki deo pristupačnosti se odlučuje u dizajnu: boje, veličine, redosled sadržaja, stanja elemenata, tekst poruka. Ono što je loše postavljeno u skici teško se „popravlja“ u kodu.

„Naš sajt nema slepih korisnika“

Analitika ne prepoznaje pouzdano korisnike čitača ekrana, pa ih u podacima ne vidite. To što ih ne vidite ne znači da ih nema. Može da znači i da su odustali na prvoj prepreci.

Praktična kontrolna lista

Pre isporuke dizajna ili puštanja sajta u rad prođite ove stavke. Sve se odnose na nivo AA, osim gde je naznačeno drugačije.

Vizuelno

• Kontrast teksta najmanje 4,5:1, za krupan tekst 3:1 (za nivo AAA 7:1)

• Kontrast elemenata interfejsa najmanje 3:1

• Indikator fokusa vidljiv na svakom interaktivnom elementu

• Greške i stanja označeni i tekstom ili ikonom, ne samo bojom

Sadržaj

• Sve slike imaju alt tekst, dekorativne imaju prazan alt

• Naslovi idu logičnim redom (H1, zatim H2, pa H3), bez preskakanja

• Tekst linka opisuje odredište (ne „kliknite ovde“)

Interakcija

• Ceo interfejs se može koristiti tastaturom

• Fokus ostaje unutar otvorenog modalnog prozora, a prozor se zatvara tasterom Esc

• Postoji link „Preskoči na sadržaj“ na početku stranice

• Element u fokusu nije sakriven iza lepljivog zaglavlja ili banera

• Površine za dodir i klik su najmanje 24 sa 24 CSS piksela

• Sadržaj koji se sam pomera može da se pauzira, a animacije poštuju prefers-reduced-motion

Forme

• Sva polja imaju vidljive labele

• Poruke o greškama su jasne i stoje uz polje na koje se odnose

• Polja za lične podatke imaju autocomplete atribute

Odakle početi

Ne morate sve odjednom. Instalirajte axe DevTools, odložite miš na sat vremena, uključite VoiceOver i otvorite svoj sajt. Verujem da će vam to iskustvo promeniti način na koji gledate na dizajn, jer prepreke koje inače ne primećujete postaju očigledne posle nekoliko minuta.

Kako to izgleda na stvarnom projektu pokazuje UX/UI dizajn platforme Balkanaukcija.

Ako vas zanima i poslovna strana, uključujući propise u EU, pročitajte zašto je digitalna pristupačnost važna za firme. A ako želite da neko sa strane proveri pristupačnost i korisničko iskustvo vašeg sajta, pogledajte kako izgleda UX audit sajta.