Pristupačnost web sajtova (a11y) pomaže slepim, slabovidim i starijim korisnicima, ali i poboljšava SEO, UX i rezultate. Saznajte koje greške treba da izbegnete i kako da pripremite sajt za nove standarde.
Šta je pristupačnost (a11y) i zašto je važna
Kada pričamo o pristupačnosti web sajtova (a11y), ne mislimo samo na „veći font“.
Pristupačan sajt je onaj koji mogu da koriste:
- osobe sa oštećenim vidom (slepi i slabovidi)
- stariji korisnici
- ljudi koji koriste tastaturu umesto miša
- korisnici sa kognitivnim poteškoćama
- svi koji čitaju sadržaj na telefonu u lošim uslovima (sunce, mali ekran…)
Drugim rečima – pristupačnost nije samo „socijalna odgovornost“, već konkretnan poslovni interes.
Sajt koji mogu svi da koriste:
- ima veći domet (više potencijalnih klijenata)
- šalje signal kvaliteta Google‑u i AI asistentima
- smanjuje rizik od pritužbi i pravnih problema
Ko sve ima korist od pristupačnog sajta
1. Korisnici sa oštećenim vidom
Slepi i slabovidi korisnici koriste screen readere (čitače ekrana) kao što su:
- NVDA, JAWS (Windows)
- VoiceOver (macOS, iOS)
- TalkBack (Android)
Ako stranica nema logičnu strukturu naslova, alt opise slika i ispravno obeležena dugmad, čitač ekrana „vidi“ samo – haos.
Rezultat: korisnik napušta sajt za par sekundi.
2. Stariji korisnici i korisnici na mobilnom
Čak i ljudi bez zvanične dijagnoze vida imaju problem sa:
- sitnim slovima
- slabim kontrastom
- klik zonama koje su premale
Uz to, većina poseta danas dolazi sa mobilnih uređaja – na kojima su sve te greške još vidljivije.
3. Vaš SEO i AI vidljivost
Pristupačan sajt obično je:
- bolje strukturiran (H1–H2 naslovi, liste, jasni linkovi)
- semantički ispravan (ispravne HTML oznake)
- brži i lakši za indeksiranje
To pomaže:
- klasičnom SEO‑u (Google rezultati)
- novoj AI pretrazi (ChatGPT, SGE, Perplexity…), jer modeli lakše razumeju šta je na stranici
Najčešće greške koje vidimo na sajtovima
1. Tekst „zaključan“ u banere i slike
Umesto pravog teksta, važni naslovi i slogani nalaze se u PNG/JPG/WebP baneru.
- Screen reader vidi samo „image.jpg“
- Google ne može lako da pročita poruku
- na mobilnom baner često postaje sitan i nečitljiv
Bolje rešenje:
Naslov u običnom HTML tekstu, a vizuelni stil rešiti kroz CSS, ne kroz sliku.
2. Navigacija koja ne radi na tastaturi
Tipični problemi:
- burger meni se ne može otvoriti tasterom Enter/Space
- fokus „upada“ u meni i ne može da izađe (korisnik se zaglavi)
- dropdown meniji koji se otvaraju samo na hover mišem
Ako korisnik ne može da se kreće tasterom TAB, sajt za njega praktično ne postoji.
3. Slab kontrast i premali fontovi
Popularne greške:
- svetlosiva slova na svetloj pozadini (npr. #9CA3AF na #F3F4F6)
- previše tanak font
- tekst ispod 14–16px na desktopu, još manji na mobilnom
Rezultat je naprezanje očiju i veći bounce rate.
4. Loši alt opisi i naslovi
Alt opis slike često je:
- prazan
- generički („slika“, „banner“)
- ili nabacan ključnim rečima (keyword stuffing)
Alt treba da odgovori na pitanje:
„Šta bi korisnik trebalo da zna, a ne može da vidi?“
Kako da počnete sa pristupačnošću – praktičan mini‑checklist
Ne morate sve da rešite danas. Krenite od najvažnijih stvari na ključnim stranicama (početna, usluge, kontakt, najčitaniji blogovi).
1. Proverite strukturu naslova
- Svaka stranica ima jedan H1 (glavni naslov)
- Sekcije koriste H2, podsekcije H3
- Naslovi nisu samo „stilizovan tekst“, već prave heading oznake
To pomaže i ljudima i screen readerima da „preskaču“ sadržaj i brzo nađu ono što im treba.
2. Testirajte sajt tastaturom
Bez miša, samo:
- TAB (napred)
- SHIFT + TAB (nazad)
- ENTER / SPACE (aktiviranje linka/dugmeta)
- ESC (zatvaranje modala/menija)
Pitanja za vas:
- Da li vidite gde je fokus (outline oko elementa)?
- Možete li da otvorite/zatvorite meni i popunite formu samo tastaturom?
- Da li negde „zapnete“?
Ako ne možete da završite osnovne zadatke bez miša, korisnici sa oštećenim vidom imaju još veći problem.
3. Proverite kontrast
Koristite besplatne alate (npr. WebAIM Contrast Checker) i proverite:
- tekst na pozadini
- dugmad i linkove u odnosu na pozadinu
Ciljajte bar WCAG AA nivo kontrasta – to je danas minimum dobrog UX‑a.
4. Dodajte i ispravite alt opise
- Za dekorativne slike (ukrasne linije, patterni) alt može ostati prazan.
- Za ilustracije koje nose poruku, napišite kratak, jasan opis.
Primer lošeg alt teksta:
„slika1“
Primer boljeg:
„Ekran laptopa sa prikazom pristupačnog web sajta sa velikim dugmetom ‘Pošalji upit’“
5. Testirajte sa čitačem ekrana
Ne morate da postanete expert preko noći. Dovoljno je da:
- uključite VoiceOver (Mac / iPhone) ili NVDA (Windows)
- posetite svoj sajt
- pokušate da obavite isti zadatak kao običan korisnik (npr. „pošalji upit“)
Brzo ćete videti gde su rupe: elementi bez naziva, nelogičan redosled, sadržaj koji se „preskače“.
Pristupačnost i poslovni rezultati: kako se to vraća
Možda zvuči kao dodatni trošak, ali pristupačnost ima vrlo konkretne benefite:
- Više konverzija – jasniji tekst, veća dugmad i logičan put kroz sajt pomažu svima, ne samo osobama sa invaliditetom
- Bolji SEO i AI vidljivost – strukturiran i čitljiv sadržaj je ono što traže i Google i AI modeli
- Jači brend – pokazujete da razmišljate o korisnicima ozbiljnije od konkurencije
- Lakši tenderi i saradnje sa većim klijentima – sve više kompanija traži da sajt ispunjava bar osnovne a11y standarde
Kako da nastavite dalje
Ako želite da pristupačnosti priđete planski, dobra taktika je:
- Napraviti osnovni a11y audit na ključnim stranicama
- Ispraviti kritične blokere (navigacija, forme, kontrast)
- Uvesti smernice za sadržaj (kako pisati naslove, alt tekstove, CTA‑ove)
- Redovno proveravati nove stranice i funkcije
Tako a11y postaje deo vaše svakodnevne prakse – ne jednokratni „projekat“ koji se brzo zaboravi.