Pristupačnost web stranica u 2026: što web trgovine trebaju znati

Što je European Accessibility Act

European Accessibility Act (EAA) je Direktiva (EU) 2019/882, koja zahtijeva da obuhvaćeni proizvodi i usluge budu pristupačni osobama s invaliditetom. Hrvatska ju je prenijela u nacionalno zakonodavstvo putem Zakona o zahtjevima za pristupačnost proizvoda i usluga.

Jednostavno rečeno: web trgovine i pružatelji usluga koji ulaze u obuhvat zakona trebaju osigurati da njihove stranice mogu koristiti i osobe sa slabijim vidom, sluhom, motoričkim poteškoćama ili kognitivnim ograničenjima. Mikro subjekti malog gospodarstva koji pružaju usluge izuzeti su iz primjene, ali obveze treba provjeriti prema stvarnoj djelatnosti.

Ako je usluga e-trgovine obuhvaćena zakonom, to u praksi znači da osoba koja koristi čitač ekrana mora moći proći ključni tok kupnje. Osoba koja ne može koristiti miš mora moći navigirati tipkovnicom. Osoba sa slabijim vidom mora moći povećati tekst bez gubitka sadržaja ili funkcionalnosti.

Za web shopove to ide zajedno s drugim obvezama prema potrošačima, uključujući prikaz cijena, uvjete raskida i informacije o popravku. Sažetak promjena je u vodiču o Zakonu o zaštiti potrošača 2026.

Tko je obvezan poštivati zakon

Zakon se primjenjuje na širok raspon proizvoda i usluga, uključujući određene digitalne usluge. Ako vaš posao uključuje bilo što od navedenog, provjerite ulazite li u obuhvat zakona:

• Web trgovine - usluge e-trgovine dostupne potrošačima u EU
• Potrošačke bankarske usluge - bankarski portali, platne i investicijske usluge za potrošače
• Telekomunikacijske usluge - operateri, VoIP servisi, aplikacije za razmjenu poruka
• E-knjige i čitači - digitalne publikacije i softveri za čitanje
• Prijevozne usluge - internetska kupnja karata, informacijski sustavi
• Internetsko ugovaranje i naručivanje - kada je dio usluge e-trgovine ili druge obuhvaćene usluge

WCAG, EN 301 549 i praktična provjera

WCAG (Web Content Accessibility Guidelines) je međunarodni standard koji definira kako web sadržaj treba biti pristupačan. Za EAA se u praksi najčešće koriste WCAG i europski standard EN 301 549. Krajem svibnja 2026. W3C navodi da EN 301 549 još koristi WCAG 2.1, a da se u sljedećoj verziji očekuje WCAG 2.2. Zato je WCAG 2.1 AA dobar minimum za provjeru, dok je za nove projekte razumno provjeriti i dodatne WCAG 2.2 kriterije.

Osnovna logika ostaje ista: sadržaj mora biti opaziv, upravljiv, razumljiv i robustan.

1. Opazivost (perceivable)

Sadržaj mora biti prezentiran na način da ga korisnici mogu percipirati. To uključuje: tekstualne alternative za slike (alt tekstovi), titlove za video sadržaj, dovoljan kontrast boja između teksta i pozadine (minimalno 4.5:1 za normalan tekst), mogućnost povećanja teksta na 200% bez gubitka funkcionalnosti i sadržaj koji se prilagođava različitim uređajima.

2. Upravljivost (operable)

Korisnici moraju moći upravljati sučeljem. Sve funkcije moraju biti dostupne tipkovnicom, bez zamki iz kojih se ne može izaći Tab tipkom. Korisnici trebaju dovoljno vremena za čitanje i interakciju sa sadržajem. Animacije se moraju moći zaustaviti, a stranica ne smije sadržavati elemente koji trepere više od tri puta u sekundi.

3. Razumljivost (understandable)

Tekst mora biti čitljiv i predvidljiv. Stranica se mora ponašati konzistentno, navigacija mora biti logična, a forme moraju imati jasne oznake i poruke o greškama. Jezik stranice mora biti označen u HTML-u kako bi čitači ekrana znali kojim jezikom čitati sadržaj.

4. Robusnost (robust)

Sadržaj mora biti dovoljno robustan da ga mogu pravilno interpretirati razne korisničke tehnologije, uključujući čitače ekrana, povećala i druge pomagala. To praktički znači: validan HTML, pravilno korištenje ARIA atributa i semantičkih elemenata.

Praktični koraci za usklađivanje

Zakon možda zvuči apstraktno, ali u praksi se svodi na konkretne tehničke zahtjeve koje možete provjeriti i ispraviti. Evo što trebate napraviti.

Semantički HTML

Koristite ispravne HTML elemente za njihovu namjenu. Naslovi idu u <h1> do <h6> redom, bez preskakanja razina. Navigacija u <nav>, glavni sadržaj u <main>, podnožje u <footer>. Čitači ekrana koriste ovu strukturu za navigaciju, isto kao što vi koristite vizualni raspored stranice.

Alt tekstovi za slike

Svaka slika koja prenosi informaciju mora imati smislen opis u alt atributu. Ne "IMG_4523.jpg", nego "Tim webstranica.hr u uredu u Krapini" ili "Graf koji prikazuje rast prometa za 40% nakon redizajna". Dekorativne slike koje ne nose informaciju trebaju prazan alt (alt="") da ih čitači ekrana preskoče.

Navigacija tipkovnicom

Svaki interaktivni element (link, gumb, forma) mora biti dostupan korištenjem Tab tipke. Fokus mora biti vidljiv, obično kao obrub oko aktivnog elementa. Korisnik nikad ne smije zapeti u "zamci" iz koje ne može izaći tipkovnicom. Testiranje je jednostavno: pokušajte koristiti svoju stranicu bez miša.

Kontrast boja

Tekst mora biti dovoljno kontrastiran u odnosu na pozadinu. WCAG 2.1 AA zahtijeva omjer od najmanje 4.5:1 za normalan tekst i 3:1 za veliki tekst (18px bold ili 24px regular). Svijetlo sivi tekst na bijeloj pozadini ne prolazi. Koristite alate poput WebAIM Contrast Checker za provjeru.

ARIA oznake

Accessible Rich Internet Applications (ARIA) atributi pomažu čitačima ekrana razumjeti interaktivne elemente koje standardni HTML ne može dovoljno opisati. Na primjer, aria-label daje opis gumbu koji ima samo ikonu, aria-expanded govori je li izbornik otvoren ili zatvoren. Koristite ih samo kad standardni HTML semantički elementi nisu dovoljni.

Kompatibilnost s čitačima ekrana

Testirajte stranicu s barem jednim čitačem ekrana. NVDA je besplatan za Windows, VoiceOver je ugrađen u macOS i iOS. Ovo je najvažniji test jer otkriva probleme koje automatski alati ne mogu detektirati, poput zbunjujućeg redoslijeda čitanja ili nejasnih oznaka formi.

Usporedba pristupačne i nepristupačne stranice

Evo konkretnih razlika između stranice koja prolazi ključne WCAG AA provjere i one koja ih ne prolazi. Ovo su elementi koji se tipično provjeravaju u tehničkoj procjeni pristupačnosti.

Kako provjeriti svoju stranicu

Ne morate pogađati je li vaša stranica pristupačna. Postoje besplatni alati koji vam mogu odmah pokazati konkretne probleme.

• WAVE (wave.webaim.org) - vizualno označava probleme na stranici, odličan za brzu provjeru
• axe DevTools - Chrome proširenje koje automatski detektira WCAG greške
• Google Lighthouse - ugrađen u Chrome DevTools, ima sekciju pristupačnosti s bodovanjem
• WebAIM Contrast Checker - za provjeru kontrasta boja

Automatski alati ne mogu uhvatiti sve probleme. Za potpuniju provjeru, testirajte ručno: isključite miš i navigirajte tipkovnicom, povećajte tekst na 200%, uključite čitač ekrana i pokušajte obaviti ključne zadatke na stranici.

Koliko košta prilagodba

Cijena ovisi o tome radite li novu stranicu ili prilagođavate postojeću.

• Nova stranica - pristupačnost treba planirati od početka, jer je naknadno popravljanje navigacije, formi i predložaka obično skuplje od ispravne izvedbe u startu.
• Postojeća stranica s manjim problemima - obično se rješava kroz manji zahvat: alt tekstovi, kontrast, oznake formi i semantička struktura
• Stranica s ozbiljnim nedostacima - može tražiti dublji refaktoring navigacije, formi, predložaka i interaktivnih elemenata

Usporedite to s propisanim kaznama za pravne osobe koje pružaju obuhvaćene usluge i s rizikom da dio korisnika ne može obaviti osnovnu radnju na stranici.

Kako mi gradimo pristupačne stranice

Kod webstranica.hr, pristupačnost nije dodatna opcija ili premium paket. Planira se od početka, kroz strukturu, kontrast, fokus, tipkovnicu i jasne forme.

• Semantički HTML od početka - svaka stranica koristi ispravne elemente za svaku namjenu, od naslova do navigacije
• Skip-to-content link - omogućuje korisnicima čitača ekrana da preskoče navigaciju i odu direktno na sadržaj
• Vidljivi fokus - svaki interaktivni element ima jasno označen fokus za navigaciju tipkovnicom
• Kontrast boja provjeren - kombinacije boja provjeravam prema WCAG 2.1 AA pravilima kontrasta
• ARIA atributi - gumbi, navigacija i interaktivni elementi imaju odgovarajuće oznake za čitače ekrana
• Responzivan dizajn - tekst se može povećati na 200% bez gubitka funkcionalnosti, na svakom uređaju
• Testiranje s čitačem ekrana - za ključne tokove provjeravam redoslijed čitanja, oznake formi i navigaciju

Zašto je pristupačnost dobra za poslovanje

Osim smanjenja regulatornog rizika, pristupačna stranica može donijeti praktične poslovne koristi o kojima se rijetko govori.

• Veća publika - WHO procjenjuje da 1 od 6 osoba živi sa značajnim invaliditetom
• Bolji SEO - mnoge prakse pristupačnosti (alt tekstovi, semantička struktura, čist HTML) su ujedno i SEO najbolje prakse. Mogu neizravno pomoći SEO-u.
• Bolje korisničko iskustvo za sve - stariji korisnici, ljudi s privremenim ograničenjima (slomljena ruka, umorne oči), korisnici na sporim mrežama
• Pozitivan imidž - pokazujete da vam je stalo do svih korisnika, ne samo onih bez ikakvih poteškoća
• Pravna sigurnost - smanjujete regulatorni rizik i rizik da korisnik ne može obaviti osnovnu radnju na stranici

Pristupačnost je dio kvalitetne web stranice. Zakon se već primjenjuje za obuhvaćene proizvode i usluge, pa je razumno provjeriti stanje prije nego problem postane hitan. Pogledajte naše pakete ili nas kontaktirajte za provjeru pristupačnosti vaše trenutne stranice.

Ako vas zanima što još može poći po krivu s web stranicom, pročitajte i naš članak o najčešćim greškama na web stranicama malih tvrtki.

Posljednje ažuriranje: 1. lipnja 2026. Izvori: Direktiva (EU) 2019/882, Europska komisija o EAA, Zakon o zahtjevima za pristupačnost proizvoda i usluga, NN 89/2025, WHO disability and health, W3C WCAG overview, WCAG 2.1, WebAIM Million 2025, WAVE, axe DevTools, Google Lighthouse i NVDA. Ovo nije pravni savjet; za konkretnu obvezu provjerite tekst zakona ili pravnika.