Najčešće pogreške pristupačnosti u web-trgovinama i kako ih ispraviti

Nedostajući alt tekstovi, nizak kontrast boja, nepristupačni obrasci — to su pogreške koje automatske provjere najčešće otkrivaju. Pregled i vodič za ispravak.

Objavljeno:

Primjer web-trgovine s četiri istaknute pogreške pristupačnosti: nedostajući alt tekst, nizak kontrast, polje obrasca bez oznake i nedostajući indikator fokusa

Zašto automatske provjere otkrivaju više nego što se očekuje

Većina vlasnika web-trgovina pretpostavlja da je njihova web-stranica pristupačna. Stvarnost je često drugačija. Automatska provjera tipično otkriva desetke do stotine nalaza čak i na naizgled normalnoj web-trgovini.

Automatizacija pokriva otprilike 30–50% pravila WCAG 2.1 AA. Koji su najčešći problemi?

Nedostajući alt tekstovi

Najrasprostranjeniji nalaz. Slike bez tekstualnog opisa (atribut alt) potpuno su nedostupne korisnicima koji koriste čitače zaslona.

Kako ispraviti:

  • Funkcionalne slike (proizvodi, ilustracije, logotipi): smislen opis onoga što slika prikazuje ili što gumb radi
  • Dekorativne slike (pozadine, ukrasi): prazan atribut alt da bi ih čitači zaslona ispravno preskočili
  • Slike koje sadrže tekst: tekst mora biti prisutan u atributu alt

Nizak kontrast boja

Drugi najčešći problem. WCAG 2.1 AA zahtijeva minimalni omjer kontrasta 4,5:1 za normalni tekst i 3:1 za veliki tekst (18 pt ili 14 pt podebljano). Slab kontrast pogađa osobe sa slabim vidom.

Tipično problematični elementi: svijetli gumb 'Dodaj u košaricu' na bijeloj pozadini, sivi opisni tekst, poruke o pogreškama u blijedoj boji, tekst na slikovnim bannerima.

Kako ispraviti: alati poput Colour Contrast Analyser ili automatsko skeniranje odmah će vam pokazati koja mjesta ne ispunjavaju standard.

Nepristupačni obrasci

Obrasci su kritična točka svake web-trgovine. Najčešći problemi:

  • Nedostajući label za polje: polje E-mail bez programatski dodijeljene oznake neprepoznatljivo je čitaču zaslona
  • Poruke o pogreškama koje nisu najavljivane putem ARIA: korisnik s čitačem zaslona ne vidi da je došlo do pogreške
  • Obavezna polja bez oznake: zvjezdica (*) bez tekstualnog objašnjenja nije dovoljna
  • Gumbi bez smislenog teksta: 'Potvrdi' je bolje od samo ikonice bez opisa

Problemi s upravljanjem tipkovnicom

Vaš nacionalni zakon kojim se provodi EAA zahtijeva da cijela web-trgovina bude upravljivac bez miša. Najčešći problemi:

  • Nedostajući vidljivi focus ring: kada korisnik tipka Tab po stranici, uvijek mora vidjeti gdje se nalazi
  • Keyboard trap: korisnik ostane zarobljen u modalnom prozoru ili izborniku i ne može izaći tipkovnicom
  • Loš redoslijed fokusa: Tab skače po stranici na neprirodan način

Nepristupačni interaktivni elementi

Gumbi i poveznice moraju imati pristupačno ime kako bi pomoćne tehnologije pravilno objavljivale. Problematični uzorci:

  • Gumb samo s ikonom bez teksta ili aria-label
  • Poveznica 'Kliknite ovdje' ili 'Više' bez konteksta
  • Interaktivni div ili span bez role='button' i podrške tipkovnice

Kako početi s ispravljanjem

Preporučeni pristup:

  1. Pokrenite automatsko skeniranje — brzo i besplatno identificirajte najutjecajnije probleme
  2. Prioritizirajte prema ozbiljnosti: rješavajte prvo kritične (critical) i ozbiljne (serious) nalaze
  3. Ispravite tehničke pogreške: alt tekstovi, kontrast i labeli obrazaca relativno su jednostavne ispravke
  4. Naručite ručnu reviziju: preostala pravila (razumljivost, ponašanje s čitačima zaslona) zahtijevaju ljudsku prosudbu

Zapamtite: automatske provjere otkrivaju otprilike 30–50% pravila WCAG. Ispravljanje automatski otkrivenih pogrešaka nužan je, ali ne dovoljan korak za ispunjavanje vašeg nacionalnog zakona kojim se provodi EAA.

Automatska provjera pristupačnosti (kao ova na Inkluzo) pokriva otprilike 30–50% pravila WCAG 2.1 AA. Provjerava strojno detektabilne greške — alternativne tekstove, kontrast, strukturu naslova i obrazaca, ARIA atribute. Preostalih 50–70% kriterija zahtijeva ručnu procjenu: razumljivost tekstova, logičan redosljed fokusa, smislenost alternativnih tekstova, stvarnu navigaciju tipkovnicom.

Ostali članci vodiča

Često postavljana pitanja

Koliko je pogrešaka normalno?
Većina web-trgovina ima desetke do stotine automatski detektabilnih nalaza. Važnija od broja je ozbiljnost — kritične i ozbiljne pogreške rješavajte prve.
Kako znam što ispraviti prvo?
Usredotočite se na nalaze označene kao kritični (critical) i ozbiljni (serious) — oni imaju najveći utjecaj na korisnike s invaliditetom.
Je li dovoljno ispraviti automatski otkrivene pogreške?
Ne. Automatizacija otkriva otprilike 30–50% pravila WCAG 2.1 AA. Za potpuni pregled — i za ispunjavanje vašeg nacionalnog zakona kojim se provodi EAA — nužna je ručna revizija.

Želite li sada testirati pristupačnost svoje web stranice?

Pokretanje provjere pristupačnosti