Přístupnost webu znamená, že se web dá rozumně používat i klávesnicí, čtečkou obrazovky nebo jinou asistivní technologií. Hodně problémů přitom nevzniká v grafice, ale až v kódu — u tlačítek bez popisku, ikon bez významu, špatně označených formulářů, dropdownů, modalů nebo navigace.
Kontrastní poměr je důležitý základ a často vychází už z grafického návrhu. Vývojář by ale měl hlavně pohlídat, aby web dával technický smysl, měl správnou strukturu, popisky, ovládání klávesnicí a čitelnou vazbu mezi prvky.
Popisky, stavy a vazby pro prvky, které nejsou jasné jen ze samotného HTML nebo viditelného textu.
Labely, popisy polí, chybové hlášky, required stavy a jasná vazba mezi inputem a textem.
Dropdowny, mobilní menu, modální okna, aria-expanded, aria-controls a ovládání klávesnicí.
Web musí být použitelný i bez myši. Focus stavy mají být viditelné a pořadí prvků má dávat smysl.
Důležité
Od 28. června 2025 začala v Evropské unii platit nová pravidla přístupnosti podle European Accessibility Act. Přístupnost webu už tak není jen téma pro státní weby, ale řeší se i u části soukromého sektoru, hlavně u e-shopů, online služeb a digitálních systémů pro veřejnost.
Technickým základem bývá hlavně správná struktura webu, ovládání klávesnicí, přístupné formuláře, čitelné popisky, ARIA atributy a použitelnost pro asistivní technologie. Neznamená to ale, že úplně každý malý web automaticky spadá pod stejnou povinnost.
V praxi má ale spousta webů stále problémy se základní přístupností. Časté jsou tlačítka bez popisku, formuláře bez správných labelů, modální okna bez ovládání klávesnicí nebo navigace, která nedává smysl pro čtečky obrazovky. Dobrým příkladem praxe je zrovna ten můj, kde to taky nemám ještě všude pořádně vyladěné:-)
ARIA atributy doplňují prvkům význam pro asistivní technologie. Používají se hlavně u interaktivních částí webu, jako jsou ikonová tlačítka, rozbalovací menu, modální okna, accordiony nebo formuláře. Nejsou náhrada za správné HTML, ale pomáhají tam, kde prvek potřebuje přesnější popis, stav nebo vazbu na jiný obsah.
Dává prvku textový popisek, když nemá viditelný text. Typicky ikonové tlačítko pro menu, zavření okna nebo vyhledávání. Alternativou je text s třídou sr-only.
Říká, že popisek prvku je převzatý z jiného prvku na stránce, nejčastěji podle jeho ID.
Přidává doplňující popis. Hodí se u formulářů, nápověd, chybových hlášek nebo vysvětlení polí.
Říká, jestli je prvek rozbalený nebo sbalený. Používá se u menu, dropdownů, accordionů nebo mobilní navigace.
Vytváří vazbu mezi ovládacím prvkem a obsahem, který ovládá. Například tlačítko menu a samotné mobilní menu.
Informuje, že prvek otevírá další vrstvu, například menu, dialog nebo listbox.
Skryje dekorativní nebo duplicitní obsah před asistivními technologiemi. Používá se hlavně u ikon bez významu.
Doplňuje význam prvku, když nestačí běžné HTML. Nemá se používat zbytečně, pokud jde použít správný HTML prvek.
Viditelné zvýraznění aktivního prvku při ovládání klávesnicí. Bez toho uživatel neví, kde na stránce právě je.
Ilustrační obrázek vytvořený pomocí AI.
Běžný text nebo obrázek bývá jednodušší. Větší problém jsou tlačítka bez textu, menu bez stavu rozbalení, modální okna bez správné vazby, formuláře bez labelů nebo prvky, které nejdou ovládat klávesnicí.
Proto přístupnost řeším hlavně prakticky. Nejde jen o to přidat pár aria atributů, ale zkontrolovat, jestli prvek dává smysl jako celek — vizuálně, v HTML, při ovládání klávesnicí i pro čtečku obrazovky.
TIP
Věděli jste, že když se u formuláře zobrazí chybová hláška v reálném čase, čtečka obrazovky ji nevidomému uživateli nemusí automaticky oznámit? Vizuálně je chyba na stránce vidět, ale pokud dynamická hláška není ve správně označené live oblasti, například pomocí role="alert" nebo aria-live, uživatel používající čtečku se o ní nemusí dozvědět. Pole by zároveň mělo být s chybovou hláškou propojené například přes aria-describedby.
Grafik řeší vizuální podobu, čitelnost, velikosti a kontrast. Vývojář musí pohlídat, aby návrh v kódu neztratil význam, ovladatelnost a správnou strukturu.
Používat správné prvky. Tlačítko má být button, odkaz má být odkaz a nadpisy mají mít logickou strukturu.
Web má jít projít tabulátorem, interaktivní prvky mají být dosažitelné a focus nemá mizet.
Ikony, tlačítka, inputy a ovládací prvky musí mít jasný textový význam.
Každé pole má mít label, nápovědu, případnou chybu a srozumitelnou vazbu mezi textem a inputem.
Dialog má mít popisek, možnost zavření, správný focus a nemá nechat uživatele ztraceného za překryvem.
Menu, dropdowny a mobilní navigace mají jasně říkat, co otevírají a jestli jsou právě rozbalené.
ARIA se nemá lepit všude. Nejdřív má být správné HTML. Až potom se doplňuje tam, kde je potřeba popsat stav, vztah mezi prvky nebo význam, který z běžného markupování není jasný.
Když tlačítko obsahuje jen SVG ikonu, uživatel čtečky nemusí vědět, co dělá. aria-label může dodat popisek typu „Otevřít menu“, „Zavřít okno“ nebo „Vyhledat“.
Tlačítko může mít aria-expanded podle toho, jestli je menu otevřené, aria-controls s ID ovládaného menu a aria-haspopup, pokud otevírá další vrstvu navigace.
Input má mít label. Pokud má navíc nápovědu nebo chybu, dá se použít aria-describedby, aby bylo jasné, který text pole doplňuje.
Modal má mít jasný název, možnost zavření a správné ovládání klávesnicí. Když se modální okno otevře, uživatel používající klávesnici nebo čtečku obrazovky by se měl pohybovat jen uvnitř otevřeného dialogu a neměl by omylem tabulátorem přeskočit na obsah pod překryvem.
Přístupnost je dobré řešit už při tvorbě webu, ne až zpětně po dokončení.
Lze zkontrolovat formuláře, menu, modaly, focus, tlačítka a základní technickou přístupnost.
Přístupnost lze doplnit i do hotového webu, hlavně u interaktivních prvků a formulářů.
Přístupnost webu znamená, že se web dá rozumně používat i klávesnicí, čtečkou obrazovky nebo jinou asistivní technologií. Nejde jen o kontrast, ale také o správné popisky, strukturu, formuláře, navigaci a ovládání.
ARIA atributy doplňují HTML o informace pro asistivní technologie. Používají se například pro popisky tlačítek, stav rozbalení menu, vazbu mezi tlačítkem a ovládaným obsahem nebo doplňující popis formulářového pole.
aria-label slouží k doplnění textového popisku prvku, který nemá viditelný text. Typicky se používá u ikonových tlačítek, například u tlačítka pro otevření menu nebo zavření modálního okna.
aria-controls říká, jaký prvek dané tlačítko nebo ovládací prvek ovládá. Používá se například u tlačítka, které otevírá menu, rozbalovací obsah nebo modální okno.
aria-expanded vyjadřuje, jestli je ovládaný prvek aktuálně rozbalený nebo sbalený. Používá se například u dropdown menu, mobilní navigace nebo accordion sekcí.
aria-haspopup informuje, že ovládací prvek otevírá další vrstvu, například menu, dialog nebo jiný rozbalovací obsah.
Ne. Kontrastní poměr je důležitý, ale velká část přístupnosti vzniká až v kódu. Vývojář řeší sémantické HTML, ARIA atributy, ovládání klávesnicí, formuláře, focus stavy a správné popisky prvků.
Ano. U hotového webu lze doplnit popisky, opravit formuláře, upravit navigaci, modální okna, focus stavy, ovládání klávesnicí a základní sémantiku HTML.
Napište mi, jaký web chcete zkontrolovat. Podívám se na formuláře, tlačítka, navigaci, modální okna, ARIA atributy, focus stavy a ovládání klávesnicí.
Napište mi, jaký web nebo aplikaci potřebujete vytvořit.
Než se pustíte do webu, hodí se mít jasno v podkladech, WordPressu, cookies a měření.
Ukázky skutečných recenzí, které klienti zanechali na mém Google profilu.
Přejít na recenze★ ★ ★ ★ ★„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.“
