10 grešaka na sajtu zbog kojih gubiš kupce - i kako da ih ispraviš

Pristupačnost sajta nije dodatak koji se ubaci pred kraj projekta. Ako kupac ne može da pročita cenu, pronađe fokus tastaturom, razume grešku u formi ili zatvori element koji mu prekriva ekran, za njega tvoj sajt jednostavno ne radi. U ovom vodiču prevodimo WCAG 2.2 iz tehničkog jezika u deset konkretnih problema koje vlasnik biznisa može da prepozna - i pokazujemo kako kvalitetan web dizajn i razvoj uklanjaju prepreke bez žrtvovanja estetike.

Šta je pristupačnost sajta - bez komplikovanih definicija

Web pristupačnost znači da ljudi mogu da pronađu, razumeju i koriste sadržaj bez obzira na to kako vide, čuju, kreću se ili obrađuju informacije. To uključuje slepe i slabovide osobe, ljude koji ne mogu precizno da koriste miš, osobe sa oštećenjem sluha ili kognitivnim teškoćama - ali i nekoga sa polomljenom rukom, starijeg korisnika, kupca na jakom suncu ili osobu koja pokušava da popuni formu jednom rukom u autobusu.

WCAG 2.2 je međunarodni standard koji ovu temu organizuje kroz četiri principa: sadržaj mora biti uočljiv, operabilan, razumljiv i robustan. Drugim rečima: korisnik mora moći da ga primeti, da njime upravlja, da razume šta se dešava i da ga koristi sa različitim uređajima i pomoćnim tehnologijama.

Za vlasnika biznisa najvažnija definicija je još jednostavnija: pristupačan sajt ne izbacuje potencijalnog kupca iz prodajnog procesa zbog loše boje, pogrešne HTML strukture ili kontrole koju nije moguće aktivirati. To je istovremeno pitanje inkluzije, kvaliteta i konverzije.

Zašto je pristupačnost važna baš u 2026.

Prvi razlog su korisnici. Kupovina, zakazivanje, bankarstvo, podrška i informacije sve češće počinju na telefonu. Kad je dugme premalo, kontrast slab ili forma ne objašnjava grešku, problem ne oseća samo osoba sa trajnim invaliditetom - oseća ga svako ko koristi sajt u manje idealnim uslovima. W3C naglašava da primena WCAG smernica često poboljšava upotrebljivost za sve korisnike, ne samo za jednu grupu.

Drugi razlog je tržište. Zvanične EU smernice o pristupačnosti proizvoda i usluga među obuhvaćenim primerima navode online prodavnice, platforme za karte i bankarske usluge, a nova pravila se primenjuju na proizvode i usluge stavljene na EU tržište posle 28. juna 2025. Za mikropreduzeća koja pružaju usluge postoje izuzeci, uključujući prag manji od 10 zaposlenih i promet ispod dva miliona evra.

Ako posluješ iz Srbije, sama činjenica da imaš sajt ne znači automatski da podležeš svakoj odredbi Evropskog akta o pristupačnosti. Ako, međutim, prodaješ potrošačima u EU ili pružaš obuhvaćenu digitalnu uslugu na tom tržištu, obavezu proveri sa pravnim stručnjakom. Ovaj tekst je praktičan web vodič, ne pravno mišljenje.

Treći razlog je standardizacija. WCAG 2.2 je 2025. odobren kao međunarodni standard ISO/IEC 40500:2025. Pristupačnost zato više nije niša ili prolazni dizajnerski trend, već normalan deo profesionalne nabavke, razvoja, testiranja i održavanja digitalnih proizvoda.

Greške 1-3: sadržaj koji postoji, ali nije dostupan

1. Slab kontrast između teksta i pozadine

Svetlosivi tekst na beloj pozadini deluje elegantno na dizajnerskom monitoru, ali postaje nečitljiv na prosečnom telefonu, pri slabijem vidu ili na dnevnom svetlu. WCAG AA za običan tekst najčešće traži odnos kontrasta najmanje 4,5:1, a za veliki tekst 3:1. Rešenje nije da ceo sajt bude crno-beo: zadrži paletu brenda, ali meri kontrast svake kombinacije koja prenosi važnu informaciju, posebno cena, dugmadi, menija i poruka o grešci.

2. Slike bez smislenog alternativnog opisa

Čitač ekrana ne vidi fotografiju proizvoda; čita njen alt opis. `slika123.jpg` i `image` ne znače ništa, dok „Crna kožna torba sa zlatnom kopčom, pogled spreda“ prenosi ono zbog čega je slika tu. Dekorativna slika treba da ima prazan alt kako je pomoćna tehnologija ne bi bespotrebno najavljivala. Najbolje pitanje je: ako slika nestane, koju informaciju korisnik gubi? To napiši kratko i prirodno, bez nabrajanja ključnih reči.

3. Naslovi koji samo izgledaju kao naslovi

Veliki boldovani pasus nije isto što i pravi HTML naslov. Korisnici čitača ekrana često prolaze stranicu preko liste naslova, kao što ostali pogledom skeniraju sadržaj. Svaka stranica treba da ima jasan H1, zatim logične H2 i H3 nivoe bez preskakanja radi veličine fonta. Ovo pomaže ljudima, pretraživačima i održavanju koda - a vizuelna veličina se uvek može podesiti CSS-om.

Greške 4-6: sajt radi mišem, ali ne radi korisniku

4. Interaktivni elementi ne mogu da se koriste tastaturom

Meni koji se otvara samo prelaskom miša, kartica koja reaguje samo na klik u `div` element ili modal iz kojeg Tab ne može da izađe prave ozbiljnu prepreku. Otvori sajt, skloni miš i probaj samo Tab, Shift+Tab, Enter, Space i Escape. Moraš moći da dođeš do svake akcije, vidiš gde si, aktiviraš kontrolu i zatvoriš otvoreni sloj. Pravi `button` i `a` elementi već imaju veliki deo tog ponašanja; improvizovane kontrole traže mnogo više koda i testiranja.

5. Fokus je nevidljiv ili ga sticky element prekriva

Korisnik tastature mora u svakom trenutku da zna koji element je aktivan. Uklanjanje `outline` stila bez dobre zamene je jedna od najčešćih grešaka. WCAG 2.2 dodatno traži da fokusirani element ne bude potpuno sakriven sticky zaglavljem, cookie banerom ili drugim slojem. Fokus treba da bude jasan, kontrastan i vidljiv i u svetlom i u tamnom režimu. Sticky efekat može ostati - samo ne sme da proguta kontrolu koju korisnik upravo pokušava da aktivira.

6. Linkovi i dugmad ne objašnjavaju kuda vode

Deset linkova „Klikni ovde“ nema smisla kada se izvuku iz konteksta. Naziv treba da kaže šta sledi: „Pogledaj cenovnik“, „Preuzmi PDF ponudu“ ili „Zakaži konsultaciju“. Ikonica strelice bez vidljivog ili pristupačnog naziva takođe nije dovoljna. Dobar opis koristi svima: ubrzava skeniranje, smanjuje nesigurnost i čini poziv na akciju ubedljivijim.

Greške 7-9: mobilni uređaji i forme na kojima se gubi prodaja

7. Premala dugmad i dodirne zone

Sitna ikonica za zatvaranje, linkovi zbijeni jedan uz drugi i checkbox od nekoliko piksela traže preciznost koju nemaju svi korisnici. WCAG 2.2 kriterijum za minimalnu veličinu cilja koristi 24 x 24 CSS piksela uz određene izuzetke, dok je u praksi na telefonu često udobnije ciljati 44-48 piksela. Ne meri samo nacrtanu ikonu - bitna je cela aktivna površina i razmak od susedne akcije.

8. Forme se oslanjaju na placeholder i boju

Placeholder nestane čim korisnik počne da kuca, pa više ne zna šta polje traži. Svako polje treba da ima trajnu labelu, smislen redosled fokusa i odgovarajući tip unosa, kao `email` ili `tel`, da telefon ponudi pravu tastaturu. Obavezno polje ne označavaj samo crvenom bojom; dodaj tekst ili simbol sa objašnjenjem. Kod dužih formi koristi autocomplete atribute da korisnik ne prepisuje podatke koje uređaj već zna.

9. Poruka o grešci kaže da nešto nije u redu - ali ne i kako da se popravi

„Došlo je do greške“ nije pomoć. Dobra poruka stoji uz problematično polje, jasno kaže šta nedostaje i predlaže rešenje: „Unesi broj telefona sa pozivnim brojem, na primer +381 60 123 4567.“ Fokus treba prebaciti ili povezati sa sažetkom grešaka tako da ga čitač ekrana najavi. Podatke koje je korisnik već uneo sačuvaj - ponavljanje cele forme posle jedne greške je najbrži način da izgubiš upit ili kupovinu.

Greška 10: animacije, video i vreme nisu pod kontrolom korisnika

Parallax, automatski slider i veliki video mogu da naprave odličan prvi utisak, ali kod nekih ljudi izazivaju mučninu, dezorijentaciju ili jednostavno odvlače pažnju od zadatka. Poštuj sistemsku postavku `prefers-reduced-motion`, omogući pauzu za sadržaj koji se automatski pomera i izbegavaj treperenje. Video sa govorom treba da ima titlove, a važan zvučni sadržaj tekstualnu alternativu.

Isto važi za vremenska ograničenja. Ako sesija, rezervacija ili plaćanje ističu, korisnika upozori na vreme i ponudi produženje kada je moguće. Ljudi koji koriste čitač ekrana, glasovne komande ili imaju motoričke teškoće često završavaju zadatak sporije - to ne znači da imaju manju nameru da kupe.

Pristupačnost ne traži da ukloniš karakter sa sajta. Traži da animacija bude progresivno poboljšanje, a ne uslov za razumevanje ili završavanje radnje. Isto pravilo koristimo i kada optimizujemo brzinu i Core Web Vitals: efekat ostaje samo dok ne ugrožava osnovni posao stranice.

Zašto Lighthouse Accessibility 100 nije sertifikat

Automatski alati su odličan početak. Lighthouse, axe i slične provere brzo pronalaze nedovoljan kontrast, polja bez labela, duplirane ID vrednosti i deo problema sa imenima kontrola. Ocena 100 znači da alat u tom trenutku nije pronašao probleme iz skupa koji automatski ume da proveri. Ne znači da je sajt potpuno usklađen sa WCAG standardom, da je svaki tok upotrebljiv ili da ga je testirala osoba sa invaliditetom.

Automatika ne može pouzdano da proceni da li alt opis prenosi pravu informaciju, da li je redosled sadržaja logičan, da li su uputstva razumljiva ili da li korisnik čitača ekrana može efikasno da završi kupovinu. Sam W3C navodi da se pristupačnost proverava kombinacijom automatizovanog testiranja i ljudske procene.

Minimalni ručni test koji svaki vlasnik sajta može da uradi

1. Prođi glavnu navigaciju, formu i najvažniji poziv na akciju samo tastaturom.
2. Uvećaj stranicu na 200% i proveri da tekst i kontrole ne nestaju niti se preklapaju.
3. Uključi VoiceOver na telefonu ili računaru i poslušaj početnu stranu i formu.
4. Proveri svetli i tamni režim, poruke o grešci i stanje fokusa.
5. Ponovi najvažniji tok na malom telefonu: pronađi uslugu, pošalji upit ili završi kupovinu.

Za ozbiljnu tvrdnju o usklađenosti potreban je sistematski audit reprezentativnih stranica i funkcionalnih tokova, dokumentovanje nalaza i ponovna provera posle ispravki. Widget koji obećava pristupačnost jednim klikom ne zamenjuje kvalitetan kod, sadržaj i testiranje.

Kratka kontrolna lista za tvoj sajt

Ako želiš brzu procenu trenutnog stanja, počni od stranica koje donose novac: početne, stranice usluge ili proizvoda, kontakt forme, korpe i naplate. Zatim proveri sledeće:

• Tekst i kontrole imaju dovoljan kontrast u svim režimima.
• Svaka informativna slika ima smislen alt opis, a dekorativna slika prazan alt.
• Stranica ima jedan jasan H1 i logičan redosled podnaslova.
• Svaka funkcija je dostupna tastaturom, uz vidljiv i nepokriven fokus.
• Dugmad i linkovi imaju opisno ime i dovoljno veliku aktivnu površinu.
• Forme imaju trajne labele, jasna uputstva i konkretne poruke o grešci.
• Animacije poštuju reduced-motion, a video ima titlove kada su potrebni.
• Sadržaj ostaje upotrebljiv pri uvećanju od 200% i na uskom ekranu.
• Najvažniji tok je ručno proveren čitačem ekrana, ne samo Lighthouse-om.

Ne moraš sve da rešiš u jednom sprintu. Popravi prvo blokere koji sprečavaju kupovinu, slanje upita i navigaciju, zatim uvedi pristupačnost u dizajn sistem i kontrolnu listu za svaku novu stranicu. Ispravljanje u komponenti je jeftinije nego popravljanje istog dugmeta na pedeset mesta.

Zaključak: pristupačnost je kvalitet koji korisnik oseća

Najbolja pristupačnost često je nevidljiva: jasna hijerarhija, dobar kontrast, logična forma, velika dugmad i sajt koji mirno reaguje na način korišćenja. Korisnik možda neće pohvaliti pravilno povezanu labelu, ali će završiti upit bez frustracije. A to je rezultat koji biznis može da izmeri.

Ne tretiraj WCAG kao listu za poslednji dan projekta. Uključi ga u istraživanje, dizajn, razvoj, pisanje sadržaja i testiranje. Tako dobijaš sajt koji radi za više ljudi, lakše se održava i spremniji je za zahteve tržišta koji će postajati stroži, ne blaži.

Ako želiš da proverimo ključne stranice, forme i navigaciju tvog sajta, pošalji nam link preko kontakt stranice. Dobićeš prioritizovan pregled: šta je stvarna prepreka, šta je brza popravka i šta treba planirati u sledećoj fazi - bez lažnog obećanja da jedan rezultat ili widget rešava sve.