WCAG Standardi Pristupačnosti - Osnove šta svako mora znati

Zašto Većina Sajtova Nesvesno Isključuje Milione Korisnika?

Zamislite da otvorite omiljeni sajt i ne vidite ništa. Ne zbog tehničke greške — već zato što dizajner koji ga je pravio nikada nije razmišljao o vama.

To je svakodnevna realnost za više od 2,2 milijarde ljudi u svetu koji imaju neki oblik oštećenja vida (WHO, 2023). U Srbiji, prema podacima Centra za samostalni život osoba sa invaliditetom, čak 11% populacije ima neku vrstu invaliditeta - i veliki deo njih koristi internet svaki dan.

2,2B - ljudi u svetu sa oštećenjem vida

11% - populacije Srbije sa invaliditetom

8T$ - godišnja kupovna moć osoba sa invaliditetom

"Kao UX/UI dizajner, mogu vam reći jednu neprijatnu istinu: većina sajtova koje smo dizajnirali nije dostupna. Nije zbog zlobe — već zbog neznanja."

Šta su WCAG Standardi i Zašto Treba da Vas Briga?

WCAG (Web Content Accessibility Guidelines) su međunarodni standardi koje je razvio W3C konzorcijum. Trenutno aktuelna verzija je WCAG 2.2, a verzija 3.0 je u razvoju.

Nivo A - Minimalni zahtevi - bez ovoga sajt je neupotrebljiv

Nivo AA ✅ Preporučeni standard - zakonska obaveza u EU i SAD

Nivo AAA - Najviši nivo - idealan cilj za savršenu pristupačnost

Četiri osnovna principa WCAG-a pamtite kroz akronim POUR:

P - Perceivable - Informacije prikazane na način koji korisnici mogu percipirati

O - Operable - Interfejs funkcionalan za sve korisnike

U - Understandable - Sadržaj i navigacija jasni i razumljivi

R - Robust - Sadržaj radi sa asistivnim tehnologijama

7 Ključnih WCAG Pravila Koja Svaki Dizajner Mora Znati

Pravilo 1: Kontrast Boja - Najčešće Ignorisan Problem

WCAG 2.2 zahteva odnos kontrasta 4.5:1 za normalan tekst i 3:1 za veliki tekst i UI komponente. Svetlosivi tekst na beloj pozadini? Klasična greška - "elegantno" izgleda, ali za osobu sa slabim vidom potpuno nevidljivo.

Zas proveru kontrasta možete koristiti sledeće alate:

• WebAIM Contrast Checker (besplatan)

• Figma plugin "Contrast"

• Adobe Color Accessibility Tools

💡 Savet: uvek testirajte dizajn u grayscale modu. Ako čitate sve bez problema - kontrast je dobar.

Pravilo 2: Alternativni Tekst za Slike (Alt Text)

Screen readeri ne "vide" slike. Oni čitaju alt tekst koji vi pišete. Dekorativne slike dobijaju prazan alt atribut — screen reader ih preskače.

Loš: alt="slika"

Dobar: alt="Žena koristi laptop u kafeu, osmehnuta, sa šoljicom kafe pored tastature"

Pravilo 3: Navigacija Tastaturom

Slepim osobama miš nije opcija. One navigiraju isključivo tastaturom (Tab, Shift+Tab, Enter, strelice).

Koliko puta ste čuli od klijenta: "Ukloni tu ružnu plavu liniju oko dugmeta"? Ta "ružna plava linija" je životno važna za milione korisnika.

WCAG 2.2 uvodi novi kriterijum 2.4.11 Focus Appearance - focus indikator mora imati dovoljnu veličinu i kontrast.

Pravilo 4: Semantički HTML

Screen readeri razumeju semantičke HTML elemente. Dizajn koji specifikujete mora biti implementiran semantički — dugmad uvek kao <button>, naslovi u hijerarhiji, forme sa pravilno povezanim <label> elementima.

Kada specifikujete komponente u Figma, dodajte napomene o semantici. To je razlika između dizajnera koji "slika ekrane" i UX/UI eksperta koji gradi produkt.

Pravilo 5: Veličina Teksta i Skaliranje

WCAG zahteva da tekst može biti povećan do 200% bez gubitka sadržaja ili funkcionalnosti. Koristite rem jedinice umesto px za fontove, i nikada ne postavljajte max-height na kontejnere teksta bez overflow: auto.

Pravilo 6: Forme i Error Poruke

Greška u formi za slepog korisnika može biti potpuno nevidljiva ako nije pravilno implementirana.

"Greška u formi" - generičko, nekorisno

"Email adresa mora sadržati znak @. Primer: ime@domen.com" - konkretno i korisno

Pravilo 7: Animacije i Kretanje

Lepe animacije mogu izazvati napade vrtoglavice kod osoba sa vestibularnim poremećajima.

WCAG 2.3.3: korisnici moraju imati mogućnost da isključe neesencijalne animacije.

Kako Testirati Pristupačnost Kao Dizajner?

Automatizovano testiranje

• axe DevTools(Chrome ekstenzija) - otkriva ~30-40% grešaka

• Lighthouseu Chrome DevTools - besplatan, daje accessibility score

• WAVE(WebAIM) - vizuelni overlay grešaka na sajtu

Manuelno testiranje

• Isključite miš i navigirajte samo tastaturom

• Uključite VoiceOver (Mac/iOS) ili NVDA (Windows, besplatan) i slušajte vaš sajt

• Postavite monitor na grayscale i testirajte kontrast

• Zoomujte browser na 200% i proverite layout

Česti Mitovi o WCAG Dostupnosti

❌ MIT - "Pristupačan dizajn mora biti ružan"

✅ FACT - Apple, Airbnb, GOV.UK - svi su izuzetno pristupačni i vizuelno savršeni.

❌ MIT - "To je problem developera, ne dizajnera"

✅ FACT - 70% dostupnosti se odlučuje u fazi dizajna. Loše dizajnirani wireframe je teško "popraviti" u kodu.

❌ MIT -"Naš sajt nema slepih korisnika"

✅ FACT - Analitika ne detektuje screen reader korisnike pouzdano. Oni su nevidljivi u podacima - ali su tu.

Praktičan Checklist

Pre finalnog deliverja proverite:

Vizuelno

Kontrast teksta minimum 4.5:1 (AA) ili 7:1 (AAA)

Kontrast UI komponenti minimum 3:1

Focus indikator vidljiv i jasno definisan

Greške označene i tekstom i ikonom (ne samo bojom)

Sadržaj

Sve slike imaju alt tekst (ili prazan alt za dekorativne)

Naslovi u logičnoj hijerarhiji (H1 > H2 > H3)

Linkovi opisuju destinaciju (ne "klikni ovde")

Interakcija

Ceo interfejs dostupan tastaturom

Modalni prozori imaju focus trap

Skip navigation link implementiran

Animacije poštuju prefers-reduced-motion

Forme

Sva polja imaju vidljive labele

Error poruke jasne i asocirane sa poljem

Autocomplete atributi postavljeni

Pristupačnost Nije Opcija - To Je Dizajnerska Odgovornost

Svaki put kada ignorišemo pristupačnost, nesvesno govorimo delu korisnika: "Ovaj prostor nije za vas." Počnite sa malim - instalirajte axe DevTools, isključite miš na sat vremena, uključite VoiceOver i otvorite vaš sajt.

Garantujem vam - to iskustvo će zauvek promeniti način na koji dizajnirate.