Kako učiniti web stranicu pristupačnom: početni vodič prema WCAG 2.2

Web stranicu čineš pristupačnom tako da je izgradiš tako da ljudi mogu koristiti tipkovnicu, čitač zaslona, zumiranje ili uređaj s prekidačem, a ne samo miš: koristi prave HTML elemente za gumbe, poveznice, naslove i oznake obrazaca; daj slikama smislen alt tekst; drži visok kontrast teksta i učini fokus vidljivim. Standard kojem treba težiti je WCAG 2.2 razina AA. Automatske provjere otkrivaju dio problema; desetominutni test tipkovnicom i čitačem zaslona otkriva velik dio ostatka.

Što u praksi znači „pristupačno”

Pristupačnost se tiče ljudi: nekoga tko je slijep i koristi čitač zaslona, nekoga s tremorom koji se kreće tipkovnicom, nekoga sa slabim vidom koji zumira na 200%, nekoga koji čita na jakom suncu, nekoga s privremeno slomljenim zglobom. Dobra pristupačnost obično čini stranicu boljom za sve: jasnija struktura, čitljiv tekst, obrasci koji objašnjavaju pogreške.

Referentni standard su W3C-ove Smjernice za pristupačnost web sadržaja (WCAG). Od rujna 2026. aktualna verzija je WCAG 2.2 (objavljena u listopadu 2023., ažurirana u prosincu 2024.); WCAG 3 je rani nacrt. WCAG je organiziran oko četiri načela — sadržaj mora biti opažljiv, upravljiv, razumljiv i robustan — i ima tri razine usklađenosti:

Zakoni na nekoliko mjesta upućuju na WCAG — primjerice Europski akt o pristupačnosti, koji se od lipnja 2025. primjenjuje na mnoge digitalne usluge namijenjene potrošačima u EU. Koja se pravila odnose na tebe ovisi o tome gdje posluješ i što prodaješ; ako nisi siguran, provjeri s savjetnikom. Ovaj vodič pokriva praktičan posao.

Mogućnosti: kako doći do cilja

Za većinu malih stranica prva dva su dovoljna: reci AI-ju da od početka gradi pristupačno, pa prije lansiranja napravi reviziju.

Popravci koji najviše znače

Koristi prave HTML elemente

Većina pristupačnosti dolazi besplatno uz ispravan HTML. Element <button> može dobiti fokus, radi s Enterom i razmakom i čita se kao gumb. Element <div> s rukovateljem klika nije ništa od toga. Kod generiran AI-jem ponekad koristi stilizirane div elemente za sve; zatraži semantičke elemente:

• <button> za radnje, <a href> za navigaciju
• Jedan <h1> po stranici, zatim <h2> i <h3> redom — korisnici čitača zaslona skaču između naslova
• Orijentacijske točke: <header>, <nav>, <main>, <footer>
• <label> povezan s svakim poljem obrasca
• Jezik stranice u <html lang="hr">

ARIA atribute koristi samo kad nijedan nativni element ne odgovara — primjerice za prilagođeni skup kartica ili combobox. Pogrešan ARIA gori je od nikakvog.

Pristup tipkovnicom i vidljiv fokus

Sve što možeš raditi mišem mora raditi i samo s tipkovnicom (WCAG 2.1.1). Pritisni Tab kroz stranicu: svaka poveznica, gumb i polje trebaju biti dostupni logičnim redom, a uvijek trebaš vidjeti gdje je fokus (2.4.7 Fokus vidljiv). WCAG 2.2 dodao je da fokusirani element ne smije biti potpuno skriven iza ljepljivih zaglavlja ili banera za kolačiće (2.4.11, razina AA).

Česte greške: izbornici koji se otvaraju samo pri prelasku mišem, modalni prozori koji ne zadržavaju fokus ili se ne mogu zatvoriti tipkom Escape, te outline: none u CSS-u bez zamjene.

Tekstualne alternative

Svaka smislena slika treba alt tekst koji opisuje što prikazuje u kontekstu („Kuhar servira degustacijski meni”, a ne „image1.jpg”). Dekorativne slike dobivaju prazan alt="" pa ih čitači zaslona preskaču. Gumbi s samo ikonom trebaju pristupačan naziv („Zatvori”, „Traži”). Videozapisi trebaju titlove; audio treba transkript.

Boja i kontrast

WCAG 2.2 AA traži omjer kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst (1.4.3), te 3:1 za dijelove sučelja poput rubova polja za unos i smislenih ikona (1.4.11). Svijetlosivi placeholder tekst i blijedi gumbi uobičajeni su problemi. Također, nikad ne koristi samo boju za prenošenje značenja — crveni rub na neispravnom polju treba i poruku o pogrešci.

Promjena veličine i prijelom

Tekst mora ostati upotrebljiv pri zumiranju na 200% (1.4.4), a sadržaj mora raditi pri širini od 320 CSS piksela bez vodoravnog pomicanja (1.4.10). Pravilno responzivno raspoređivanje rješava veći dio ovoga.

Mete, obrasci i pogreške

• Veličina mete: WCAG 2.2 AA traži mete za pokazivač od najmanje 24 x 24 CSS piksela, ili dovoljan razmak oko manjih (2.5.8). Veće je ljubaznije prema telefonima.
• Obrasci: vidljive oznake (ne samo placeholder), jasne upute i poruke o pogreškama koje kažu što nije u redu i kako to popraviti, pored polja.
• Prijava: nemoj tjerati ljude da rješavaju zagonetku ili prepisuju kod bez alternative; dopusti upraviteljima lozinki i lijepljenje (3.3.8 Pristupačna autentikacija).

Upiti koji funkcioniraju

Izgradi ovu stranicu prema WCAG 2.2 razini AA: semantičke HTML orijentacijske točke, jedan h1 po stranici s naslovima redom, prave elemente gumba i poveznica, oznake na svakom polju obrasca, vidljive stilove fokusa, kontrast teksta najmanje 4,5:1, alt tekst na smislenim slikama i alt="" na dekorativnima te postavljen html lang.

Pregledaj stranice /signup i /checkout za pristupačnost. Provjeri uporabu samo tipkovnicom, redoslijed fokusa, vidljiv fokus, oznake, poruke o pogreškama, kontrast i nazive za čitač zaslona na gumbima s ikonama. Navedi svaki problem s WCAG kriterijem, pa ga popravi bez mijenjanja vizualnog dizajna više nego što je nužno.

Mobilni izbornik ne može se koristiti tipkovnicom. Neka bude gumb s aria-expanded, pri otvaranju prebaci fokus u izbornik, zatvori ga tipkom Escape i vrati fokus na gumb.

Korak po korak

1. Pokreni automatsku provjeru. Odjeljak Accessibility u Lighthouseu u Chrome DevTools ili axe proširenje za preglednik, na svakoj glavnoj stranici. Popravi sve što prijavi.
2. Odspoji miš. Prođi Tabom kroz svaku stranicu i dovrši svaki ključni zadatak — prijava, pretraga, plaćanje. Zabilježi sve što ne možeš doseći, ne vidiš fokus ili iz čega ne možeš izaći.
3. Zumiraj na 200% i suzi prozor na širinu telefona. Ništa ne smije biti odsječeno niti zahtijevati vodoravno pomicanje.
4. Isprobaj čitač zaslona deset minuta: VoiceOver na Macu i iPhoneu, TalkBack na Androidu ili NVDA na Windowsu (besplatno). Slušaj naslove, poveznice i polja obrasca. „Gumb” bez naziva ili „poveznica, klikni ovdje” znači posao za napraviti.
5. Provjeri kontrast teksta, gumba i polja alatom za provjeru kontrasta.
6. Popravi, pa ponovno testiraj iste zadatke.
7. Objavi izjavu o pristupačnosti u kojoj piše koji standard ciljaš i kako prijaviti probleme — i odgovaraj na te prijave.

Česte greške

• Oslanjanje na preklopni widget umjesto popravljanja koda.
• Uklanjanje obrisa fokusa jer izgledaju neuredno, bez zamjene.
• Placeholder tekst kao jedina oznaka. Nestaje kad korisnik počne tipkati i često je niskog kontrasta.
• Poveznice „Klikni ovdje” i „Pročitaj više”. Izvan konteksta korisnici čitača zaslona čuju popis istih poveznica.
• Alt tekst nabijen ključnim riječima. Alt tekst je za ljude; opiši sliku.
• Testiranje jednom. Svaka nova značajka može pokvariti pristup tipkovnicom. Dodaj prolaz tipkovnicom u svoje testiranje prije lansiranja.

Popis pristupačnosti

• Automatska provjera (Lighthouse ili axe) čista na glavnim stranicama
• Svaki zadatak može se dovršiti samo tipkovnicom
• Fokus uvijek vidljiv i nikad skriven iza ljepljivih elemenata
• Semantički naslovi, orijentacijske točke, gumbi i poveznice; postavljen lang
• Smislen alt tekst; dekorativne slike alt=""; titlovi na videu
• Kontrast teksta ≥ 4,5:1 (veliki tekst ≥ 3:1); dijelovi sučelja ≥ 3:1
• Radi pri zumiranju 200% i širini 320 px
• Svako polje obrasca ima vidljivu oznaku i jasne poruke o pogreškama
• Izjava o pristupačnosti s načinom prijave problema

Za koncepte iza ovoga pročitaj što je web pristupačnost. Pristupačan dizajn i dobar dizajn se jako preklapaju; kako dizajnirati lijepo izgledajuću aplikaciju uz AI pokriva vizualnu stranu.

Pristupačnost na Mythexu

Mythex gradi s onim standardom koji zatražiš, pa u prvi upit i u nastavke stavi „WCAG 2.2 AA”. Možeš koristiti okvir telefonske veličine u Previewu za provjeru malih ekrana (Preview i Code), ali testovi tipkovnicom, zumiranjem i čitačem zaslona najbolje rade na objavljenoj adresi ili pregledu otvorenom u vlastitoj kartici. Zamoli agenta da pregleda stranicu, popravi što pronađe, pa sam testiraj popravke — automatski prolaz je početak, a ne potvrda.

Pitanja