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

Da web stranicu učinite pristupačnom, izgradite je tako da je ljudi mogu koristiti tastaturom, čitačem ekrana, zumiranjem ili prekidačem, a ne samo mišem: koristite prave HTML elemente za dugmad, linkove, naslove i oznake forme, dajte slikama smislen alt tekst, održavajte visok kontrast teksta i učinite fokus vidljivim. Standard kojem treba težiti je WCAG 2.2 nivo AA. Automatske provjere otkrivaju dio problema; desetominutni test tastaturom i čitačem ekrana otkriva veliki dio ostatka.

Šta "pristupačno" znači u praksi

Pristupačnost se tiče ljudi: nekoga ko je slijep i koristi čitač ekrana, nekoga s tremorom ko se kreće tastaturom, nekoga sa slabim vidom ko zumira na 200%, nekoga ko čita na jakom suncu, nekoga s privremeno slomljenim zglobom. Dobra pristupačnost obično čini stranicu boljom za sve — jasnija struktura, čitljiv tekst, forme koje objašnjavaju greške.

Referentni standard su W3C-ove Smjernice za pristupačnost web sadržaja (WCAG). Od septembra 2026, aktuelna verzija je WCAG 2.2 (objavljena u oktobru 2023, ažurirana u decembru 2024); WCAG 3 je rani nacrt. WCAG je organizovan oko četiri principa — sadržaj mora biti opažljiv, upotrebljiv, razumljiv i robustan — i ima tri nivoa usklađenosti:

Zakoni na više mjesta upućuju na WCAG — na primjer Evropski akt o pristupačnosti, koji se od juna 2025. primjenjuje na mnoge digitalne usluge namijenjene potrošačima u EU. Koja pravila se odnose na vas zavisi od toga gdje poslujete i šta prodajete; ako niste sigurni, provjerite s savjetnikom. Ovaj vodič pokriva praktičan rad.

Opcije: kako doći do cilja

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

Popravke koje najviše važe

Koristite prave HTML elemente

Veći dio pristupačnosti dolazi besplatno uz ispravan HTML. <button> je fokusiran, radi s Enter i Space i čita se kao dugme. <div> s handlerom za klik nije ništa od toga. AI generisani kod ponekad koristi stilizovane div-ove za sve; tražite semantičke elemente:

• <button> za radnje, <a href> za navigaciju
• Jedan <h1> po stranici, pa <h2>, <h3> redom — korisnici čitača ekrana skaču između naslova
• Orijentiri: <header>, <nav>, <main>, <footer>
• <label> povezan sa svakim poljem forme
• Jezik stranice u <html lang="en">

Koristite ARIA atribute samo kad nijedan nativni element ne odgovara — na primjer za prilagođeni set tabova ili combobox. Pogrešan ARIA je gori od ničega.

Pristup tastaturom i vidljiv fokus

Sve što možete uraditi mišem mora raditi samo tastaturom (WCAG 2.1.1). Pritisnite Tab kroz stranicu: svaki link, dugme i polje treba biti dostupan logičnim redom, a uvijek treba vidjeti gdje je fokus (2.4.7 Focus Visible). WCAG 2.2 je dodao da fokusirani element ne smije biti potpuno sakriven iza ljepljivih zaglavlja ili banera za kolačiće (2.4.11, nivo AA).

Uobičajeni problemi: meniji koji se otvaraju samo na hover, modali koji ne zadržavaju fokus ili se ne mogu zatvoriti tasterom Escape, i outline: none u CSS-u bez ičega što ga zamjenjuje.

Tekstualne alternative

Svaka smislena slika treba alt tekst koji u kontekstu kaže šta prikazuje ("Kuvar servira degustacijski meni", a ne "image1.jpg"). Dekorativne slike dobijaju prazan alt="" da ih čitači ekrana preskoče. Dugmad samo s ikonom trebaju pristupačan naziv ("Zatvori", "Pretraga"). Videi trebaju titlove; audio treba transkript.

Boja i kontrast

WCAG 2.2 AA traži omjer kontrasta od najmanje 4,5:1 za normalan tekst i 3:1 za veliki tekst (1.4.3), te 3:1 za dijelove interfejsa poput granica unosa i smislenih ikona (1.4.11). Tekst placeholder-a u svijetlo sivoj boji i blijedi dugmad su uobičajeni problemi. Također, nikad ne koristite samo boju za prenošenje značenja — crvena granica na neispravnom polju treba i poruku o grešci.

Promjena veličine i prelamanje

Tekst mora ostati upotrebljiv pri zumiranju na 200% (1.4.4), a sadržaj mora raditi na širini od 320 CSS piksela bez horizontalnog skrolovanja (1.4.10). Pravilno responzivni raspored rješava većinu ovoga.

Mete, forme i greš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.
• Forme: vidljive oznake (ne samo placeholder), jasna uputstva i poruke o greškama koje kažu šta nije u redu i kako to popraviti, pored polja.
• Prijava: nemojte tjerati ljude da rješavaju zagonetku ili prepisuju kod bez alternative; dozvolite menadžere lozinki i lijepljenje (3.3.8 Accessible Authentication).

Prompti koji rade

Napravi ovu stranicu tako da ispunjava WCAG 2.2 nivo AA: semantički HTML orijentiri, jedan h1 po stranici s naslovima po redu, prava dugmad i linkovi, oznake na svakom polju forme, vidljivi stilovi fokusa, kontrast teksta najmanje 4,5:1, alt tekst na smislenim slikama i alt="" na dekorativnim, te postavljen html lang.

Provjeri pristupačnost stranica /signup i /checkout. Provjeri korištenje samo tastaturom, redoslijed fokusa, vidljiv fokus, oznake, poruke o greškama, kontrast i nazive za čitač ekrana za dugmad s ikonama. Navedi svaki problem s WCAG kriterijem, pa ga popravi bez mijenjanja vizuelnog dizajna više nego što je potrebno.

Mobilni meni ne može se koristiti tastaturom. Pretvori ga u dugme s aria-expanded, premjesti fokus u meni kad se otvori, zatvori ga tasterom Escape i vrati fokus na dugme.

Korak po korak

1. Pokrenite automatsku provjeru. Odjeljak Accessibility u Lighthouseu u Chrome DevTools-u ili axe ekstenziju za preglednik, na svakoj glavnoj stranici. Popravite sve što prijavi.
2. Odmaknite miš. Pređite Tabom kroz svaku stranicu i završite svaki ključni zadatak — prijava, pretraga, plaćanje. Zabilježite sve što ne možete doseći, na čemu ne vidite fokus ili iz čega ne možete izaći.
3. Zumirajte na 200% i suzite prozor na širinu telefona. Ništa ne smije biti odsječeno ili tražiti horizontalno skrolovanje.
4. Isprobajte čitač ekrana deset minuta: VoiceOver na Macu i iPhoneu, TalkBack na Androidu ili NVDA na Windowsu (besplatan). Slušajte naslove, linkove i polja forme. Dugme bez naziva ili "link, klikni ovdje" znače posao koji treba uraditi.
5. Provjerite kontrast za tekst, dugmad i unose pomoću alata za provjeru kontrasta.
6. Popravite, pa ponovo testirajte iste zadatke.
7. Objavite izjavu o pristupačnosti koja kaže koji standard ciljate i kako prijaviti probleme — i odgovarajte na te prijave.

Česte greške

• Oslanjanje na widget preklapanja umjesto popravljanja koda.
• Uklanjanje obrisa fokusa jer izgledaju neuredno, bez zamjene.
• Tekst placeholder-a kao jedina oznaka. Nestane čim neko počne kucati i često ima nizak kontrast.
• Linkovi "Klikni ovdje" i "Pročitaj više". Van konteksta, korisnici čitača ekrana čuju listu identičnih linkova.
• Alt tekst pun ključnih riječi. Alt tekst je za ljude; opišite sliku.
• Testiranje jednom. Svaka nova funkcija može pokvariti pristup tastaturom. Dodajte prolaz tastaturom u svoje testiranje prije lansiranja.

Lista za pristupačnost

• Automatska provjera (Lighthouse ili axe) čista na glavnim stranicama
• Svaki zadatak se može završiti samo tastaturom
• Fokus uvijek vidljiv i nikad sakriven iza ljepljivih elemenata
• Semantički naslovi, orijentiri, dugmad i linkovi; postavljen lang
• Smislen alt tekst; dekorativne slike alt=""; titlovi na videu
• Kontrast teksta ≥ 4,5:1 (veliki tekst ≥ 3:1); dijelovi UI-ja ≥ 3:1
• Radi pri zumu od 200% i širini od 320 px
• Svako polje forme ima vidljivu oznaku i jasne poruke o greškama
• Izjava o pristupačnosti s načinom za prijavu problema

Za koncepte iza ovoga pročitajte šta je web pristupačnost. Pristupačan i dobar dizajn se dosta preklapaju; kako dizajnirati dobro izgledajuću aplikaciju uz AI pokriva vizuelnu stranu.

Pristupačnost na Mythexu

Mythex gradi prema standardu koji tražite, pa stavite "WCAG 2.2 AA" u svoj prvi prompt i u naredne. Možete koristiti okvir veličine telefona u Previewu za provjeru malih ekrana (Preview i Code), ali testovi tastaturom, zumiranjem i čitačem ekrana najbolje funkcionišu na objavljenoj URL adresi ili pregledu otvorenom u vlastitom tabu. Zamolite agenta da provjeri stranicu, popravi što pronađe, pa sami testirajte popravke — automatska provjera je početak, a ne potvrda.

Pitanja