Digitální přístupnost se týká toho, aby web mohl bez problémů 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, ale o to, aby ten hlavní web fungoval pro co nejvíc lidí. Např. aby šel ovládat bez myši, byl srozumitelný pro čtečky obrazovky nebo aby barvy měly dostatečný kontrast pro lidi se zhoršeným zrakem.
Obecně co je to přístupnost, doporučený nástroj na kontrolu a články o přístupnosti, které jsou dostupné i pro klienty naleznete v aktualitách. Všechno budu postupně sepisovat pod článkem Připravte se na novou éru přístupnosti.
Doporučuju kontrolovat přístupnost pomocí nástroje WAVE (lze přidat i jako doplněk do chromu - je to rychlejší). Plus využít i nějaké asistenční technologie jako je např. čtečka obrazovky - díky tomu si můžete zkusit, jak reálně web vnímá člověk, který využívá čtečku.
Na této stránce jsou zmíněné konkrétní body, které na webu musí být z hlediska přístupnosti podchycené včetně toho co je dostupné na různých verzí webu.
Alternativní popisky
Kdo může nastavit: produkce, klient
Alternativní popisky jsou důležité pro lidi se zrakovým omezením, kdy 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 alternativní popisek - jediné kdy není nutné vyplňovat alt je u dekorativních obrázků (např. pozadí).
Je důležité si uvědomit, že nestačí mít jen vyplněný alternativní popisek ale i na jeho tvaru. U hodně kostiček pokud nevyplníte alternativní popisek, tak se přebere název obrázku. Pokud pak web nahrajete do nástroje na kontrolu přístupnosti, tak vám to projde, protože nástroj kontroluje jen jestli je alt vyplněn. Tím ale nemáte vyhráno, kontrolní orgán nevychází pouze z jednoho nástroje a dělá podrobný audit, kdy zkontrolují i jestli je popisek ve správném tvaru, takže na to pozor.
Ukázka:
| ŠPATNĚ | SPRÁVNĚ |
| ❌ "IMG_12345.jpg" -> toto je alt přebraný z názvu obrázku ❌ "Obrázek muže na kole" -> nepsat slovo obrázek do altu (čtečka sama rozpozná, že se jedná o obrázek) |
✅ "Muž na kole v horském terénu" |
POZOR: Alt u loga si klient sám nenastaví - ostatní alty si může nastavit.
| Nejvyšší verze | v2021 a v2022 | |
| Pole pro zadání alt popisků na všech místech, kam lze nahrát obrázek | Ladíme | Chybí u Fotogalerie, Citace, Infobox, Mapa, Osoba, Grafická anotace, Rozcestník, Podstránky, HTML a Image slideshow |
| Nastavení altu k obrázku přímo v Galerii médií | Zkusíme realizovat | Nelze (resp. lze ale nepřebere se do altu) |
| Pole pro alt u loga | Ano (aktivita) | Ne |
Popisky k sociálním sítím
Kdo může nastavit: produkce, klient
Popisky k sociálním sítím jsou hodně podobné jako alty u obrázků. Opět je toto důležité především pro lidi, kteří využívají čtečky obrazovky.
Na webu lze sociální sítě nastavit v hlavičce, kostičce Sociální sítě a kostičce Osoba. Na typovkách jsou defaultně vyplněné popisky u sociálních sítí v hlavičce - lze samozřejmě přepsat.
Ukázka:
SPRÁVNĚ:
✅ „Navštivte nás na Facebooku“
POZOR: Popisky sociálních sítí v hlavičce si klient sám nenastaví.
| Nejvyšší verze | v2021 a v2022 | |
| Pole pro popisek sociálních sítí v: | ||
| - hlavičce | Ano | Ano |
| - kostičce Sociální sítě | Ano (aktivita) | Ano - kromě šablony Pouze ikony (popisek se nepropíše do altu) |
| - kostičce Osoba | Ano (aktivita) | Ne (chybí pole pro popisky u sociálních sítí) |
| Defaultně vyplněný popisek sociálních sítí v hlavičce | Ano (aktivita) | Ne |
Labely u ikonek a ve formulářích
Kdo může nastavit: vývoj, případně produkce u webů na nižší verzi
Na webu u ikonek v hlavičce (KZ, vyhledávání) a u formulářů chybí labely nebo nejsou správně propojené. Opět je to důležité pro čtečky obrazovek.
| Nejvyšší verze | v2021 a v2022 | |
| KZ v hlavičce - ikonka pro přihlášení + pole | Ano (aktivita na ikonku, aktivita na pole) | Ne |
| Vyhledávání v hlavičce | Ano (aktivita) | Ne |
| Formuláře (checkbox, select, radio button) | Ano (aktivita) | Ne |
| Kostička Newsletter (checkbox) | Ano (aktivita) | Ne |
| Lišta upozornění | Ano (aktivita) | - |
| Video na pozadí (play, pauza, zvuk) | Ano (aktivita) | - |
Stránka "Prohlášení o přístupnosti"
Kdo může nastavit: produkce, klient
Stránka "Prohlášení o přístupnosti" musí být z hlediska legislativy na každém webu. Tato stránka bude automaticky vytvořená na nejvyšší verzi webu (jedná se o podobnou stránku jako třeba gdpr). Na této stránce ale je důležité, aby se vyplnil kontakt (email) provozovatele webu, tzn. klienta. Na nižších verzí webu se musí tato stránka vytvořit ručně.
Aktivita na vytvoření stránky "Prohlášení o přístupnosti" + aktivita na dotažení překladů
Navigace pomocí klávesnice
Kdo může nastavit: produkce, klient
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
Aby na webu navigace fungovala je nutné ji zapnout v Nastavení -> Konfigurace webu -> checkbox "Přístupný web". Na typovkách je už defaultně zapnuto.
Struktura a hierarchie
Kdo může nastavit: produkce, klient
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í).
Titulky u videí
Kdo může nastavit: produkce, klient
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 lze přidávat videa z Youtube a titulky k videu lze přidat přímo v Youtube studiu.
Kontrastní poměr barev
Kdo může nastavit: produkce, klient (hodně omezeně)
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í ale zároveň je tato čitelnost důležitá i v případě, že např. čtete na mobilu na slunci.
Ideální minimální kontrastní poměr je 7:1 - tento poměr odpovídá legislativě úrovně AAA, která momentálně není povinná. Stačí tedy minimální kontrastní poměr 4.5:1, který odpovídá úrovni AA, což je úroveň kterou požaduje legislativa.
Kontrastní poměr barev doporučuju zkontrolovat přes nástroj WAVE na záložce Contrast.
POZOR: Barvy na webu si klient sám nenastaví - může jen v některých kostičkách např. Infobox.
| Nejvyšší verze | v2021 a v2022 | |
| Správný kontrastní poměr u hlášek ve formuláři | Ano (aktivita) | Ne - poměr je pod 4.5:1 |
Animace u komponent
Kdo může nastavit: vývoj, případně produkce u webů na nižší verzi
U veškerých komponent, kde je nějaká animace (např. videa nebo přepínání obrázků) musí být možné tuto animaci zastavit. Zároveň nesmí být tato animace moc rychlá, aby nezpůsobovala závratě, nevolnost nebo záchvaty. Rychlé animace, případně nějaké blikající prvky také mohou ztěžovat soustředění a v případě, že uživatel využívá čtečky obrazovky, tak čtečky nemusí stihnout přečíst nebo zachytit obsah. Minimální zpoždění, tedy doba zobrazení jedné fotografie má být 5000ms a rychlost přechodu 300ms.
Na webu jsou animace v kostičce HTML a Image slideshow a ve Fotogalerii.
| Nejvyšší verze | v2021 a v2022 | |
| Možnost zastavení komponent s animací: | ||
| - kostička HTML slideshow | Ano (aktivita) | Ne |
| - kostička Image slideshow | Ladíme | Ne |
| - kostička Fotogalerie (vedle sebe) | Ano (aktivita) | Ne |
| - kostička Fotogalerie (slider) | Ladíme | Ne |
| Animace - časový interval zpoždění - alespoň 5000ms | Ladíme | Ne - u fotogalerie je 3000ms |