Što je web pristupačnost? WCAG i inkluzivni dizajn objašnjeni

Web pristupačnost znači izrađivati web stranice i aplikacije tako da ih ljudi s invaliditetom mogu koristiti — bilo da su slijepi i koriste čitač zaslona, ne mogu koristiti miš, imaju slab vid ili daltonizam, gluhi su ili imaju kognitivne teškoće ili teškoće u učenju. U praksi se svodi na stvari poput tekstualnih alternativa za slike, dovoljnog kontrasta boja, obrazaca s ispravnim oznakama i toga da sve radi samo s tipkovnicom. Međunarodni standard za to je WCAG, Smjernice za pristupačnost web sadržaja (Web Content Accessibility Guidelines) koje objavljuje W3C.

Pristupačnost se često skraćuje u a11y — „a“, zatim 11 slova, pa „y“.

Zašto je pristupačnost važna kad gradite uz AI

AI graditelji dobro izrađuju aplikacije koje izgledaju ispravno. Pristupačnost se uglavnom tiče onoga što se ne vidi na snimci zaslona: je li gumb stvarno gumb, ima li polje oznaku koju čitač zaslona može izgovoriti, možete li doći do izbornika tipkom Tab.

Zato je važno pitati:

• Lako se previdi. Prilagođeni padajući izbornik može izgledati savršeno, a biti nemoguć za korištenje bez miša. Nećete to primijetiti dok to ne testirate.
• Jeftinije je ispraviti na početku. Traženje pristupačnih komponenti već u prvom upitu košta gotovo ništa. Naknadno popravljanje gotove aplikacije znači dirati svaki ekran.
• Pomaže svima. Titlovi pomažu ljudima na bučnim mjestima, dobar kontrast pomaže ljudima na telefonima na suncu, a jasne oznake pomažu svima da brže ispune obrasce.
• Preklapa se sa SEO-om. Ispravni naslovi, opisni linkovi i alt tekst pomažu i tražilicama da razumiju vaše stranice — vidi SEO za web stranice izgrađene uz AI.
• Može biti zakonska obveza. Ovisno o tome gdje poslujete i koga poslužujete, pristupačnost može biti pravna obveza.

Svakodnevna usporedba

Zamislite ulaz u zgradu.

Stepenice odgovaraju mnogim ljudima. Rampa omogućuje ulazak osobama u invalidskim kolicima — ali i roditeljima s kolicima za bebe, dostavljačima s kolicima i putnicima s kovčezima. Automatska vrata, jasni znakovi, Brailleovo pismo na gumbima dizala i dobro osvjetljenje svaki uklanjaju barijeru za nekoga.

Web pristupačnost je ista ideja za digitalne prostore: rampe, znakovi i ograde vaše aplikacije. I, kao i kod zgrade, puno je lakše uklopiti rampu u nacrte nego je dodati nakon što je beton stvrdnuo.

WCAG ukratko

WCAG objavljuje W3C-ova inicijativa za web pristupačnost (Web Accessibility Initiative). Trenutna verzija je WCAG 2.2, prvi put objavljena u listopadu 2023. Unazadno je kompatibilna: sadržaj koji zadovoljava WCAG 2.2 zadovoljava i 2.1 i 2.0, a W3C potiče korištenje najnovije verzije. WCAG 2.2 je također odobren kao međunarodni standard, ISO/IEC 40500:2025. Vrlo drukčiji WCAG 3 je u razvoju kao rani nacrt, a ne kao gotov standard.

WCAG je organiziran pod četiri načela, koja se često pamte kao POUR:

Svaka smjernica ima provjerljive kriterije uspjeha na tri razine:

• Razina A — minimum. Neuspjeh ovdje potpuno blokira neke ljude.
• Razina AA — standardni cilj i razina na koju se najčešće pozivaju zakoni i politike.
• Razina AAA — najviša razina. Korisno je težiti joj na nekim mjestima, ali W3C ne preporučuje da se zahtijeva za cijele stranice, jer neki sadržaj ne može zadovoljiti.

WCAG 2.2 dodao je devet kriterija uspjeha na 2.1, uključujući Minimalnu veličinu cilja na razini AA — klikabilne mete trebaju općenito biti barem 24 x 24 CSS piksela, uz iznimke — i Minimalnu pristupačnu autentifikaciju, koja ograničava korake prijave koji se oslanjaju na pamćenje ili zagonetke, poput ponovnog upisivanja lozinke bez dopuštanja lijepljenja. Također je uklonio staro načelo „Parsing“ kao zastarjelo.

Radni primjer: obrazac za registraciju

Evo obrasca za registraciju koji bi AI mogao izraditi i što provjera pristupačnosti pronalazi:

Nijedna od ovih popravaka ne mijenja puno izgled obrasca. Svi mijenjaju hoće li neki ljudi uopće moći koristiti ga.

Ključni pojmovi

Uobičajene zablude

• „Pristupačnost je važna samo za slijepe korisnike.“ Obuhvaća vizualne, motoričke, slušne, govorne i kognitivne invaliditete, plus privremene situacije poput slomljene ruke.
• „Pristupačne stranice izgledaju jednolično.“ Pristupačnost ograničava nekoliko stvari — kontrast, stilove fokusa, veličinu teksta — ali dobro izgledajuće pristupačne stranice su pravilo, a ne iznimka.
• „Automatski provjerivač kaže 100, dakle smo gotovi.“ Automatski alati hvataju samo neke probleme. Je li alt tekst stvarno smislen ili ima li tijek smisla s čitačem zaslona, treba provjeriti čovjek.
• „Widget overlay će nas učiniti usklađenima.“ Alatne trake nalijepljene na vrh ne mogu popraviti nedostajuće oznake ili pokvareni pristup tipkovnicom u vašem kodu. Popravite izvor.
• „Nemamo korisnika s invaliditetom.“ Možda jednostavno ne znate. Mnogi invaliditeti nisu vidljivi, a ljudi koji naiđu na barijeru obično jednostavno odu.

Što tražiti od AI graditelja

• „Izgradi ovo prema WCAG 2.2 razini AA.“
• „Koristi semantički HTML: prave gumbe, linkove, naslove u ispravnom redoslijedu i oznake za svako polje obrasca.“
• „Pobrini se da svaki interaktivni element radi samo s tipkovnicom i ima vidljiv stil fokusa.“
• „Provjeri kontrast svih boja teksta i ikona — 4.5:1 za običan tekst, 3:1 za veliki tekst i ikone.“
• „Dodaj smislen alt tekst informativnim slikama, a prazan alt tekst dekorativnima.“
• „Prikazuj greške obrasca kao tekst povezan s poljem, a ne samo bojom.“
• „Poštuj korisničku postavku smanjenog pokreta za animacije.“
• „Pokreni automatsku provjeru pristupačnosti i navedi što ne može testirati, da to mogu provjeriti ručno.“

Zatim sami testirajte: odmaknite miš i pokušajte dovršiti glavni tijek samo s Tab, Shift+Tab, Enter i Space. Isprobajte ugrađeni čitač zaslona na telefonu na glavnoj stranici. Povećajte preglednik na 200% i vidite nešto li se pokvari.

Pristupačnost u Mythexu

Mythex ne uključuje posebnu provjeru pristupačnosti, pa pristupačnost tretirajte kao dio svojih upita i testiranja. Od prvog upita tražite WCAG 2.2 AA, provjerite rezultat u pregledu tipkovnicom i koristite /test da agent prođe kroz glavne tijekove prije objave — vidi Testiranje aplikacije. Recept za SEO također traži semantičke naslove i smislen alt tekst, što služi objema svrhama.

Za praktičan popis koraka pogledajte kako učiniti web stranicu pristupačnom. Za dizajn pročitajte kako dizajnirati dobro izgledajuću aplikaciju uz AI, a prije lansiranja kako testirati aplikaciju prije lansiranja. Službeni izvor je W3C-ov pregled WCAG-a.

Pitanja