Digitální přístupnost je o tom, že veškeré digitální produkty a služby může používat každý, i lidé se zrakovým, sluchovým, pohybovým nebo kognitivním omezením. Nejde o to vytvořit jinou verzi webu či e-shopu, ale o to, aby ten hlavní web/e-shop fungoval pro co nejvíce lidí. Jsou na to vaše stránky připravené?
Připravte se na novou éru přístupnosti
Co si pod přístupností představit? Například to, aby bylo možné web/eshop ovládat bez myši, byl srozumitelný pro čtečky obrazovky nebo aby byl dostatečně kontrastní pro lidi se zhoršeným zrakem.
Zároveň je ale důležité si uvědomit, že přístupnost je důležitá pro všechny, ne jen pro lidi se zdravotním omezením. Je dost možné, že nějaký prvek přístupnosti už sami využíváte.
Komu přístupnost pomáhá?
Když je web či e-shop přístupný, zvyšuje se jeho použitelnost pro všechny. Myslete na to, že přístupnost není jen pro lidi se zdravotním postižením. Pomáhá každému, kdo se může ocitnout v nějaké „dočasně znevýhodněné situaci“:
-
Držíte dítě a máte k dispozici jen jednu ruku, ovládáte tedy web klávesnicí nebo mobilem jednou rukou.
-
Jste na slunci a hůř vidíte kontrast.
-
Máte pomalý internet a nechcete načítat velké obrázky bez alt textu.
-
Potřebujete se rychle zorientovat ve formuláři nebo najít kontakt.
Obecnému příkladu, na kterém vysvětlujeme přístupnost, se říká Curb-cut effect, v překladu „obrubníkový efekt“. Popisuje situaci, kdy opatření přijaté na pomoc lidem se zdravotním omezením nakonec pomůže všem. Původně byly snížené obrubníky vytvořené pro vozíčkáře ale ve výsledku jsou prospěšné i pro rodiče s kočárky, lidi s kufry, cyklisty, seniory, děti nebo kohokoliv, kdo nechce zvedat nohy přes vysoký obrubník. Takže něco, co bylo myšleno pro malou skupinu lidí, ve skutečnosti zlepšilo život celé společnosti.
Jak to všechno souvisí s digitální přístupností
Když uvedu některé prvky digitální přístupnosti, o kterých se ještě budeme dále bavit:
- Alternativní popisky nejsou jen pro nevidomé – pomáhají SEO a načítání při pomalém připojení.
- Dobrá klávesová navigace usnadní život komukoli s dočasným zraněním nebo kdo ovládá počítač jednou rukou.
- Dostatečný kontrast zlepší čitelnost pro všechny, třeba na mobilu na slunci.
- Titulky ve videích ocení každý, kdo potřebuje sledovat video bez zvuku (např. když je ve veřejné dopravě).
Tento příklad ukazuje, že přístupnost není pouze pro určitou skupinu lidí ale může pomoci všem.
Co požaduje legislativa?
Od 28. června 2025 bude platit legislativa o přístupnosti. Nejedná se o novou legislativu, tato legislativa platí už pár let, ale dosud pouze u veřejného sektoru - nyní se rozšíří i na soukromý sektor. Legislativa se nevztahuje pouze na mikropodniky - firmy s méně než 10 zaměstnanci a ročním obratem nebo bilanční sumou nepřesahující 2 miliony eur.
V rámci legislativy je nutné dodržovat mezinárodní pravidla WCAG (Web Content Accessibility Guidelines), které určují, jak má vypadat přístupný web. Konkrétně je nutné splňovat požadavky WCAG 2.1 na úrovni A a AA.
Obecně se přístupnost dělí do 4 sekcí - principů:
- Vnímatelný – uživatelé musí vidět nebo slyšet obsah (zařizují alt popisky, dostatečný kontrast).
- Ovládatelný – musí jít ovládat i bez myši (např. klávesnicí).
- Srozumitelný – obsah i ovládání jsou jasné a předvídatelné.
- Stabilní – funguje na různých zařízeních a s asistenčními technologiemi.
Naše platforma už většinu přístupnostních požadavků splňuje ale na některých ještě pracujeme.
Na jaké prvky přístupnosti se zaměřit na svém webu?
Alternativní popisky
Alternativní popisky jsou důležité pro lidi se zrakovým omezením. Tyto popisky jim předčítají čtečky obrazovky. Zároveň tyto popisky můžete využít i vy např. pokud máte pomalý internet (když se nenačte obrázek, zobrazí se alt).
Všechny důležité obrázky musí mít vyplněné alternativní popisky - jediné, kdy není nutné vyplňovat alt je u dekorativních obrázků (např. pozadí).
Zároveň je důležité si uvědomit, že nestačí mít jen vyplněný alternativní popisek ale záleží i na jeho tvaru. U některých komponent, pokud nevyplníte alternativní popisek, tak se do něj přebere název obrázku. Toto také není ideální, jelikož alternativní popisek má říct, co se na obrázku nachází (resp. co to je za obrázek – nějaký výstižný popis).
Ukázka:
❌ "IMG_12345.jpg" (název souboru není užitečný)
❌ "Obrázek muže na kole" (zbytečné slovo "Obrázek" - čtečky to uživatelům říkají automaticky)
✅ "Muž na kole v horském terénu" (smysluplný popis)
Správná textace odkazů
Při vytváření odkazů myslete na to, že samotný text odkazu musí dávat smysl. Vyhýbejte se odkazování jako je „Odkaz zde“. Toto je nicneříkající text odkazu a už přímo v textu odkazu zadávejte kam odkaz směřuje.
Příklad:
❌ „Chcete se dozvědět více? Přečtěte si manuály zde.“
✅ „Chcete se dozvědět více? Navštivte naše manuály.“
Popisky k ikonkám
Ikonky, které provádí nějakou akci po kliknutí, musí mít u sebe uvedený popis nebo název akce, pro kterou slouží. Na webu se typicky jedná o ikony sociálních sítí, kdy kromě odkazu (tzn. kam se přesměruje po kliknutí) musí být doplněn i popis. Toto můžete nastavit např. v kostičce Sociální sítě.
Příklad:
Popisek nastavený u ikonky Facebook: „Navštivte nás na Facebooku“
Struktura a hierarchie
Struktura a hierarchie se hodně týká správného vytváření stránky/příspěvků atd. Je to opět důležité pro čtečky obrazovek a zároveň i pro navigaci pomocí klávesnice, aby stránku četla ve správném pořadí.
Obecně je také důležité dodržovat správnou hierarchii nadpisů, kdy stránka musí mít pouze jeden hlavní nadpis (H1) a dále musí být nadpisy používány ve správném pořadí (např. H2 pro podnadpis, H3 pro další členění).
Kontrast barev
U kontrastního poměru barev je důležité, aby text byl dobře viditelný vůči pozadí. Obecně je kontrastní poměr důležitý pro lidi se zrakovým omezením, ale zároveň je tato čitelnost důležitá i v případě, že např. čtete na mobilu na slunci.
Dejte si pozor při nastavování barev pro různé komponenty. Je důležité, abyste si ohlídali kontrast textu vůči pozadí, aby vše bylo dobře čitelné. Podle legislativy musí být poměr 4.5:1, proto doporučujeme zkontrolovat poměr např. v tomto nástroji: wave.webaim.org (záložka Contrast).
Zároveň doporučujeme zkontrolovat celý váš web/e-shop, jestli odpovídá minimálnímu kontrastnímu poměru.
Videa s titulky
Všechna videa s mluveným slovem musí mít titulky nebo textový přepis. Titulky jsou důležité pro lidi se zrakovým omezením, ale také je využije kdokoliv, kdo potřebuje sledovat video bez zvuku (např. když je ve veřejné dopravě). Jediné, kdy nejsou u videa nutné titulky, jsou videa bez zvuku nebo pokud v něm není mluvené slovo (např. štěkot psa).
Na web/e-shop lze přidávat videa z Youtube a titulky k videu lze přidat přímo v Youtube studiu.
Navigace pomocí klávesnice
Jako jeden z principů přístupnosti je ovladatelnost, kam spadá to, že musí být ovladatelný i jiným způsobem než jen pomocí myši. V tomto případě pomocí klávesnice. Obecně musí být všechny ovládací prvky (tlačítka, formuláře, menu, odkazy) dostupné touto cestou. Zároveň musí být viditelný fokus, aby bylo vidět, kde se uživatel nachází.
Pohyb:
- vpřed (+ aktivace navigace): Tab
- vzad (zpět): Shift + Tab
- potvrzení výběru: Enter
Jak zkontrolovat vlastní web či e-shop?
Doporučujeme abyste si zkontrolovali svůj web z hlediska přístupnosti. Pro kontrolu existuje několik nástrojů, ale není přesně stanovený nástroj, který používat. Obecně ale doporučujeme nástroj WAVE, který je přehledný a intuitivní.
Připravili jsme pro vás checklist s tím, co byste měli mít na webu podchycené z hlediska přístupnosti. V checklistu jsou také konkrétní příklady.
Co když web nebude 100% přístupný k 28. 6. 2025?
Kontrola nebude hromadná ani okamžitá a případné nedostatky nepovedou hned k sankcím. Obecně se ještě přesně neví, jak kontroly budou probíhat - vychází se z toho jak to probíhá teď u veřejného sektoru:
- Kontroly - jsou výběrové (např. na základě oboru) nebo na základě podnětu.
- Pokud budou na webu nedostatky, tak vás (jako provozovatele webu) kontaktuje kontrolní orgán (DIA).
- Nejdřív dostanete výzvu k nápravě – obvykle s lhůtou na opravu (cca 30 - 90 dní).
- Sankce - pokud na výzvu nereagujete nebo se nevyřeší nedostatky.
- Pokud vás kontrola kontaktuje, obraťte se na nás – pomůžeme vám s vyřešením požadavků.
Kde sledovat další informace k přístupnosti?
Doporučujeme průběžně sledovat sekci Aktuality ve webových a e-shopových manuálech:
Pravidelně tam přidáváme nové informace týkající se digitální přístupnosti – například jak pracovat s nástrojem WAVE pro kontrolu přístupnosti Vašeho webu nebo e-shopu a praktické tipy, co a jak nastavit, abyste splnili požadavky na přístupnost.