Čo je webová prístupnosť? WCAG a inkluzívny dizajn jednoducho

Webová prístupnosť znamená budovať webové stránky a aplikácie tak, aby ich mohli používať ľudia so zdravotným postihnutím — či sú nevidiaci a používajú čítačku obrazovky, nemôžu používať myš, majú slabý zrak alebo farbosleposť, sú nepočujúci, alebo majú kognitívne či učebné poruchy. V praxi ide o veci ako textové alternatívy pre obrázky, dostatočný kontrast farieb, formuláre s riadnymi popiskami a to, aby všetko fungovalo len s klávesnicou. Medzinárodným štandardom je WCAG, Web Content Accessibility Guidelines od W3C.

Prístupnosť sa často skracuje na a11y — „a“, potom 11 písmen, potom „y“.

Prečo na prístupnosti záleží, keď staviate s AI

AI tvorcovia sú dobrí v tvorbe aplikácií, ktoré vyzerajú správne. Prístupnosť sa však týka hlavne toho, čo na snímke obrazovky nevidíte: či je tlačidlo naozaj tlačidlom, či má vstupné pole popisku, ktorú čítačka obrazovky dokáže oznámiť, či sa do ponuky dostanete klávesom Tab.

Preto sa oplatí pýtať:

• Ľahko sa prehliadne. Vlastne štylizovaný rozbaľovací zoznam môže vyzerať dokonale a byť bez myši nepoužiteľný. Kým ho netestujete, nevšimnete si to.
• Je lacnejšie to urobiť správne na začiatku. Požiadať o prístupné komponenty už v prvom prompte stojí takmer nič. Dodatočné úpravy hotovej aplikácie znamenajú zasiahnuť každú obrazovku.
• Pomáha to všetkým. Titulky pomáhajú ľuďom na hlučnom mieste, dobrý kontrast pomáha ľuďom na telefónoch na slnku a jasné popisky pomáhajú všetkým rýchlejšie vyplniť formuláre.
• Prekrýva sa to s SEO. Správne nadpisy, popisné odkazy a alternatívny text pomáhajú vyhľadávačom pochopiť vaše stránky — pozri SEO pre weby postavené s AI.
• Môže to byť povinné. Podľa toho, kde pôsobíte a komu slúžite, môže byť prístupnosť zákonnou povinnosťou.

Každodenná analógia

Predstavte si vchod do budovy.

Schody vyhovujú mnohým ľuďom. Rampa slúži na vozík pre ľudí na invalidnom vozíku — a tiež pre rodičov s kočíkmi, kuriérov s vozíkmi a cestujúcich s kuframi. Automatické dvere, jasné značky, Braillovo písmo na tlačidlách výťahu a dobré osvetlenie odstránia prekážku pre niekoho ďalšieho.

Webová prístupnosť je rovnaký princíp pre digitálne priestory: rampy, značky a zábradlia vašej aplikácie. A rovnako ako pri budove je oveľa jednoduchšie zahrnúť rampu do plánov, než ju dodatočne pridávať, keď betón stuhne.

WCAG v skratke

WCAG vydáva Iniciatíva W3C pre prístupnosť webu (WAI). Aktuálna verzia je WCAG 2.2, prvýkrát publikovaná v októbri 2023. Je spätne kompatibilná: obsah, ktorý spĺňa WCAG 2.2, spĺňa aj 2.1 a 2.0, a W3C odporúča používať najnovšiu verziu. WCAG 2.2 je schválený aj ako medzinárodný štandard ISO/IEC 40500:2025. Veľmi odlišný WCAG 3 je vo vývoji ako skorý návrh, nie hotový štandard.

WCAG je organizovaný do štyroch princípov, ktoré sa dajú zapamätať ako POUR:

Každá smernica má testovateľné kritériá úspešnosti na troch úrovniach:

• Úroveň A — minimum. Zlyhanie v nich úplne blokuje niektorých ľudí.
• Úroveň AA — štandardný cieľ a úroveň, na ktorú sa odvolávajú väčšina zákonov a politík.
• Úroveň AAA — najvyššia úroveň. Na niektorých miestach je užitočné ju mať ako cieľ, no W3C neodporúča vyžadovať ju pre celé weby, pretože niektorý obsah ju nemôže splniť.

WCAG 2.2 pridal k verzii 2.1 deväť kritérií úspešnosti, vrátane Veľkosti cieľa (minimálna) na úrovni AA — klikateľné cieľe by mali byť zvyčajne aspoň 24 × 24 CSS pixelov, s výnimkami — a Prístupnej autentifikácie (minimálna), ktorá obmedzuje kroky prihlásenia závislé od pamäte alebo hádaniek, napríklad nutnosť znova písať heslo bez možnosti vloženia zo schránky. Zároveň odstránil zastarané kritérium „Parsing“.

Praktický príklad: formulár na registráciu

Tu je registračný formulár, aký môže vytvoriť AI, a to, čo nájde kontrola prístupnosti:

Žiadna z týchto opráv výrazne nezmení vzhľad formulára. Všetky však menia to, či ho niektorí ľudia vôbec môžu používať.

Kľúčové pojmy

Bežné mylné predstavy

• „Prístupnosť je dôležitá len pre nevidiacich používateľov.“ Pokrýva zrakové, motorické, sluchové, rečové a kognitívne postihnutia, ako aj dočasné situácie, napríklad zlomenú ruku.
• „Prístupné weby vyzerajú jednoducho.“ Prístupnosť obmedzuje niekoľko vecí — kontrast, štýly zamerania, veľkosť textu — no pekne vyzerajúce prístupné weby sú bežné, nie výnimka.
• „Automatická kontrola hovorí 100, takže sme hotovo.“ Automatické nástroje odhalia len niektoré problémy. Či je alternatívny text naozaj zmysluplný alebo či tok dáva zmysel s čítačkou obrazovky, musí skontrolovať človek.
• „Overlay widget nás urobí v súlade.“ Panely nalepené navrch nemôžu opraviť chýbajúce popisky alebo nefunkčný prístup klávesnicou vo vašom kóde. Opravte zdroj.
• „Nemáme používateľov so zdravotným postihnutím.“ Možno to jednoducho neviete. Mnohé postihnutia nie sú viditeľné a ľudia, ktorí narazia na prekážku, zvyčajne len odídu.

Čo požadovať od vášho AI tvorcu

• „Vytvor to v súlade s WCAG 2.2 na úrovni AA.“
• „Používaj sémantické HTML: skutočné tlačidlá, odkazy, nadpisy v správnom poradí a popisky pre každé pole formulára.“
• „Uisti sa, že každý interaktívny prvok funguje len s klávesnicou a má viditeľný štýl zamerania.“
• „Over kontrast všetkých farieb textu a ikon — 4,5:1 pre bežný text, 3:1 pre veľký text a ikony.“
• „Pridaj zmysluplný alternatívny text k informatívnym obrázkom a prázdny alternatívny text k dekoratívnym.“
• „Zobrazuj chyby formulárov ako text prepojený s poľom, nie len farbou.“
• „Rešpektuj nastavenie používateľa pre zníženie pohybu pri animáciách.“
• „Spusti automatickú kontrolu prístupnosti a vypíš, čo nedokáže otestovať, aby som to mohol skontrolovať ručne.“

Potom to otestujte sami: odložte myš a skúste dokončiť hlavný postup len klávesmi Tab, Shift+Tab, Enter a medzerník. Vyskúšajte vstavanú čítačku obrazovky na telefóne na hlavnej stránke. Priblížte prehliadač na 200 % a pozrite, či sa niečo nerozbije.

Prístupnosť v Mythex

Mythex neobsahuje vyhradený nástroj na kontrolu prístupnosti, takže prístupnosť berte ako súčasť svojich promptov a testovania. Požiadajte o WCAG 2.2 AA už v prvom prompte, skontrolujte výsledok v náhľade pomocou klávesnice a použite /test, aby agent prešiel vaše hlavné postupy pred publikovaním — pozri App Testing. Recept pre SEO tiež žiada sémantické nadpisy a zmysluplný alternatívny text, čo slúži oboru cieľom.

Praktický kontrolný zoznam nájdete v ako spraviť váš web prístupným. Pre dizajn si prečítajte ako navrhnúť pekne vyzerajúcu aplikáciu s AI a pred spustením ako otestovať aplikáciu pred spustením. Autoritatívnym zdrojom je prehľad WCAG na stránke W3C.

Otázky