Prístupnosť webu znamená, že sa web dá rozumne používať aj klávesnicou, čítačkou obrazovky alebo inou asistívnou technológiou. Veľa problémov pritom nevzniká v grafike, ale až v kóde — pri tlačidlách bez popisu, ikonách bez významu, zle označených formulároch, dropdownoch, modaloch alebo navigácii.
Kontrastný pomer je dôležitý základ a často vychádza už z grafického návrhu. Vývojár by mal ale hlavne pohladiť, aby web dával technický zmysel, mal správnu štruktúru, popisky, ovládanie klávesnicou a čitateľnú väzbu medzi prvkami.
Popisky, stavy a väzby pre prvky, ktoré nie sú jasné len zo samotného HTML alebo viditeľného textu.
Labely, popisy polí, chybové hlášky, required stavy a jasná väzba medzi inputom a textom.
Dropdowny, mobilné menu, modálne okná, aria-expanded, aria-controls a ovládanie klávesnicou.
Web musí byť použiteľný aj bez myši. Focus stavy majú byť viditeľné a poradie prvkov má dávať zmysel.
Dôležité
Od 28. júna 2025 začali v Európskej únii platiť nové pravidlá prístupnosti podľa European Accessibility Act. Prístupnosť webu už tak nie je len téma pre štátne weby, ale rieši sa aj pri časti súkromného sektora, hlavne pri e-shopoch, online službách a digitálnych systémoch pre verejnosť.
Technickým základom býva hlavne správna štruktúra webu, ovládanie klávesnicou, prístupné formuláre, čitateľné popisky, ARIA atribúty a použiteľnosť pre asistívne technológie. Neznamená to ale, že úplne každý malý web automaticky spadá pod rovnakú povinnosť.
V praxi má ale množstvo webov stále problémy se základnou prístupnosťou. Časté sú tlačidlá bez popisu, formuláre bez správnych labelov, modálne okná bez ovládania klávesnicou alebo navigácia, ktorá nedáva zmysel pre čítačky obrazovky. Dobrým príkladom z praxe je práve ten môj, kde to tiež nemám ešte všade poriadne vyladené :-)
ARIA atribúty dopĺňajú prvkom význam pre asistívne technológie. Používajú sa hlavne pri interaktívnych častiach webu, ako sú ikonové tlačidlá, rozbaľovacie menu, modálne okná, accordiony alebo formuláre. Nie sú náhradou za správne HTML, ale pomáhajú tam, kde prvok potrebuje presnejší popis, stav alebo väzbu na iný obsah.
Dáva prvku textový popisok, keď nemá viditeľný text. Typicky ikonové tlačidlo pre menu, zatvorenie okna alebo vyhľadávanie. Alternatívou je text s triedou sr-only.
Hovorí, že popisok prvku je prevzatý z iného prvku na stránke, najčastejšie podľa jeho ID.
Pridáva doplňujúci popis. Hodí sa pri formulároch, nápovedách, chybových hláškach alebo vysvetleniach polí.
Hovorí, či je prvok rozbalený alebo zbalený. Používa sa pri menu, dropdownoch, accordionoch alebo mobilnej navigácii.
Vytvára väzbu medzi ovládacím prvkom a obsahom, ktorý ovláda. Napríklad tlačidlo menu a samotné mobilné menu.
Informuje, že prvok otvára ďalšiu vrstvu, napríklad menu, dialóg alebo listbox.
Skryje dekoratívny alebo duplicitný obsah pred asistívnymi technológiami. Používa sa hlavne pri ikonách bez významu.
Dopĺňa význam prvku, keď nestačí bežné HTML. Nemá sa používať zbytočne, ak sa dá použiť správny HTML prvok.
Viditeľné zvýraznenie aktívneho prvku pri ovládaní klávesnicou. Bez toho užívateľ nevie, kde na stránke práve je.
Ilustračný obrázok vytvorený pomocou AI.
Bežný text alebo obrázok býva jednoduchší. Väčší problém sú tlačidlá bez textu, menu bez stavu rozbalenia, modálne okná bez správnej väzby, formuláre bez labelov alebo prvky, ktoré sa nedajú ovládať klávesnicou.
Preto prístupnosť riešim hlavne prakticky. Nejde len o to pridať pár aria atribútov, ale skontrolovať, či prvok dáva zmysel ako celok — vizuálne, v HTML, pri ovládaní klávesnicou aj pre čítačku obrazovky.
TIP
Vedeli ste, že keď sa vo formulári zobrazí chybová hláška v reálnom čase, čítačka obrazovky ju nevidiacemu užívateľovi nemusí automaticky oznámiť? Vizuálne je chyba na stránke vidieť, ale ak dynamická hláška nie je vo správne označenej live oblasti, napríklad pomocou role="alert" alebo aria-live, užívateľ používajúci čítačku sa o nej nemusí dozvedieť. Pole by zároveň malo byť s chybovou hláškou prepojené napríklad cez aria-describedby.
Grafik rieši vizuálnu podobu, čitateľnosť, veľkosti a kontrast. Vývojár musí pohladať, aby návrh v kóde nestratil význam, ovládateľnosť a správnu štruktúru.
Používať správne prvky. Tlačidlo má byť button, odkaz má byť odkaz a nadpisy majú mať logickú štruktúru.
Web má ísť prejsť tabulátorom, interaktívne prvky majú byť dosiahnuteľné a focus nemá miznúť.
Ikony, tlačidlá, inputy a ovládacie prvky musia mať jasný textový význam.
Každé pole má mať label, nápovedu, prípadnú chybu a zrozumiteľnú väzbu medzi textom a inputom.
Dialóg má mať popisok, možnosť zatvorenia, správny focus a nemá nechať užívateľa strateného za prekrytím.
Menu, dropdowny a mobilná navigácia majú jasne hovoriť, čo otvárajú a či sú práve rozbalené.
ARIA sa nemá lepiť všade. Najskôr má byť správne HTML. Až potom sa dopĺňa tam, kde je potrebné popísať stav, vzťah medzi prvkami alebo význam, ktorý z bežného markupovania nie je jasný.
Keď tlačidlo obsahuje iba SVG ikonu, užívateľ čítačky nemusí vedieť, čo robí. aria-label môže dodať popis typu „Otvoriť menu“, „Zatvoriť okno“ alebo „Vyhľadať“.
Tlačidlo môže mať aria-expanded podľa toho, či je menu otvorené, aria-controls s ID ovládaného menu a aria-haspopup, ak otvára ďalšiu vrstvu navigácie.
Input má mať label. Ak má navyše nápovedu alebo chybu, dá sa použiť aria-describedby, aby bolo jasné, ktorý text pole dopĺňa.
Modal má mať jasný názov, možnosť zatvorenia a správne ovládanie klávesnicou. Keď sa modálne okno otvorí, užívateľ používajúci klávesnicu alebo čítačku obrazovky by sa mal pohybovať iba vo vnútri otvoreného dialógu a nemal by omylom tabulátorom preskočiť na obsah pod prekrytím.
Prístupnosť je dobré riešiť už pri tvorbe webu, nie až spätne po dokončení.
Je možné skontrolovať formuláre, menu, modaly, focus, tlačidlá a základnú technickú prístupnosť.
Prístupnosť je možné doplniť aj do hotového webu, hlavne pri interaktívnych prvkoch a formulároch.
Prístupnosť webu znamená, že sa web dá rozumne používať aj klávesnicou, čítačkou obrazovky alebo inou asistívnou technológiou. Nejde len o kontrast, ale aj o správne popisky, štruktúru, formuláre, navigáciu a ovládanie.
ARIA atribúty dopĺňajú HTML o informácie pre asistívne technológie. Používajú sa napríklad pre popisky tlačidiel, stav rozbalenia menu, väzbu medzi tlačidlom a ovládaným obsahom alebo doplňujúci popis formulárového poľa.
aria-label slúži na doplnenie textového popisku prvku, ktorý nemá viditeľný text. Typicky sa používa pri ikonových tlačidlách, napríklad pri tlačidle pre otvorenie menu alebo zatvorenie modálneho okna.
aria-controls hovorí, aký prvok dané tlačidlo alebo ovládací prvok ovláda. Používa sa napríklad pri tlačidle, ktoré otvára menu, rozbaľovací obsah alebo modálne okno.
aria-expanded vyjadruje, či je ovládaný prvok aktuálne rozbalený alebo zbalený. Používa sa napríklad pri dropdown menu, mobilnej navigácii alebo accordion sekciách.
aria-haspopup informuje, že ovládací prvok otvára ďalšiu vrstvu, napríklad menu, dialóg alebo iný rozbaľovací obsah.
Nie. Kontrastný pomer je dôležitý, ale veľká časť prístupnosti vzniká až v kóde. Vývojár rieši sémantické HTML, ARIA atribúty, ovládanie klávesnicou, formuláre, focus stavy a správne popisky prvkov.
Áno. Pri hotovom webe je možné doplniť popisky, opraviť formuláre, upraviť navigáciu, modálne okná, focus stavy, ovládanie klávesnicou a základnú sémantiku HTML.
Napíšte mi, aký web chcete skontrolovať. Pozriem sa na formuláre, tlačidlá, navigáciu, modálne okná, ARIA atribúty, focus stavy a ovládanie klávesnicou.
Napíšte mi, aký web alebo aplikáciu potrebujete vytvoriť.
Než se pustíte do webu, hodí se mít jasno v podkladech, WordPressu, cookies a měření.
Ukážky skutočných recenzií, ktoré klienti zanechali na mojom Google profile.
Prejsť na recenzie★ ★ ★ ★ ★„Skvělá spolupráce, při dalších projektech určitě nebudu shánět někoho jiného.“
★ ★ ★ ★ ★„S panem Vančurou jsem spolupracovala na tvorbě mých webových stránek a jsem maximálně spokojená. Oceňuji profesionální přístup, rychlou komunikaci a schopnost přesně pochopit moje představy. Web je moderní, přehledný, funkční a skvěle vypadá i na mobilu. Celý proces proběhl hladce, s jasným vysvětlením jednotlivých kroků a výborným výsledkem. Určitě doporučuji každému, kdo hledá spolehlivý a kvalitní přístup.“
★ ★ ★ ★ ★„Spolupráce při tvorbě konfigurátoru proběhla naprosto bez problémů. Oceňuji profesionální přístup, rychlou komunikaci a schopnost pochopit specifický projekt od A do Z. Konfigurátor je přehledný, funkční a přesně odpovídá mým požadavkům. Rozhodně doporučuji.“
★ ★ ★ ★ ★„Velmi dobrá a rychlá spolupráce. Doporučuji!“
★ ★ ★ ★ ★„Přesně takto si představujeme profesionální práci. Dekujeme“
★ ★ ★ ★ ★„Ať už se jedná o optimalizaci webu, nebo tvorbu na míru oceňuji kromě profesionální práce a znalostí problematiky také férový přístup a komunikaci.“
★ ★ ★ ★ ★„Děkuji za profesionální spolupráci, vše dle domluvy, naprostá spokojenost a mohu jen vřele doporučit.... Při dalších projektech určitě opět využiji Vašich služeb“
★ ★ ★ ★ ★„Profesionalita a velká ochota, nemohu jinak než doporučit“
★ ★ ★ ★ ★„Skvělá zkušenost při tvorbě webu, profesionální přístup, rychlost, ochota pomoci“
★ ★ ★ ★ ★„Rychlá spolupráce a komunikace – mohu jen doporučit.“
★ ★ ★ ★ ★„Moc mi pomohl, když jsem potřebovala pomoc s webem. A bylo to gratis :)). Jsem mu neskonale vděčná.“
★ ★ ★ ★ ★„Děkuji Jiřímu za rychlou a kvalitní spolupráci na tvorbě webu. Srozumitelná a ochotná komunikace mě vždycky potěší a přináší důvěru.“
★ ★ ★ ★ ★„Jsem maximálně spokojená. Rychlost, ochota a cenově dostupné. Děkuji“
★ ★ ★ ★ ★„Naprostá spokojenost. Rychlá komunikace, skvělá cena a odborná pomoc. Moc děkuji :)“
★ ★ ★ ★ ★„Velká spokojenost, rychlost a p. Vančura moc dobře ví co dělá. :)“
★ ★ ★ ★ ★„dobrá práce, rychlá odezva“
★ ★ ★ ★ ★„S programátory mám zkušeností hodně, ale tady musím opravdu pochválit. Pro mě a mé přátele vytvořil skvělý nástroj na evidenci sbírek a opravdu se to povedlo. Bylo to hotové rychle, kvalitně a za skvělou cenu. Komunikace funguje velmi rychle, což je super a ne úplně standard. Díky za super práci, za mě 100% spokojenost!“
★ ★ ★ ★ ★„Vše bylo rychlé a hlavně to funguje. Dobrá práce.“
★ ★ ★ ★ ★„Normálně recenze nepíši, ale zde rád doporučím kvalitní práci. Jiří pro mě vytvořil web pro dětské tábory. Kvalitní práce, rychlá komunikace a vlastní nápady, které Jiří sám přidá, jsou na velice vysoké úrovni. Nemohu hodnotit jinak než 5/5.“
★ ★ ★ ★ ★„Pan Jiri nam delal jiz 3 webove stranky a vzdy velka spokojenost, je mega rychly a vse hned kladne vyridi, mohu pouze doporucit. Poradi si bez problemu i s rezervacnimi kalendaremi, udrzbou socialnich siti, atd.“
