Kako učiniti sajt pristupačnim: početni vodič za WCAG 2.2

Da biste sajt učinili pristupačnim, napravite ga tako da ljudi mogu da ga koriste tastaturom, čitačem ekrana, uvećavanjem ili uređajem za prebacivanje, a ne samo mišem: koristite prave HTML elemente za dugmad, linkove, naslove i oznake formulara, dajte slikama smislen alt tekst, održavajte visok kontrast teksta i učinite fokus vidljivim. Standard kome treba težiti je WCAG 2.2 nivo AA. Automatske provere hvataju deo problema; desetominutni test tastaturom i čitačem ekrana otkriva veliki deo ostatka.

Šta „pristupačno“ znači u praksi

Pristupačnost se tiče ljudi: slepe osobe koja koristi čitač ekrana, osobe sa drhtanjem koja se kreće tastaturom, osobe sa slabim vidom koja uvećava na 200%, osobe koja čita na jakom suncu, osobe sa privremeno slomljenim zglobom. Dobra pristupačnost obično čini sajt boljim za sve: jasnija struktura, čitljiv tekst, formulari koji objašnjavaju greške.

Referentni standard su Smernice za pristupačnost veb sadržaja (WCAG) W3C-a. 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, upravljiv, razumljiv i robustan) i ima tri nivoa usklađenosti:

Zakoni na nekoliko mesta upućuju na WCAG, na primer Evropski akt o pristupačnosti, koji se od juna 2025. primenjuje na mnoge digitalne usluge za potrošače u EU. Koja pravila se odnose na vas zavisi od toga gde poslujete i šta prodajete; ako niste sigurni, proverite sa savetnikom. Ovaj vodič pokriva praktičan rad.

Opcije: kako do toga

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

Popravke koje najviše važe

Koristite prave HTML elemente

Većina pristupačnosti dolazi besplatno uz ispravan HTML. <button> je fokusabilan, radi sa Enter i Space i čita se kao dugme. <div> sa rukovaocem klika nije nijedno od toga. Generisani kod uz AI ponekad koristi stilizovane div-ove za sve; tražite semantičke elemente:

• <button> za radnje, <a href> za navigaciju
• Po jedan <h1> na stranici, zatim <h2>, <h3> redom; korisnici čitača ekrana skaču između naslova
• Orijentiri: <header>, <nav>, <main>, <footer>
• <label> povezan sa svakim poljem formulara
• Jezik stranice u <html lang="en">

ARIA atribute koristite samo kad nijedan nativni element ne odgovara, na primer za prilagođeni set kartica ili combobox. Pogrešan ARIA je gori od nikakvog.

Pristup tastaturom i vidljiv fokus

Sve što možete da uradite mišem mora da radi samo tastaturom (WCAG 2.1.1). Pritisnite Tab kroz stranicu: svaki link, dugme i polje treba da bude dostupno logičnim redom, i uvek treba da vidite gde je fokus (2.4.7 Focus Visible). WCAG 2.2 je dodao da fokusirani element ne sme biti potpuno sakriven iza lepljivih zaglavlja ili banera za kolačiće (2.4.11, nivo AA).

Česti propusti: meniji koji se otvaraju samo pri prelasku mišem, modali koji ne zadržavaju fokus ili ne mogu da se zatvore tasterom Escape, i outline: none u CSS-u bez ičega što ga zamenjuje.

Tekstualne alternative

Svaka smislena slika treba alt tekst koji u kontekstu kaže šta prikazuje („Kuvar servira degustacioni meni“, a ne „image1.jpg“). Dekorativne slike dobijaju prazan alt="" da ih čitači preskoče. Dugmad samo sa ikonom treba da imaju pristupačno ime („Zatvori“, „Pretraga“). Video treba titlove; audio treba transkript.

Boja i kontrast

WCAG 2.2 nivo AA traži odnos kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst (1.4.3), i 3:1 za delove interfejsa kao što su ivice polja za unos i smislene ikone (1.4.11). Svetlosivi tekst placeholder-a i bledo dugme su uobičajeni propusti. Takođe, nikad ne koristite samo boju da nosi značenje: crvena ivica na neispravnom polju treba i poruku o grešci.

Promena veličine i prelamanje

Tekst mora ostati upotrebljiv pri uvećanju na 200% (1.4.4), a sadržaj mora raditi na širini od 320 CSS piksela bez horizontalnog skrolovanja (1.4.10). Dobar responzivan raspored rešava većinu toga.

Mete, formulari i greške

• Veličina mete: WCAG 2.2 nivo AA traži da mete za pokazivač budu najmanje 24 × 24 CSS piksela ili dovoljno razmaka oko manjih (2.5.8). Veće je ljubaznije na telefonima.
• Formulari: vidljive oznake (ne samo placeholder), jasna uputstva i poruke o greškama koje kažu šta nije u redu i kako da se popravi, pored polja.
• Prijava: ne tražite od ljudi da rešavaju zagonetku ili da prepisuju kod bez alternative; dozvolite menadžere lozinki i lepljenje (3.3.8 Accessible Authentication).

Upiti koji rade

Napravi ovaj sajt tako da ispunjava WCAG 2.2 nivo AA: semantički HTML orijentiri, jedan h1 po stranici sa naslovima u redu, pravi elementi dugmadi i linkova, oznake na svakom polju formulara, vidljivi stilovi fokusa, kontrast teksta najmanje 4,5:1, alt tekst na smislenim slikama i alt="" na dekorativnim, i postavljen html lang.

Proveri pristupačnost stranica /signup i /checkout. Proveri upotrebu samo tastaturom, redosled fokusa, vidljiv fokus, oznake, poruke o greškama, kontrast i imena za čitače ekrana za dugmad sa ikonama. Navedi svaki problem sa WCAG kriterijumom, pa ih popravi bez menjanja vizuelnog dizajna više nego što je potrebno.

Mobilni meni ne može da se koristi tastaturom. Napravi ga kao dugme sa aria-expanded, prebaci fokus u meni kad se otvori, zatvori ga tasterom Escape i vrati fokus na dugme.

Korak po korak

1. Pokrenite automatsku proveru. Odeljak Accessibility u Lighthouse-u u Chrome DevTools-u ili axe ekstenzija za pregledač, na svakoj glavnoj stranici. Popravite sve što prijavi.
2. Izvadite miš. Prolazite Tab kroz svaku stranicu i završite svaki ključni zadatak: prijavu, pretragu, plaćanje. Zabeležite šta ne možete da dosegnete, gde ne vidite fokus ili odakle ne možete da izađete.
3. Uvećajte na 200% i suzite prozor na širinu telefona. Ništa ne sme biti odsečeno ili zahtevati horizontalno skrolovanje.
4. Probajte čitač ekrana deset minuta: VoiceOver na Mac-u i iPhone-u, TalkBack na Android-u ili NVDA na Windows-u (besplatan). Slušajte naslove, linkove i polja formulara. „Dugme“ bez imena ili „link, klikni ovde“ znači da ima posla.
5. Proverite kontrast teksta, dugmadi i polja pomoću alata za proveru kontrasta.
6. Popravite, pa ponovo testirajte iste zadatke.
7. Objavite izjavu o pristupačnosti u kojoj piše koji standard ciljate i kako se prijavljuju problemi, i odgovarajte na te prijave.

Česte greške

• Oslanjanje na overlay widget umesto popravljanja koda.
• Uklanjanje obrisa fokusa jer deluju neuredno, bez zamene.
• Tekst placeholder-a kao jedina oznaka. Nestaje kad neko počne da kuca i često je niskog kontrasta.
• Linkovi „Klikni ovde“ i „Pročitaj više“. Van konteksta, korisnici čitača ekrana čuju niz istih linkova.
• Alt tekst pun ključnih reči. Alt tekst je za ljude; opišite sliku.
• Testiranje jednom. Svaka nova funkcija može da pokvari pristup tastaturom. Dodajte prolaz tastaturom u svoje testiranje pre lansiranja.

Kontrolna lista pristupačnosti

• Automatska provera (Lighthouse ili axe) čista na glavnim stranicama
• Svaki zadatak može da se završi samo tastaturom
• Fokus uvek vidljiv i nikad sakriven iza lepljivih elemenata
• Semantički naslovi, orijentiri, dugmad i linkovi; lang postavljen
• Smislen alt tekst; dekorativne slike alt=""; titlovi na videu
• Kontrast teksta ≥ 4,5:1 (veliki tekst ≥ 3:1); delovi interfejsa ≥ 3:1
• Radi pri uvećanju od 200% i širini od 320 px
• Svako polje formulara ima vidljivu oznaku i jasne poruke o greškama
• Izjava o pristupačnosti sa načinom za prijavu problema

Za koncepte iza ovoga pročitajte šta je veb pristupačnost. Pristupačan i dobar dizajn se mnogo preklapaju; kako napraviti lepu aplikaciju uz AI pokriva vizuelnu stranu.

Pristupačnost na Mythex-u

Mythex gradi sa standardom koji tražite, pa u prvi upit i u naredne stavite „WCAG 2.2 AA“. Možete koristiti okvir pregleda veličine telefona da proverite male ekrane (Preview and Code), ali testovi tastaturom, uvećavanjem i čitačem ekrana najbolje rade na objavljenoj adresi ili na pregledu otvorenom u sopstvenom tabu. Zamolite agenta da proveri stranicu, popravi šta nađe, pa sami testirajte popravke. Automatska provera je početak, a ne potvrda.

Pitanja