Prístupný web používa sémantický kód, funguje klávesnicou, má viditeľný fokus, dostatočný kontrast, zrozumiteľné formuláre a textové alternatívy a prejde manuálnym testom. Automatickú kontrolu dopĺňa skúška kritických úloh, zväčšenia a asistenčných technológií aj dostupný kanál na nahlásenie bariéry.
Prístupnosť webu znamená, že obsah a funkcie dokážu používať ľudia s rôznymi zrakovými, sluchovými, pohybovými alebo kognitívnymi potrebami. Pomáha aj človeku so zranenou rukou, na slnku, na malom displeji alebo pri pomalom pripojení. Nie je to doplnok na konci projektu, ale vlastnosť návrhu, kódu a obsahu.
Automatický skener dokáže nájsť časť problémov, no neoverí, či je poradie fokusu logické, alternatívny text užitočný alebo chybová správa zrozumiteľná. Preto sa kombinuje kontrola nástrojom, manuálne testovanie a podľa možností spätná väzba od ľudí používajúcich asistenčné technológie. Právne povinnosti sa líšia; konkrétny súlad treba odborne posúdiť.
Sémantická štruktúra a zrozumiteľný obsah
Používajte správne prvky pre nadpisy, odseky, zoznamy, tlačidlá, odkazy a oblasti stránky. Sémantika pomáha čítačke obrazovky aj vyhľadávaču pochopiť vzťahy. Nadpisy majú vytvoriť logickú osnovu bez preskakovania iba kvôli vzhľadu. Tlačidlo má vykonávať akciu a odkaz navigovať; vizuálne napodobnený prvok často nemá správne správanie.
Text píšte stručne, konkrétne a s vysvetlením nezvyčajných pojmov. Odkaz typu viac informácií je mimo kontextu nejasný; pomenovanie služby alebo cieľa je užitočnejšie. Dlhý obsah rozdeľte podnadpismi a zoznamami. Inštrukcie nesmú stáť iba na farbe, polohe alebo tvare, napríklad kliknite na zelené tlačidlo vpravo.
Klávesnica, fokus a interaktívne prvky
Prejdite celý web klávesom Tab a Shift+Tab. Fokus musí byť viditeľný, poradie logické a každý ovládací prvok dostupný bez myši. Používateľ sa nesmie zaseknúť v menu, modálnom okne alebo vloženom obsahu. Odkaz na preskočenie k hlavnému obsahu urýchľuje navigáciu na stránkach s opakovaným menu.
Vlastné rozbaľovacie prvky, záložky a dialógy potrebujú správne ovládanie klávesmi a oznámenie stavu. Prednosť majú natívne HTML prvky, ktoré už nesú veľa očakávaného správania. Po zatvorení dialógu vráťte fokus na prvok, ktorý ho otvoril. Automatické presúvanie fokusu používajte len s jasným dôvodom.
- všetky akcie dostupné bez myši
- kontrastný a nepretržite viditeľný fokus
- logické poradie podľa obsahu
- žiadna klávesnicová pasca v komponente
Formuláre, chyby a overenie vstupu
Každé pole potrebuje trvalý textový popis programovo spojený s ovládacím prvkom. Placeholder nie je náhradou, pretože po písaní zmizne. Povinnosť a očakávaný formát oznámte vopred. Skupiny možností pomenujte a tlačidlo odošle formulár s konkrétnym názvom, napríklad odoslať dopyt.
Po chybe zobrazte súhrn aj správu pri konkrétnom poli a presne vysvetlite opravu. Zachovajte správne zadané údaje. Čítačka obrazovky musí dostať informáciu o novom stave a fokus sa má presunúť primerane. Pri závažnej akcii umožnite kontrolu alebo opravu pred konečným potvrdením.
Vizuálny obsah, kontrast a médiá
Text a ovládacie prvky potrebujú dostatočný kontrast vo všetkých stavoch. Informáciu nekomunikujte iba farbou; chybné pole doplňte ikonou alebo textom. Web musí zostať použiteľný pri zväčšení a úzkom zobrazení bez horizontálneho posúvania bežného textu. Rešpektujte nastavenie obmedzenia pohybu a vyhnite sa blikaniu.
Alternatívny text opisuje účel obrázka v danom kontexte. Dekoratívny obrázok môže byť pre asistenčnú technológiu ignorovaný, graf potrebuje textové vysvetlenie dát. Video doplňte titulkami a podľa obsahu prepisom alebo zvukovým opisom. Automatické prehrávanie zvuku môže používateľovi výrazne prekážať a má byť pod kontrolou.
Testovanie a prístupnosť ako proces
Začnite automatickou kontrolou, potom testujte klávesnicou, pri rôznom zväčšení, s vysokým kontrastom a aspoň základne čítačkou obrazovky. Skontrolujte reprezentatívne šablóny a kritické procesy, nie iba domovskú stránku. Nález zapisujte s miestom, dopadom, spôsobom reprodukcie a odporúčanou opravou.
Pridajte kritériá prístupnosti do návrhu, komponentovej knižnice, akceptácie a obsahového školenia. Po oprave vykonajte regresný test. Vyhlásenie o prístupnosti má zodpovedať reálnemu stavu a uviesť kontaktný spôsob na nahlásenie bariéry. Formálne povinnosti a úroveň súladu overte podľa organizácie a platných pravidiel s kvalifikovaným odborníkom.
Prístupnosť pri obstarávaní a práci dodávateľov
Požiadavku na prístupnosť uveďte v zadaní spolu s rozsahom, spôsobom overenia a očakávanými výstupmi. Všeobecná veta web bude prístupný nehovorí, ktoré šablóny, dokumenty a externé komponenty sa testujú. Žiadajte ukážku klávesnicového ovládania, formulárov a komponentov, nie iba skóre skenera alebo deklaráciu výrobcu. Dohodnite opravu zistení a odovzdanie výsledkov testov. Pri nákupe chatu, rezervačného systému alebo vloženého widgetu overte aj jeho prístupnosť, pretože bariéra v kľúčovej externej službe poškodí celú používateľskú cestu.
Rozdeľte zodpovednosť medzi dizajn, vývoj, obsah a správu. Dizajnér určí kontrast a stavy, vývojár sémantiku a ovládanie, editor nadpisy a alternatívy a vlastník produktu akceptáciu. Školenie má používať vaše reálne komponenty a publikačný systém. Vytvorte dostupný kanál na nahlásenie problému a reagujte bez požiadavky, aby používateľ dokazoval zdravotný stav. Pri významnej bariére ponúknite praktickú alternatívu a naplánujte opravu. Zmluvné a právne požiadavky sa líšia, preto ich rozsah a formálne vyhlásenia nech posúdi kvalifikovaný odborník. Pri náprave určte prioritu podľa závažnosti a frekvencie, no kritickú nemožnosť dokončiť službu riešte bez čakania na veľký redizajn. Opravený komponent pridajte do spoločnej knižnice, aby sa rovnaká bariéra nevracala na ďalších stránkach.
- merateľné kritériá priamo v zadaní
- testovanie externých kritických komponentov
- rozdelená zodpovednosť naprieč rolami
- dostupný kanál na nahlásenie bariéry
Časté otázky
Stačí na prístupnosť automatický test?
Nie. Zachytí iba časť technických problémov. Logiku, použiteľnosť klávesnicou, kvalitu alternatív a zrozumiteľnosť treba overiť manuálne. Automatický nález navyše potrebuje interpretáciu v kontexte komponentu. Kombinujte skener, klávesnicový test, zväčšenie, čítačku obrazovky a test kritických úloh. Pri dôležitej službe je cenná aj spätná väzba ľudí, ktorí asistenčné technológie používajú pravidelne.
Zhorší prístupnosť vizuálny dizajn?
Nie. Dobré obmedzenia vedú k čitateľnejšiemu, konzistentnejšiemu a predvídateľnejšiemu dizajnu. Kreativita môže zostať bez vytvárania bariér.
Kedy riešiť prístupnosť?
Od výskumu a návrhu, počas vývoja aj pri tvorbe obsahu. Neskorý audit je užitočný, ale opravy bývajú náročnejšie než priebežné testovanie.
Zdroje a ďalšie čítanie
- Google Business Profile – improve local ranking
- Google Business Profile guidelines
- Google Search Central
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
