Šta je veb pristupačnost? WCAG i inkluzivni dizajn objašnjeni

Veb pristupačnost znači pravljenje sajtova i aplikacija tako da ljudi sa invaliditetom mogu da ih koriste — bilo da su slepi i koriste čitač ekrana, ne mogu da koriste miš, imaju slab vid ili daltonizam, gluvi su, ili imaju kognitivne ili poteškoće u učenju. U praksi se svodi na stvari poput tekstualnih alternativa za slike, dovoljnog kontrasta boja, formi sa ispravnim oznakama i na to da sve radi samo sa tastaturom. Međunarodni standard za to je WCAG, Web Content Accessibility Guidelines od W3C.

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

Zašto je pristupačnost važna kada pravite uz AI

AI alati su dobri u pravljenju aplikacija koje izgledaju ispravno. Pristupačnost se uglavnom tiče onoga što ne vidite na snimku ekrana: da li je dugme zaista dugme, da li polje ima oznaku koju čitač ekrana može da izgovori, da li možete da dođete do menija tasterom Tab.

Zato je važno pitati:

• Lako se propusti. Padajući meni sa prilagođenim stilom može savršeno da izgleda, a da bude nemoguće koristiti ga bez miša. Nećete primetiti dok ne testirate.
• Jeftinije je ispravno uraditi na početku. Traženje pristupačnih komponenti već u prvom upitu košta skoro ništa. Naknadno dodavanje u gotovu aplikaciju znači dirati svaki ekran.
• Pomaže svima. Titlovi pomažu ljudima na bučnim mestima, dobar kontrast pomaže ljudima na telefonima na suncu, a jasne oznake pomažu svima da brže popune formu.
• Preklapa se sa SEO-om. Ispravni naslovi, opisni linkovi i alt tekst pomažu pretraživačima da razumeju i vaše stranice — pogledajte SEO za sajtove napravljene uz AI.
• Može biti obavezna. U zavisnosti od toga gde poslujete i kome služite, pristupačnost može biti zakonska obaveza.

Svakodnevna analogija

Zamislite ulaz u zgradu.

Stepenice odlično rade za mnoge ljude. Rampa radi za korisnike invalidskih kolica — ali i za roditelje sa kolicima za bebe, dostavljače sa kolicima i putnike sa koferima. Automatska vrata, jasni znakovi, Brajevo pismo na tasterima lifta i dobro osvetljenje uklanjaju prepreku za nekoga.

Veb pristupačnost je ista ideja za digitalne prostore: rampe, znakovi i rukohvati vaše aplikacije. I kao i kod zgrade, mnogo je lakše uključiti rampu u plan nego je dodati posle nego što beton očvrsne.

WCAG ukratko

WCAG objavljuje W3C-ova Web Accessibility Initiative. Trenutna verzija je WCAG 2.2, prvi put objavljena u oktobru 2023. Unazad je kompatibilna: sadržaj koji ispunjava WCAG 2.2 ispunjava i 2.1 i 2.0, a W3C podstiče korišćenje najnovije verzije. WCAG 2.2 je takođe odobren kao međunarodni standard, ISO/IEC 40500:2025. Vrlo drugačiji WCAG 3 je u razvoju kao rani nacrt, a ne kao završen standard.

WCAG je organizovan u četiri principa, koji se često pamte kao POUR:

Svaki smernica ima proverljive kriterijume uspeha na tri nivoa:

• Nivo A — minimum. Neuspeh u ovima potpuno blokira neke ljude.
• Nivo AA — standardni cilj i nivo na koji se pozivaju većina zakona i politika.
• Nivo AAA — najviši nivo. Korisno je težiti mu na pojedinim mestima, ali W3C ne preporučuje da se zahteva za ceo sajt, jer neki sadržaj ne može da ga zadovolji.

WCAG 2.2 je dodao devet kriterijuma uspeha u odnosu na 2.1, uključujući Target Size (Minimum) na nivou AA — mete za klik treba da budu najmanje 24 × 24 CSS piksela, uz izuzetke — i Accessible Authentication (Minimum), koji ograničava korake prijave koji se oslanjaju na pamćenje ili zagonetke, poput ponovnog kucanja lozinke bez dozvole da se nalepi. Takođe je uklonio stari kriterijum „Parsing“ kao zastareo.

Radni primer: forma za prijavu

Evo forme za registraciju koju bi AI mogao da napravi, i šta provera pristupačnosti pronalazi:

Nijedna od ovih ispravki bitno ne menja izgled forme. Sve menjaju to da li neki ljudi uopšte mogu da je koriste.

Ključni pojmovi

Uobičajena pogrešna shvatanja

• „Pristupačnost je važna samo za slepe korisnike.“ Obuhvata vizuelne, motoričke, slušne, govorne i kognitivne invaliditete, kao i privremene situacije poput slomljene ruke.
• „Pristupačni sajtovi izgledaju dosadno.“ Pristupačnost ograničava nekoliko stvari — kontrast, stilove fokusa, veličinu teksta — ali dobro izgledajući pristupačni sajtovi su pravilo, a ne izuzetak.
• „Automatska provera kaže 100, znači gotovi smo.“ Automatski alati hvataju samo neke probleme. Da li je alt tekst zaista smislen ili da li tok ima smisla uz čitač ekrana, mora da proveri čovek.
• „Vidžet overlay će nas učiniti usklađenim.“ Alatke dodate preko sajta ne mogu da poprave nedostajuće oznake ili pokvaren pristup tastaturom u vašem kodu. Popravite izvor.
• „Nemamo korisnike sa invaliditetom.“ Možda jednostavno ne znate. Mnogi invaliditeti nisu vidljivi, a ljudi koji naiđu na prepreku obično jednostavno odu.

Šta tražiti od AI alata

• „Napravi ovo tako da ispunjava WCAG 2.2 nivo AA.“
• „Koristi semantički HTML: prava dugmad, linkove, naslove po redu i oznake za svako polje forme.“
• „Proveri da svaki interaktivni element radi samo tastaturom i ima vidljiv stil fokusa.“
• „Proveri kontrast svih boja teksta i ikonica — 4,5:1 za običan tekst, 3:1 za veliki tekst i ikonice.“
• „Dodaj smislen alt tekst informativnim slikama, a prazan alt tekst dekorativnim.“
• „Prikaži greške u formi kao tekst, povezan sa poljem, a ne samo bojom.“
• „Poštuj korisnikovo podešavanje smanjenog kretanja za animacije.“
• „Pokreni automatsku proveru pristupačnosti i navedi šta ne može da testira, da to proverim ručno.“

Zatim sami proverite: sklonite miš i pokušajte da završite glavni tok samo tasterima Tab, Shift+Tab, Enter i Space. Pustite ugrađeni čitač ekrana na telefonu na glavnoj stranici. Uvećajte browser na 200% i vidite da li nešto puca.

Pristupačnost u Mythex-u

Mythex ne uključuje posebnu proveru pristupačnosti, pa pristupačnost tretirajte kao deo vaših upita i testiranja. Zatražite WCAG 2.2 AA već u prvom upitu, proverite rezultat u Preview-u tastaturom, i koristite /test da agent prođe kroz glavne tokove pre objavljivanja — pogledajte App Testing. I SEO recept traži semantičke naslove i smislen alt tekst, što služi oba cilja.

Za praktičnu listu, pogledajte kako učiniti vaš sajt pristupačnim. Za dizajn, pročitajte kako dizajnirati dobro izgledajuću aplikaciju uz AI, a pre lansiranja kako testirati aplikaciju pre lansiranja. Najmerodavniji izvor je W3C-ov pregled WCAG-a.

Pitanja