Tento článok ponúka praktický kontrolný zoznam smerníc WCAG, ktorý vám pomôže overiť, či vaša stránka spĺňa požiadavky na prístupnosť a poskytne jasné usmernenia na zlepšenie prístupnosti pre všetkých používateľov, vrátane osôb so zdravotným znevýhodnením.
Obsah článku:
Najdôležitejší a medzinárodne uznávaný štandard WCAG (Web Content Accessibility Guidelines) pre prístupný web vydáva W3C (World Wide Web Consortium). Aktuálna verzia je WCAG 2.2 (od r. 2023). Tento kontrolný zoznam vychádza z oficiálneho štandardu WCAG a zo slovenského prekladu.
Kontrolný zoznam WCAG som usporiadal podľa úrovní. Ak budete postupovať podľa pokynov v poradí, prejdete z úrovne A (začiatočník) cez úroveň AA (stredne pokročilý) až na úroveň AAA (pokročilý) a váš web bude prístupný pre všetkých používateľov.
WCAG kontrolný zoznam - Level A (Začiatočník)
Základná úroveň, ktorú musí web splniť, aby bol obsah webu prístupný a použiteľný pre ľudí so zdravotným znevýhodnením.
| Usmernenie | Názov | Zhrnutie |
|---|---|---|
| 1.1.1 | Netextový obsah | Poskytnite textové alternatívy k netextovému obsahu, ktoré slúžia rovnakému účelu. |
| 1.2.1 | Samostatný zvukový a samostatný video záznam (nahratý vopred) | Poskytnite alternatívu k obsahu, ktorý je len zvukový alebo len obrazový. |
| 1.2.2 | Titulky (pre médiá nahraté vopred) | Poskytnite titulky pre videá so zvukom. |
| 1.2.3 | Audio komentár alebo alternatívne médium (pre médiá nahraté vopred) | Poskytnite audiopopis alebo textový prepis pre videá so zvukom. |
| 1.3.1 | Informácie a vzájomné vzťahy | Obsah, štruktúra a vzťahy sú programovo určiteľné. |
| 1.3.2 | Zmysluplné poradie | Prezentujte obsah v zmysluplnom poradí. |
| 1.3.3 | Charakteristiky na základe zmyslového vnemu | Inštrukcie sa nesmú spoliehať výlučne na zmyslové charakteristiky (napr. farbu, tvar, veľkosť). |
| 1.4.1 | Používanie farieb | Nepoužívajte prezentáciu, ktorá sa spolieha výlučne na farbu. |
| 1.4.2 | Ovládanie zvuku | Neprehrávajte zvuk automaticky. |
| 2.1.1 | Klávesnica | Všetka funkcionalita je dostupná pomocou klávesnice bez časového obmedzenia. |
| 2.1.2 | Žiadna pasca na klávesy | Používateľ sa môže pomocou klávesnice presúvať k obsahu aj späť. |
| 2.1.4 | Jednoznakové klávesové skratky | Umožnite používateľom vypnúť alebo premapovať skratky na jediné stlačenie klávesy. |
| 2.2.1 | Nastaviteľné načasovanie | Poskytnite používateľské ovládanie na vypnutie, úpravu alebo predĺženie časových limitov. |
| 2.2.2 | Pauza, zastavenie, skrytie | Poskytnite ovládanie na pozastavenie, zastavenie a skrytie pohyblivého alebo automaticky aktualizovaného obsahu. |
| 2.3.1 | Tri bliknutia alebo blikanie pod prahovými hodnotami | Žiadny obsah nebliká viac ako trikrát za sekundu. |
| 2.4.1 | Preskočenie blokov | Poskytnite spôsob, ako preskočiť opakujúce sa bloky obsahu. |
| 2.4.2 | Každá stránka má názov | Používajte užitočné a jasné názvy stránok. |
| 2.4.3 | Poradie prechádzania prvkami | Komponenty dostávajú zameranie v logickom poradí. |
| 2.4.4 | Účel odkazu (v kontexte) | Účel každého odkazu je jasný z jeho textu alebo kontextu. |
| 2.4.7 | Viditeľné zameranie | Zameranie pomocou klávesnice je viditeľné. |
| 2.5.1 | Gestá ukazovateľa | Gestá s viacerými bodmi alebo dráhami možno vykonať jedným ukazovateľom. |
| 2.5.2 | Zrušenie ukazovateľom | Funkcie sa nevykonajú už pri stlačení tlačidla (kliknutí). |
| 2.5.3 | Označenie v názve | Ak má komponent textový štítok, jeho názov obsahuje aj zobrazený text. |
| 2.5.4 | Aktivácia pohybom | Funkcie aktivované pohybom sa dajú ovládať aj inak a odpovedanie na pohyb možno zakázať. |
| 3.1.1 | Jazyk stránky | Každá webstránka má určený predvolený jazyk. |
| 3.2.1 | Zameranie | Elementy sa po získaní zamerania nemenia. |
| 3.2.2 | Vstup používateľa | Elementy sa po zadávaní údajov nemenia. |
| 3.2.6 | Konzistentná pomoc | Možnosti pomoci sa zobrazujú v rovnakom poradí. |
| 3.3.1 | Identifikácia chýb | Pomôžte používateľom identifikovať a pochopiť chyby pri vstupe. |
| 3.3.2 | Menovky alebo pokyny | Poskytnite štítky alebo inštrukcie pre používateľské vstupy. |
| 3.3.7 | Zbytočné zadávanie údajov | Automaticky vyplňte alebo znova použite informácie, ktoré sú požadované viackrát v tom istom procese. |
| 4.1.1 | Syntaktická analýza | Žiadne vážne chyby v kóde. |
| 4.1.2 | Názov, rola, hodnota | Názov a úloha komponentov rozhrania sú technológiou pochopiteľné. |
WCAG kontrolný zoznam - Level AA (Stredne pokročilý)
Odporúčaná štandardná úroveň, ktorá odstraňuje väčšinu bariér na webe a robia web prístupným. Táto úroveň je povinná v EÚ pre verejné inštitúcie a väčšie súkromné firmy.
| Usmernenie | Názov | Zhrnutie |
|---|---|---|
| 1.2.4 | Titulky (pre priamy prenos) | Pridajte titulky k živým videám. |
| 1.2.5 | Audio komentár (pre médium nahraté vopred) | Poskytnite audiopopisy pre prednahrané videá. |
| 1.3.4 | Orientácia | Zabezpečte, aby webstránka sa prispôsobila vertikálnemu aj horizontálnemu zobrazeniu. |
| 1.3.5 | Identifikácia účelu vstupu | Účel vstupných polí musí byť programovo určiteľný. |
| 1.4.3 | Kontrast (minimálny) | Kontrastný pomer medzi textom a pozadím je aspoň 4,5:1. |
| 1.4.4 | Zmena veľkosti textu | Text možno zväčšiť až na 200 % bez straty obsahu alebo funkcie. |
| 1.4.5 | Text vo forme obrázkov | Nepoužívajte obrázky s textom. |
| 1.4.10 | Zmena usporiadania obsahu (reflow) | Obsah si zachováva význam a funkciu bez potreby posúvania v dvoch smeroch. |
| 1.4.11 | Kontrast netextových prvkov | Kontrast medzi komponentmi rozhrania, grafikou a susednými farbami je aspoň 3:1. |
| 1.4.12 | Rozloženie textu | Obsah a funkcia si zachovávajú význam aj pri zmene medzier v texte používateľom. |
| 1.4.13 | Obsah pri umiestnení kurzora alebo zameraní klávesnicou | Obsah, ktorý sa zobrazí po nabehnutí myšou alebo zameraní, musí byť možné zatvoriť, ovládať a má zostať dostupný. |
| 2.4.5 | Viacero spôsobov | Ponúknite aspoň dva spôsoby, ako nájsť stránky na vašom webe. |
| 2.4.6 | Nadpisy a menovky | Nadpisy a štítky popisujú tému alebo účel. |
| 2.4.11 | Zameranie nie je zakryté (minimálne) | Indikátory zamerania sú jasne rozpoznateľné, keď sú aktívne. |
| 2.5.7 | Presuny ťahaním | Funkcie založené na ťahaní je možné ovládať aj jedným ukazovateľom bez nutnosti ťahania. |
| 2.5.8 | Cieľová veľkosť (minimálna) | Cieľová veľkosť pre vstupy ukazovateľom je aspoň 24x24 CSS pixelov. |
| 3.1.2 | Jazyk jednotlivých častí | Každá časť webstránky má priradený predvolený jazyk. |
| 3.2.3 | Konzistentná navigácia | Menu a štandardné ovládacie prvky sú konzistentne umiestnené. |
| 3.2.4 | Konzistentné označenie | Komponenty s rovnakou funkciou identifikujte konzistentne. |
| 3.3.3 | Návrh na opravu chyby | Navrhujte opravy, keď používatelia urobia chybu. |
| 3.3.4 | Predchádzanie chybám (právne, finančné, dátové) | Skontrolujte, potvrďte a umožnite zrušiť akcie stránok s dôležitými záväzkami. |
| 3.3.8 | Prístupné overovanie (minimálne) | Neautentifikujte používateľov pomocou pamäťových, prepisovacích alebo kognitívnych testov bez alternatívy. |
| 4.1.3 | Stavové správy | Upozornite používateľov na zmeny obsahu, ktoré nie sú zamerané. |
WCAG kontrolný zoznam - Level AAA (Pokročilý)
Najvyššia, ale nie vždy dosiahnuteľná úroveň prístupnosti.
| Usmernenie | Názov | Zhrnutie |
|---|---|---|
| 1.2.6 | Posunkový jazyk (nahratý vopred) | Poskytnite preklad do posunkového jazyka pre prednahrané videá. |
| 1.2.7 | Rozšírený audio komentár (pre médium nahraté vopred) | Poskytnite rozšírené audiopopisy pre prednahrané videá. |
| 1.2.8 | Alternatíva pre dynamické mediálne prvky (pre médiá nahraté vopred) | Poskytnite textové alternatívy pre prednahrané videá. |
| 1.2.9 | Samostatné audio (priamy prenos) | Poskytnite alternatívy k živému zvuku. |
| 1.3.6 | Identifikácia účelu | Účel všetkých komponentov musí byť programovo určiteľný. |
| 1.4.6 | Kontrast (zvýšený) | Kontrastný pomer medzi textom a pozadím je aspoň 7:1. |
| 1.4.7 | Tlmený alebo žiadny zvuk na pozadí | Zvukový obsah bez obrazu je zrozumiteľný, bez alebo s minimálnym šumom na pozadí. |
| 1.4.8 | Vizuálne zobrazenie | Ponúknite používateľom rôzne možnosti zobrazenia textových blokov. |
| 1.4.9 | Text vo forme obrázkov (bez výnimiek) | Nepoužívajte obrázky obsahujúce text. |
| 2.1.3 | Klávesnica (bez výnimky) | Všetka funkcionalita je dostupná pomocou klávesnice bez výnimiek. |
| 2.2.3 | Žiadne časovanie | Na vašej stránke nie sú časové obmedzenia. |
| 2.2.4 | Prerušenia | Používatelia môžu odložiť alebo potlačiť neurgentné prerušovania. |
| 2.2.5 | Opätovná autentifikácia | Pri opätovnej autentifikácii sa údaje používateľa zachovajú. |
| 2.2.6 | Časové limity | Upozornite používateľov na vypršanie časového limitu, ktoré môže spôsobiť stratu údajov. |
| 2.3.2 | Tri záblesky | Obsah nebliká viac ako trikrát za sekundu. |
| 2.3.3 | Animácia vyvolaná interakciou | Používatelia môžu vypnúť pohybové animácie. |
| 2.4.8 | Aktuálna poloha | Informujte používateľov, kde sa na vašej stránke nachádzajú. |
| 2.4.9 | Účel odkazu (iba odkaz) | Účel každého odkazu je jasný z jeho textu. |
| 2.4.10 | Nadpisy sekcií | Organizujte obsah pomocou nadpisov. |
| 2.4.12 | Zameranie nie je zakryté (Rozšírené) | Indikátory zamerania sú pri aktivácii jasnejšie rozpoznateľné. |
| 2.4.13 | Vzhľad zamerania | Indikátor zamerania sú dostatočne viditeľné. |
| 2.5.5 | Veľkosť cieľa | Cieľová veľkosť pre vstupy ukazovateľom je aspoň 44x44 CSS pixelov. |
| 2.5.6 | Súbežné mechanizmy pre zadávanie vstupu | Nie sú obmedzené spôsoby zadávania vstupu. |
| 3.1.3 | Neobvyklé slová | Definujte nezvyčajné slová alebo frázy. |
| 3.1.4 | Skratky | Definujte všetky skratky. |
| 3.1.5 | Úroveň čítania | Používatelia so vzdelaním na úrovni 9 rokov dokážu čítať váš obsah. |
| 3.1.6 | Výslovnosť | Definujte slová, ktorých význam je nejednoznačný bez výslovnosti. |
| 3.2.5 | Zmena na požiadanie | Prvky sa nemenia bez požiadavky používateľa. |
| 3.3.5 | Nápoveda | Poskytnite používateľom pomoc. |
| 3.3.6 | Predchádzanie chybám (celkové) | Skontrolujte, potvrďte a umožnite zrušiť akcie stránok, ktoré vyžadujú odoslanie údajov. |
| 3.3.9 | Prístupná autentifikácia (Rozšírená) | Nepoužívajte autentifikáciu, ktorá vyžaduje pamäť, prepisovanie alebo kognitívne testy. |
Súvisiace články
Zdielať článok
