Přístupnost webu: praktický průvodce
Přístupnost je rozdíl mezi webem, který může používat každý, a webem, který část návštěvníků vylučuje, aniž by si toho někdo všiml. Většina požadavků je jednoduchá a levná, pokud se řeší během stavby.
Tento průvodce pokrývá, co kontrolovat, jak testovat bez drahých nástrojů, a co je právní povinnost, a ne jen dobrá praxe.
Základ podle dopadu#
Splnění těchto bodů odstraní většinu skutečných bariér a žádný z nich není během stavby drahý.
- Sémantické HTML. Nadpisy, seznamy, tlačítka a odkazy se správnými značkami — to je základ všeho.
- Ovládání klávesnicí. Vše, co jde myší, musí jít pomocí Tab a Enter.
- Viditelné označení fokusu. Nikdy neodstraňujte obrys bez lepší náhrady.
- Dostatečný kontrast. 4,5:1 pro běžný text, 3:1 pro velký.
- Alternativní text u obrázků. Popisný u informativních, prázdný u dekorativních.
- Popisky u formulářů. Svázané s polem, ne jen zástupný text.
- Srozumitelné chyby. U pole, s informací, co opravit, ne jen červeně.
- Nepředávejte informaci pouze barvou.
- Titulky u videí, a přepis u zvuku.
Sémantické HTML samo o sobě řeší obrovskou část problémů. Tlačítko, které je <div>, okamžitě selže u klávesnice i u čteček obrazovky.
Testovat bez drahých nástrojů#
Pět testů, které zvládne kdokoli a které zachytí většinu problémů.
| Test | Jak na to | Co odhalí |
|---|---|---|
| Jen klávesnice | Odložte myš a procházejte Tabem | Pasti fokusu, nedostupné prvky |
| Přiblížení na 200 % | Zvětšit v prohlížeči | Rozbité rozvržení, oříznutý text |
| Automatický audit | Bezplatné rozšíření pro přístupnost | Kontrast, popisky, struktura |
| Čtečka obrazovky | Ta vestavěná v operačním systému | Zda stránka dává smysl přečtená |
| Odstíny šedi | Systémový filtr | Informace předávaná pouze barvou |
Automatické nástroje zachytí zhruba třetinu problémů. Test klávesnicí zachytí mnoho ze zbytku a trvá dvě minuty.
Časté chyby#
Vzorce, které se objevují opakovaně a kterým se snadno vyhne.
- Odstranění obrysu fokusu z estetických důvodů — znemožní ovládání klávesnicí.
- Použití <div> s obsluhou kliknutí místo <button>, čímž se ztratí klávesnice i sémantika.
- Zástupný text místo popisku: zmizí, jakmile začnete psát.
- Nízký kontrast u sekundárního textu, velmi častý u světlých šedí.
- Obrázky s vypáleným textem, nečitelné pro čtečky i pro překlad.
- Automatické karusely bez možnosti pozastavení.
- Modály, které nevracejí fokus na prvek, který je otevřel.
- Ikony bez přístupného popisku, zejména v menu a u zavíracích tlačítek.
Právní povinnost a rozsah#
Rámec se liší podle země a typu organizace, ale směr je všude stejný.
| Kontext | Stav |
|---|---|
| Veřejný sektor v Evropské unii | Povinné, s prohlášením o přístupnosti |
| Digitální služby a obchod | Stále více pokryto evropskou legislativou |
| Dodavatelé pro stát | Často vyžadováno ve výběrových řízeních |
| Referenční norma | WCAG 2.1 úroveň AA |
| Soukromé weby bez veřejných zakázek | Dobrá praxe, s rostoucím právním rizikem |
| Mobilní aplikace | Pokryty stejnými pokyny |
Bez ohledu na právní povinnost je praktický argument jednoduchý: významná část populace má nějaké omezení a dočasná omezení potkají někdy každého.
Časté dotazy
Prodraží přístupnost projekt?
Během stavby málo — většinou jde o psaní správného HTML a volbu barev s dostatečným kontrastem. Opravovat po dokončení webu stojí výrazně víc, protože to znamená zasahovat do už postavené struktury. Proto by to mělo být v požadavcích, ne v auditu po spuštění.
Stačí automatické nástroje?
Ne. Zachytí zhruba třetinu problémů: kontrast, chybějící popisky, strukturu nadpisů. Nedokážou posoudit, zda je alternativní text užitečný, zda pořadí tabulátoru dává smysl, nebo zda je stránka srozumitelná přečtená. Kombinujte automat s testem klávesnicí a čtečkou obrazovky.
Pomáhá přístupnost SEO?
Pomáhá, díky skutečnému překryvu: sémantické HTML, dobře strukturované nadpisy, alternativní text a titulkované video slouží oběma cílům. Není to SEO taktika, ale obě věci táhnou stejným směrem, protože obě stojí na tom, že obsah je srozumitelný nezávisle na vizuální prezentaci.
Potřebuji plnou shodu?
Pokud máte právní povinnost — ano, na požadované úrovni. Jinak pracujte podle priorit: opravte nejdřív to, co blokuje používání — klávesnici, kontrast, popisky, formuláře — a jemnější body až potom. Web s vyřešeným základem je použitelný; plná formální shoda je další krok.
přístupnost webuwcagpřístupný webovládání klávesnicíkontrast přístupnostčtečka obrazovky
