Dostupnosť webu znamená, že ho môžu používať ľudia s poruchami zraku, sluchu, motoriky alebo pozornosti a všetci, ktorí sa ocitli v nepohodlných podmienkach: na jasnom slnku, s jednou voľnou rukou, so slabým internetom. Orientačným bodom je štandard WCAG s úrovňami A, AA, AAA; pre väčšinu webov je realistickým cieľom úroveň AA. Základné veci: kontrast, klávesnica, popisy, štruktúra, alt texty.
Stručne
- WCAG sa opiera o štyri princípy (vnímateľnosť, ovládateľnosť, zrozumiteľnosť, spoľahlivosť) a tri úrovne zhody: A, AA, AAA.
- Úroveň AA sa najčastejšie berie ako orientačný bod v normatívnych dokumentoch a požiadavkách zadávateľov.
- Základ: dostatočný kontrast, zväčšenie textu, alt texty, správne nadpisy, popisy polí, plná práca s klávesnicou.
- Automatické kontroly nájdu časť problémov; manuálna kontrola klávesnicou, mierkou a čítačkou obrazovky ich dopĺňa.
- Požiadavky zákona závisia od krajiny a oblasti, preto si aktuálne pravidlá overte u právnika.
- Dostupnosť sa zakladá do dizajnu a šablóny, lebo opravovať hotový web býva zvyčajne zložitejšie.
Pre koho je dostupnosť potrebná
Dostupnosť je užitočná pre širší okruh ľudí, než sa na prvý pohľad zdá.
- Zrak: nevidiaci a slabozrakí používatelia, ľudia s farbosleposťou.
- Sluch: nepočujúci a nedoslýchaví; video bez titulkov je pre nich uzavreté.
- Motorika: ovládanie klávesnicou, hlasom alebo prepínačom, tremor rúk.
- Pozornosť a vnímanie: dyslexia, poruchy pozornosti, únava.
- Situačné obmedzenia: poranená ruka, jasné slnko, hluk, slabý internet, malá obrazovka.
- Vyšší vek: drobné písmo a nízky kontrast spôsobujú ťažkosti.
Pre firmu to znamená širšie publikum, menej stratených objednávok a pohodlie pre všetkých návštevníkov. Časť požiadaviek sa zhoduje s praxou SEO: logické nadpisy, popisné alt texty, zrozumiteľné odkazy. To pomáha vyhľadávačom rozumieť stránke, hoci dostupnosť záruku pozícií nedáva.
Čo je WCAG: princípy a úrovne
WCAG (Web Content Accessibility Guidelines) – medzinárodné odporúčania konzorcia W3C. Široko sa používajú verzie 2.1 a 2.2; každá nová verzia dopĺňa predchádzajúcu. Požiadavky sú zoskupené podľa štyroch princípov.
| Princíp | Čo znamená | Príklady požiadaviek |
|---|
| Vnímateľnosť | Informáciu možno vnímať rôznymi spôsobmi | Alt texty, titulky, dostatočný kontrast |
| Ovládateľnosť | Rozhranie možno ovládať rôznymi spôsobmi | Práca z klávesnice, viditeľný fokus, dostatok času |
| Zrozumiteľnosť | Text a správanie webu sú predvídateľné | Popisy polí, zrozumiteľné chyby, jazyk stránky |
| Spoľahlivosť | Obsah funguje v rôznych prehliadačoch a asistenčných technológiách | Sémantické značkovanie, správne roly prvkov |
Každá požiadavka má úroveň: A – základné minimum, AA – hlavná praktická úroveň, AAA – najvyššia, zvyčajne sa uplatňuje na jednotlivé prvky. Pre typický web firmy alebo obchodu je rozumným cieľom úroveň AA.
Základný zoznam kontroly
Farba, kontrast a text
- Kontrast bežného textu s pozadím – aspoň 4,5 ku 1, veľkého textu – 3 ku 1 (úroveň AA); rámčeky polí a ikony tiež potrebujú 3 ku 1.
- Informácia sa neprenáša iba jednou farbou: chyba má okrem červenej aj text a symbol.
- Text sa zväčšuje na 200 % bez straty obsahu; na obrazovke širokej približne 320 pixelov nie je horizontálne posúvanie.
Klávesnica a fokus
- Menu, tlačidlá, formuláre, modálne okná a posuvníky sa ovládajú klávesmi Tab, Enter, medzerník, Esc.
- Aktuálny fokus je dobre vidieť; rámček zvýraznenia sa neodstraňuje bez kvalitnej náhrady.
- Odkaz na preskočenie na začiatku stránky vedie k hlavnému obsahu a celý zoznam menu nie je potrebné prechádzať.
- Poradie fokusu sa zhoduje s vizuálnym poradím.
Štruktúra stránky
- Jeden nadpis H1, ďalej H2 a H3 bez vynechaní v hierarchii.
- Sémantické prvky (header, nav, main, footer), zoznamy, tlačidlá pre akcie a odkazy pre prechody.
- Jazyk stránky je uvedený atribútom lang, na viacjazyčnom webe samostatne pre každú verziu.
- Názvy kariet (title) sú jedinečné, texty odkazov zrozumiteľné aj mimo kontextu.
Obrázky, video a pohyb
- Alt text stručne odovzdáva obsah alebo funkciu obrázka; dekoratívne obrázky majú prázdny alt.
- Video má titulky, audio – prepis; automatické spustenie so zvukom je vypnuté.
- Animáciu možno zastaviť, web zohľadňuje systémové nastavenie zníženia pohybu; prvky, ktoré blikajú častejšie ako trikrát za sekundu, sa nepoužívajú.
Formuláre
- Každé pole má priradený popis (label); placeholder sa používa pre príklad.
- Chyby sú opísané textom pri poli a napovedajú, ako ich opraviť.
- Atribút autocomplete napovedá prehliadaču typ údajov: meno, e-mail, telefón.
- Cieľové plochy kliknutia sú dostatočne veľké: WCAG 2.2 úrovne AA určuje minimum 24 na 24 CSS pixelov s určitými výnimkami, pre prst je pohodlnejšie viac.
Čitateľnosť textu
- Krátke odseky a vety, zoznamy namiesto súvislej plochy textu.
- Rozpísané skratky a vysvetlené odborné pojmy.
- Zarovnanie podľa ľavého okraja a voľný riadkovací rozstup.
- Odkazy sú zvýraznené podčiarknutím alebo iným znakom okrem farby.
Mobilné zariadenia
- Približovanie stránky prstami je povolené, web funguje v oboch orientáciách obrazovky.
- Medzi tlačidlami a odkazmi sú odstupy, aby sa neklikol susedný prvok.
- Gestá (potiahnutie, presúvanie) majú alternatívu v podobe tlačidiel.
- Vyskakovacie okná a bannery nezakrývajú hlavný obsah a zatvárajú sa zrozumiteľným tlačidlom.
Ako skontrolovať dostupnosť svojpomocne
- Prejdite kľúčové stránky iba klávesnicou: Tab, Shift+Tab, Enter, medzerník, Esc. Fokus musí byť viditeľný a nikde nesmie uviaznuť.
- Zväčšite mierku stránky na 200 % a otvorte web na úzkej obrazovke telefónu.
- Zmerajte kontrast textu a prvkov rozhrania nástrojom na kontrolu kontrastu z vývojárskych nástrojov prehliadača.
- Spustite automatické kontroly: Lighthouse, axe alebo WAVE. Nájdu napríklad chýbajúce alt texty a popisy polí, ale zmysluplnosť textov posúdi iba človek.
- Vypočujte si kľúčové stránky čítačkou obrazovky: NVDA alebo Narrator vo Windows, VoiceOver na Macu a iPhone, TalkBack na Androide.
- Prejdite formulár dopytu a dokončenie objednávky, pričom zámerne vyvolajte chyby.
- Zostavte zoznam problémov podľa dôležitosti: najprv to, čo blokuje akciu (tlačidlo nedostupné z klávesnice), potom otázky pohodlia.
Dostupnosť a zákon
V mnohých krajinách sú požiadavky na dostupnosť zakotvené v zákonoch a štandardoch pre verejný sektor a pre niektoré súkromné služby. V EÚ platí európsky akt o prístupnosti, ktorý zahŕňa rad produktov a služieb, medzi nimi aj časť služieb elektronického obchodu. Požiadavky, lehoty a výnimky závisia od krajiny, veľkosti firmy a oblasti a pravidlá sa menia.
Ak sa vaši zákazníci nachádzajú v EÚ, overte si u právnika, či sa tieto požiadavky týkajú vášho podnikania. Užitočné je mať na webe krátke vyhlásenie o dostupnosti a kontakt, na ktorom možno nahlásiť problém.
Ako zakomponovať dostupnosť do projektu
- Vyberte šablónu alebo dizajnový systém s overenými farbami, písmami a komponentmi.
- Vypočítajte kontrast palety ešte pred začiatkom kódovania.
- Pridajte požiadavky na dostupnosť do technického zadania a preberania prác.
- Zaškoľte redaktorov: alt texty, nadpisy, zrozumiteľné odkazy, titulky.
- Kontrolujte dostupnosť po veľkých aktualizáciách, nových formulároch a widgetoch.
- Widgety-nadstavby nad webom spravidla neodstraňujú príčiny problémov v kóde; spoľahlivejšie je opraviť značkovanie a dizajn.
Typické chyby
- Svetlosivý text na bielom. Nízky kontrast sťažuje čítanie aj ľuďom s dobrým zrakom.
- Odstránený rámček fokusu. Používateľ klávesnice stráca orientáciu na stránke.
- Menu a tlačidlá poskladané z ľubovoľných prvkov. Často sú nedostupné z klávesnice.
- Formálne alt texty. Popisy typu image1 alebo zoznam kľúčových slov nič nevysvetľujú.
- Formuláre bez popisov. Čítačka obrazovky neoznámi, čo zadať.
- Video s automatickým spustením a bez titulkov. Jedným prekáža a pre iných je uzavreté.
- Modálne okno bez zatvorenia klávesom Esc. Používateľ klávesnice uviazne.
- Spoliehanie sa na jeden automatický test. Zelené hodnotenie ešte nezaručuje pohodlie.
Otázky a odpovede
Je WCAG povinný pre malú firmu?
Závisí to od krajiny, oblasti a trhov, na ktorých pôsobíte. Pre mnohé malé weby slúži WCAG ako praktický štandard kvality; pravidlá sa menia, preto si aktuálne požiadavky overte u právnika.
Akú úroveň WCAG zvoliť?
Pre väčšinu webov – AA. Pokrýva hlavné potreby: kontrast, klávesnicu, popisy, štruktúru. Úroveň A je užitočná ako prvá etapa a úroveň AAA sa uplatňuje na jednotlivé prvky.
Stačí automatická kontrola?
Nie, automatické nástroje nájdu iba časť problémov. Posudzujú prítomnosť atribútov, ale zmysluplnosť alt textu, logiku poradia fokusu a zrozumiteľnosť hlásení kontroluje človek. Kombinujte nástroje s manuálnym prechodom.
Ovplyvňuje dostupnosť SEO?
Časť praktík sa zhoduje: štruktúra nadpisov, popisné alt texty, zrozumiteľné odkazy, rýchlosť. To pomáha ľuďom aj vyhľadávačom. Priamu záruku rastu pozícií dostupnosť nedáva.
Pomôže widget dostupnosti, ktorý sa pridáva jedným riadkom kódu?
Takéto nadstavby môžu pridať pomocné funkcie, napríklad zväčšenie písma, ale zvyčajne neopravia príčiny problémov v značkovaní a dizajne. Spoľahlivejšia cesta je opraviť samotný web.
Záver
Dostupnosť sa skladá z jednoduchých praktík: dostatočný kontrast, plná práca s klávesnicou, popisy polí, logická štruktúra a zrozumiteľné texty. Výhodné je zakomponovať ich na začiatku projektu a kontrolovať po každej aktualizácii. Malé vylepšenia dávajú citeľný efekt: väčší kontrast, viditeľný fokus a poctivé popisy polí zvyčajne nevyžadujú zmenu celého dizajnu. Zostavte malý zoznam opráv podľa priority a vykonávajte ho po etapách. Úroveň AA štandardu WCAG sa dobre hodí ako cieľ pre väčšinu webov firiem a obchodov. Ak potrebujete pomoc, LightSEO môže tieto požiadavky zohľadniť pri tvorbe firemného webu a skontrolovať technické základy webu v rámci SEO auditu.
Prečítajte si aj
