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

Web pristupačnost znači izgradnju web sajtova i aplikacija tako da ih osobe sa invaliditetom mogu koristiti — bilo da su slijepe i koriste čitač ekrana, ne mogu da koriste miš, imaju slab vid ili daltonizam, gluve su, ili imaju kognitivne ili teškoće u učenju. U praksi se sve svodi na stvari poput tekstualnih alternativa za slike, dovoljnog kontrasta boja, formulara sa ispravnim oznakama i na to da sve radi samo sa tastaturom. Međunarodni standard za to je WCAG, Web Content Accessibility Guidelines koje objavljuje W3C.

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

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

AI alati za izradu dobro prave aplikacije koje izgledaju ispravno. Pristupačnost se uglavnom tiče onoga što se ne vidi na snimku ekrana: da li je dugme zaista dugme, da li polje za unos ima oznaku koju čitač ekrana može da najavi, da li možete doći do menija tasterom Tab.

Zato je važno pitati:

• Lako se previdi. Prilagođeni padajući meni može izgledati savršeno, a biti nemoguće koristiti bez miša. Nećete to primijetiti ako ne testirate.
• Jeftinije je ispraviti rano. Traženje pristupačnih komponenti već u prvom upitu košta skoro ništa. Naknadno dodavanje u gotovu aplikaciju znači dirati svaki ekran.
• Koristi svima. Titlovi pomažu ljudima na bučnim mjestima, dobar kontrast pomaže ljudima na telefonima na jakom suncu, a jasne oznake pomažu svima da brže popunjavaju formulare.
• Preklapa se sa SEO-om. Ispravni naslovi, opisni linkovi i alt tekst pomažu i pretraživačima da razumiju vaše stranice — pogledajte SEO za sajtove izrađene uz AI.
• Može biti obavezna. Zavisno od toga gdje poslujete i kome služite, pristupačnost može biti zakonska obaveza.

Svakodnevna analogija

Zamislite ulaz u zgradu.

Stepenice odgovaraju mnogima. Rampa je pogodna za osobe u invalidskim kolicima — ali i za roditelje sa kolicima za bebe, dostavljače sa kolicima i putnike sa koferima. Automatska vrata, jasni znakovi, Brajevo pismo na dugmadima lifta i dobro osvjetljenje uklanjaju prepreku nekome.

Web pristupačnost je ista ideja za digitalne prostore: rampe, znakovi i ograde vaše aplikacije. I kao i kod zgrade, mnogo je lakše uključiti rampu u nacrte nego je dodati kada beton već stegne.

WCAG ukratko

WCAG objavljuje Inicijativa za web pristupačnost W3C-a. 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 preporučuje korištenje 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 po četiri principa, koje se često pamti kao POUR:

Svaka smjernica ima provjerljive kriterijume uspjeha na tri nivoa:

• Nivo A — minimum. Neuspjeh na ovima potpuno blokira neke ljude.
• Nivo AA — standardni cilj i nivo na koji upućuje većina zakona i politika.
• Nivo AAA — najviši nivo. Vrijedi težiti mu na nekim mjestima, ali W3C ne preporučuje da se zahtijeva za cijele sajtove, jer neki sadržaj ne može da ga ispuni.

WCAG 2.2 je u odnosu na 2.1 dodao devet kriterijuma uspjeha, uključujući Minimalnu veličinu cilja (Target Size) na nivou AA — mete za klik bi u principu trebalo da budu najmanje 24 x 24 CSS piksela, uz izuzetke — i Minimalnu pristupačnu autentifikaciju (Accessible Authentication), koja ograničava korake prijave koji se oslanjaju na pamćenje ili zagonetke, poput ponovnog upisivanja lozinke bez mogućnosti lijepljenja. Takođe je uklonio stari kriterijum „Parsing“ kao zastarjeo.

Praktičan primjer: formular za registraciju

Evo formulara za registraciju koji AI može napraviti i šta provjera pristupačnosti pronalazi:

Niti jedna od ovih popravki ne mijenja mnogo kako formular izgleda. Sve one mijenjaju da li neki ljudi uopšte mogu da ga koriste.

Ključni pojmovi

Česte zablude

• „Pristupačnost je važna samo za slijepe korisnike.“ Obuhvata vizuelne, motoričke, slušne, govorne i kognitivne invaliditete, plus privremene situacije poput slomljene ruke.
• „Pristupačni sajtovi izgledaju obično.“ Pristupačnost ograničava nekoliko stvari — kontrast, stilove fokusa, veličinu teksta — ali su dobro izgledajući pristupačni sajtovi pravilo, a ne izuzetak.
• „Automatska provjera 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, treba da provjeri čovjek.
• „Widget overlay će nas učiniti usklađenim.“ Trake sa alatima nadograđene preko sajta ne mogu popraviti nedostajuće oznake ili neispravan 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 vašeg AI alata

• „Izgradi ovo tako da ispunjava WCAG 2.2 nivo AA.“
• „Koristi semantički HTML: prava dugmad, linkove, naslove po redu i oznake za svako polje formulara.“
• „Pobrini se da svaki interaktivni element radi samo sa tastaturom 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 dekorativnim.“
• „Prikaži greške u formularu kao tekst, povezan sa poljem, a ne samo bojom.“
• „Poštuj korisnikovo podešavanje smanjenog kretanja za animacije.“
• „Pokreni automatsku provjeru pristupačnosti i navedi šta ne može da testira, kako bih to mogao provjeriti ručno.“

Zatim sami testirajte: odmaknite miš i pokušajte da završite glavni tok koristeći samo Tab, Shift+Tab, Enter i Space. Probajte ugrađeni čitač ekrana na telefonu na glavnoj stranici. Uvećajte pregledač na 200% i vidite da li se nešto pokvari.

Pristupačnost u Mythexu

Mythex ne uključuje posebnu provjeru pristupačnosti, pa pristupačnost tretirajte kao dio vaših upita i testiranja. Tražite WCAG 2.2 AA već u prvom upitu, provjerite rezultat u Preview-u tastaturom i koristite /test da agent prođe kroz vaše glavne tokove prije objavljivanja — pogledajte App Testing. SEO recept takođe 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 prije lansiranja kako testirati aplikaciju prije lansiranja. Najautoritativniji izvor je W3C-ov pregled WCAG-a.

Pitanja