Kaj je dostopnost spleta? WCAG in vključujoče oblikovanje razloženo

Dostopnost spleta pomeni, da spletna mesta in aplikacije gradimo tako, da jih lahko uporabljajo ljudje z oviranostmi – ne glede na to, ali so slepi in uporabljajo bralnik zaslona, ne morejo uporabljati miške, imajo slab vid ali barvno slepoto, so gluhi ali imajo kognitivne ali učne ovire. V praksi to pomeni stvari, kot so besedilne alternative za slike, dovolj barvnega kontrasta, obrazci z ustreznimi oznakami in delovanje vsega samo s tipkovnico. Mednarodni standard za to je WCAG, Smernice za dostopnost spletnih vsebin, ki jih objavlja W3C.

Dostopnost se pogosto skrajšuje v a11y – »a«, nato 11 črk, nato »y«.

Zakaj je dostopnost pomembna, ko gradite z AI

AI graditelji so dobri pri ustvarjanju aplikacij, ki izgledajo prav. Dostopnost je večinoma stvar tega, kar na posnetku zaslona ni vidno: ali je gumb res gumb, ali ima vnosno polje oznako, ki jo bralnik zaslona lahko prebere, ali lahko do menija pridete s tipko Tab.

Zato je pomembno vprašati:

• Zlahka se spregleda. Spustni meni s slogom po meri je lahko videti popoln, vendar ga brez miške ni mogoče uporabiti. Tega ne boste opazili, če ne preizkusite.
• Ceneje je narediti prav na začetku. Če že pri prvem pozivu zahtevate dostopne komponente, to skoraj nič ne stane. Naknadno popravljanje končane aplikacije pomeni spreminjanje vsakega zaslona.
• Koristi vsem. Podnapisi pomagajo ljudem v hrupnih prostorih, dober kontrast pomaga ljudem na telefonih na soncu, jasne oznake pa pomagajo vsem hitreje izpolniti obrazce.
• Prekriva se s SEO. Pravilni naslovi, opisne povezave in alternativno besedilo pomagajo tudi iskalnikom razumeti vaše strani – glejte SEO za spletna mesta, zgrajena z AI.
• Morda je zahtevana. Glede na to, kje delujete in komu služite, je dostopnost lahko zakonska obveznost.

Vsakdanja primerjava

Pomislite na vhod v stavbo.

Stopnice večini ljudi ustrezajo. Rampa je primerna za uporabnike invalidskih vozičkov – in tudi za starše z vozički, dostavljavce s tovornimi vozički in popotnike s kovčki. Avtomatska vrata, jasni znaki, brajica na gumbih dvigala in dobra razsvetljava vsak odstranijo oviro za nekoga.

Spletna dostopnost je enaka ideja za digitalne prostore: rampe, znaki in ročaji vaše aplikacije. In kot pri stavbi je veliko lažje vključiti rampo v načrte, kot jo dodati, ko je beton že strjen.

WCAG na kratko

WCAG objavlja iniciativa W3C za dostopnost spleta (WAI). Trenutna različica je WCAG 2.2, prvič objavljena oktobra 2023. Je povratno združljiva: vsebina, ki izpolnjuje WCAG 2.2, izpolnjuje tudi 2.1 in 2.0, W3C pa priporoča uporabo najnovejše različice. WCAG 2.2 je tudi odobren kot mednarodni standard ISO/IEC 40500:2025. Zelo drugačen WCAG 3 je v razvoju kot zgodnji osnutek, ne kot dokončan standard.

WCAG je organiziran v štiri načela, pogosto zapomnjena kot POUR:

Vsaka smernica ima preverljiva merila uspešnosti na treh ravneh:

• Raven A – minimum. Neizpolnjevanje blokira nekatere ljudi popolnoma.
• Raven AA – standardni cilj, na katerega se sklicujeta večina zakonov in politik.
• Raven AAA – najvišja raven. Na nekaterih mestih je koristno cilje, vendar W3C ne priporoča, da bi jo zahtevali za celotna spletna mesta, saj nekatere vsebine ne morejo ustrezati.

WCAG 2.2 je dodal devet meril uspešnosti k 2.1, med njimi Najmanjša velikost cilja (Target Size) na ravni AA – kliknljivi cilji naj bodo na splošno vsaj 24 x 24 CSS pikslov, z izjemami – in Dostopna avtentikacija (Accessible Authentication), ki omejuje korake prijave, ki se zanašajo na spomin ali uganke, na primer zahtevo, da ponovno vtipkate geslo, brez možnosti, da ga prilepite. Odstranil je tudi staro merilo »Parsing«, ki je zastarelo.

Delovni primer: obrazec za registracijo

Tukaj je obrazec za registracijo, kakršnega bi lahko ustvaril AI, in kaj najde preverjanje dostopnosti:

Nobeden od teh popravkov ne spremeni videza obrazca bistveno. Vsi pa spremenijo, ali ga lahko nekateri ljudje sploh uporabijo.

Ključni pojmi

Pogoste zmote

• »Dostopnost je pomembna samo za slepe uporabnike.« Zajema vidne, motorične, slušne, govorne in kognitivne ovire ter tudi začasne situacije, kot je zlomljena roka.
• »Dostopna spletna mesta so videti dolgočasna.« Dostopnost omejuje nekaj stvari – kontrast, sloge fokusa, velikost besedila –, vendar so dobro videti in dostopna spletna mesta pravilo, ne izjema.
• »Avtomatizirano preverjanje pokaže 100, zato smo končali.« Orodja samodejno ujamejo le nekatere težave. Ali je alternativno besedilo smiselno ali ali tok deluje z bralnikom zaslona, mora preveriti človek.
• »Pripomoček prekrivnega vmesnika nas bo naredil skladne.« Orodne vrstice, nameščene čez stran, ne morejo popraviti manjkajočih oznak ali pokvarjenega dostopa s tipkovnico v vaši kodi. Popravite izvor.
• »Nimamo uporabnikov z oviranostmi.« Morda jih preprosto ne poznate. Veliko oviranosti ni vidnih, ljudje, ki naletijo na oviro, pa ponavadi preprosto odidejo.

Kaj zahtevati od AI graditelja

• „Zgradi to tako, da izpolnjuje WCAG 2.2 raven AA.“
• „Uporabi semantični HTML: prave gumbe, povezave, naslove v pravilnem vrstnem redu in oznake za vsako polje obrazca.“
• „Poskrbi, da vsak interaktivni element deluje samo s tipkovnico in ima vidni slog fokusa.“
• „Preveri kontrast vseh barv besedila in ikon – 4,5 : 1 za navadno besedilo, 3 : 1 za veliko besedilo in ikone.“
• „Dodaj smiselno alternativno besedilo informativnim slikam in prazno alternativno besedilo dekorativnim.“
• „Prikaži napake v obrazcih kot besedilo, povezano s poljem, ne samo z barvo.“
• „Upoštevaj uporabnikovo nastavitev zmanjšanega gibanja za animacije.“
• „Zaženi avtomatsko preverjanje dostopnosti in navedi, kaj ne more preizkusiti, da to lahko preverim ročno.“

Nato preizkusite sami: odmaknite miško in poskusite dokončati glavni tok samo s tipkami Tab, Shift+Tab, Enter in Presledek. Preizkusite vgrajeni bralnik zaslona na telefonu na glavni strani. Povečajte brskalnik na 200 % in preverite, ali se kaj pokvari.

Dostopnost v Mythexu

Mythex nima namenskega preverjalnika dostopnosti, zato dostopnost obravnavajte kot del svojih pozivov in testiranja. Od prvega poziva zahtevajte WCAG 2.2 AA, rezultat preverite v Predogledu s tipkovnico in uporabite /test, da agent klikne skozi vaše glavne tokove, preden objavite – glejte Testiranje aplikacije. Tudi recept za SEO zahteva semantične naslove in smiselno alternativno besedilo, kar služi obema ciljema.

Za praktični kontrolni seznam glejte kako narediti spletno mesto dostopno. Za oblikovanje preberite kako s pomočjo AI oblikovati lepo aplikacijo, pred objavo pa kako preizkusiti aplikacijo pred objavo. Najbolj zanesljiv vir je W3C-jev pregled WCAG.

Vprašanja