Přístupnost webových stránek

Přístupnost je v dnešní době stále aktuálnějším tématem, které se týká nejen webových stránek státní správy a škol, ale je často jedním z parametrů, který se zohledňuje ve výsledcích vyhledávání například u Google nebo jiných vyhledávačů. Proto je vhodné při tvorbě či úpravě webu věnovat požadavkům na přístupnost zvýšenou pozornost.

Na internetu dnes existuje celá řada firem a služeb, které vám za poplatek provedou audit přístupnosti vašich webových stránek pro osoby se zdravotním postižením. Proč však utrácet nemalé prostředky za něco, co jste schopni si jednoduše udělat sami? V našem článku se zaměříme na klíčové aspekty, na které je třeba dávat pozor při tvorbě webových stránek, aby splňovaly požadavky na přístupnost, a ukážeme vám, jak vám v tomto ohledu mohou pomoci různé online nástroje.

Co přístupnost webových stránek obecně znamená

Přístupnost znamená schopnost webových stránek být použitelné a srozumitelné pro osoby se zdravotním postižením. Jedná se o to, aby mohli uživatelé s různými typy postižení, jako jsou například vizuální, sluchové, motorické nebo kognitivní postižení, plně využívat internetového obsahu a služeb.

Přístupné webové stránky jsou navrženy a vyvíjeny s ohledem na potřeby a schopnosti všech uživatelů, bez ohledu na jejich individuální omezení. To zahrnuje používání dostatečně kontrastních barev pro lepší čitelnost pro lidi se zrakovými postiženími, poskytování alternativních textů pro obrazy pro uživatele se zrakovým postižením nebo omezenou šířkou pohybu, a zajištění snadné navigace a ovládání pro uživatele s motorickými postiženími.

Základní pravidla přístupnosti webových stránek

Existují různé standardy a směrnice pro přístupnost webu pro zdravotně postižené, které byly vyvinuty s cílem zajistit, aby webové stránky byly použitelné pro co nejširší spektrum uživatelů. Přístupnost webových stránek je definována zákonem č. 99/2019 Sb. V české legislativě je přístupnost webu povinná pro webové stránky státních institucí, měst, obcí a škol. Podrobněji jsou tato pravidla rozepsána na webu pristupnost.cz, který je tématu přístupnosti webů kompletně věnován. Pokud jste správcem webu, který musí tuto povinnost splnit, doporučujeme vše důkladně projít. Podrobná doporučení a tipy najdete i na portálu Národní knihovny - Praha.

I když se nejedná o web státní instituce, obce nebo školy, je vhodné na přístupnost webu brát ohled a řídit se jejími doporučeními. Tyto doporučení jsou v zkratce následující:

Dostupnost pro všechny vstupní body: Webové stránky by měly být navigovatelné a použitelné pomocí klávesnice, hlasových příkazů nebo jiných zařízení.
Dostatečný kontrast: Text a obrazové prvky by měly mít dostatečný kontrast mezi popředím a pozadím, aby byly čitelné pro lidi se zrakovým postižením.
Alternativní text pro obrázky: Všechny obrázky na stránkách by měly mít popisné alternativní texty, které umožní uživatelům se zrakovým postižením porozumět obsahu.
Strukturované dokumenty: Stránky by měly být strukturované pomocí správného HTML kódu, aby bylo snadné je číst a interpretovat pomocí čteček obrazovek.
Jednoznačná navigace: Navigace a ovládací prvky by měly být jasně označeny a snadno rozpoznatelné pro uživatele se zrakovým nebo kognitivním postižením.
Flexibilita layoutu: Stránky by měly být navrženy tak, aby se přizpůsobily různým zařízením a velikosti obrazovek, což usnadní používání pro uživatele s různými potřebami.

Jednotlivá doporučení (pravidla) si níže trochu více rozvedeme a ukážeme, jak je aplikovat na váš web vytvořený na inPage.

Jak upravit web, aby byl co nejvíce v souladu s pravidly pro přístupnost

Dostupnost pro všechny vstupní body

Znamená, že vaše webové stránky jsou použitelné a ovladatelné pomocí různých vstupních metod a zařízení, jako jsou klávesnice, hlasové asistentky nebo speciální zařízení pro ovládání. Zde je několik konkrétních kroků, které můžete podniknout:

Ověřte klávesnicovou navigaci: Projděte své webové stránky pomocí pouze klávesnice a ověřte, že všechny interaktivní prvky a ovládací prvky jsou snadno dostupné a použitelné pomocí klávesových zkratek. Zkontrolujte, zda je možné použít klávesové zkratky pro navigaci po stránce, aktivaci odkazů a ovládání formulářů. Podrobnější informace
Zkontrolujte pořadí focusu: Ujistěte se, že pořadí focusu* prvků na stránce odpovídá logickému pořadí čtení a navigace. Uživatelé by měli mít možnost snadno přesunout se po stránce pomocí klávesnice a správně orientovat se v obsahu.
Otestujte použitelnost bez myši: Vyzkoušejte používání vašich webových stránek bez myši, abyste zjistili, zda jsou všechny interakce a funkce dostupné i pro uživatele, kteří nemohou používat myš. Ujistěte se, že všechny ovládací prvky jsou snadno dosažitelné pomocí klávesnice.
Podpora hlasových příkazů: Zajistěte, že vaše webové stránky jsou plně použitelné pomocí hlasových asistentek a technologií pro rozpoznávání řeči. To znamená, že všechny ovládací prvky a funkce jsou snadno přístupné pomocí hlasových příkazů a správně interpretovány.

"focus" je stav, ve kterém je určitý prvek na webové stránce aktivní a připravený na interakci ze strany uživatele.

Dostatečný kontrast

Pro dosažení dostatečného kontrastu je důležité zajistit, aby text a jiné prvky na stránce byly snadno čitelné a rozlišitelné pro uživatele se zrakovým postižením nebo jinými problémy se zrakem. Zde je několik způsobů, jak toho dosáhnout:

Používejte dostatečně kontrastní barvy: Zvolte barvy textu a pozadí, které mají dostatečný kontrast, aby text byl dobře čitelný. To znamená, že pokud je text tmavý, pozadí by mělo být světlé, a naopak. Doporučené minimální hodnoty kontrastu jsou definovány ve směrnicích přístupnosti, například v normě WCAG.
Používejte standardní fonty: Při výběru fontů pro text na stránce preferujte standardní a snadno čitelné fonty. Zvláště ve velkých velikostech písma, jako je nadpis nebo hlavní text, je důležité používat fonty, které jsou dobře čitelné i při nízkém kontrastu. Na inPage máte k dispozici k dispozici základní fonty které splňují pravidla pro kontrast a čitelnost písma. Pokud chcete využít jiný font doporučujeme vybírat fonty prověřené a jednoduché jako např. volně licencované fonty Roboto, Montserrat, Open sans.
Zvažte velikost písma: Velikost písma má také vliv na kontrast a čitelnost. Zajistěte, aby text byl dostatečně velký, aby byl snadno čitelný pro všechny uživatele, včetně těch se zrakovým postižením.
Zkontrolujte kontrast na různých zařízeních: Zajistěte, že kontrast textu a pozadí je dostatečný i na různých zařízeních a velikostech obrazovek, jako jsou počítače, tablety a mobilní telefony. Vzhledem k tomu, že barvy mohou vypadat jinak na různých zařízeních, je důležité provést kontrolu na více zařízeních.
Používejte nástroje pro kontrolu kontrastu: Existují online nástroje, které vám umožní ověřit kontrast mezi textem a pozadím na vašich webových stránkách. Tyto nástroje vám poskytnou informace o kontrastu a pomohou vám identifikovat oblasti, které vyžadují úpravy. Pro kontrolu kontrastu můžeme doporučit nástroj WebAIM Color Contrast Checker.

Alternativní text pro obrázky

Tento textový popis poskytuje uživatelům se zrakovým postižením zobrazit informace o obsahu nebo významu obrázku. Alternativní text je také důležitý pro vyhledávací motory, které ho používají k porozumění obsahu obrázku a indexaci webových stránek. Níže najdete doporučení pro vytváření alternativních popisků textů (popisků) k obrázkům, aby splňovaly požadavky na přístupnost webu:

Stručnost a relevantnost: Popisek by měl být stručný a zároveň poskytovat relevantní informace o obsahu nebo významu obrázku. Snažte se vyjádřit to, co je na obrázku důležité a co by mohl uživatel potřebovat vědět, pokud nemůže obrázek zobrazit.
Konkrétní popis: Popisek by měl obsahovat konkrétní informace o obsahu obrázku, jako jsou objekty, scény, akce nebo kontext. Vyvarujte se obecných popisů, které by mohly být matoucí nebo nedostatečné.
Vyhněte se technickým jazykům: Pokud je to možné, vyhněte se používání technických jazyků, zkratkám nebo specifickým termínům, které by mohly být nesrozumitelné pro běžného uživatele.
Nechte si osobní názor: Při psaní popisku můžete také zahrnout svůj osobní názor nebo reakci na obrázek, pokud je to relevantní. Například: "Šťastný pes hrající si na louce" namísto "Pes na louce".
Použijte klíčová slova: Zvažte použití klíčových slov nebo frází, které jsou relevantní pro obsah stránky a mohou pomoci uživatelům lépe porozumět obrázku.
Ověřte konzistenci: Ujistěte se, že vaše alternativní popisky jsou konzistentní napříč celým webem a že poskytují dostatečně podrobný popis pro všechny obrázky.

Přidání alternativního textu (popisku) k obrázku je na inPage jednoduché. Je k dispozici přímo v dialogu pro vkládání obrázku na stránku, kde doplníte položku "Alternativní text", jak je znázorněno na obrázku výše

Strukturované dokumenty

Jedná se o způsob, jakým jsou webové stránky organizovány a značkovány pomocí kódu HTML. Strukturované dokumenty zahrnují použití správných HTML značek a atributů k popisu struktury a vztahů mezi různými částmi obsahu na stránce.

Strukturované dokumenty jsou klíčové pro přístupnost webu z několika důvodů:

Usnadňují orientaci pro uživatele: Správně strukturované dokumenty umožňují uživatelům snadno navigovat po stránce a porozumět jejímu obsahu. To je obzvláště důležité pro uživatele se zrakovým postižením nebo jinými disabilitami, kteří spoléhají na technologie jako jsou screen readery nebo hlasové prohlížeče.
Podporují správné načítání obsahu: Vyhledávací roboti a další technologie pro zpracování obsahu na internetu používají strukturované dokumenty k identifikaci a pochopení obsahu stránek. Správná struktura pomáhá vyhledávacím robotům lépe porozumět obsahu a správně ho indexovat.
Umožňují flexibilní prezentaci obsahu: Správně strukturované dokumenty umožňují uživatelům přizpůsobit zobrazení obsahu dle jejich potřeb. Například, pomocí CSS (Cascading Style Sheets) můžete definovat různé styly pro různé typy obsahu na základě jeho struktury, což může být užitečné pro uživatele s různými zařízeními nebo preferencemi.

Ve strukturovaných dokumentech by měly být použity značky HTML, jako jsou <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> atd., k popisu jednotlivých částí obsahu na stránce a k vytvoření sémantického významu. To umožní lepší porozumění obsahu stránky pro uživatele i pro vyhledávací roboty, což přispívá k celkové přístupnosti a použitelnosti webových stránek.

Webové stránky vytvořené na inPage jsou psány v moderním a kvalitním HTML s precizně používanými CSS styly a tudíž zcela splňují tuto podmínku pro dostupnost webových stránek.

Jednoznačná navigace

Je uspořádání navigačního menu nebo odkazů na stránce tak, aby byl pohyb po stránkách snadný a intuitivní i pro osoby se zdravotním postižením. Jakékoli překážky v podobě nepřehlednosti a složitosti navigace jsou v daném případě vždy na obtíž a jsou nežádoucí.

Jednoznačná navigace zahrnuje několik aspektů:

Struktura menu: Menu by mělo být strukturováno logicky a hierarchicky, což usnadní uživatelům orientaci na stránce. To znamená, že by mělo být jasné, které položky menu jsou hlavní, podřízené a kam vedou.
Jasné popisky: Odkazy a položky menu by měly mít jasné a informativní popisky, které přesně popisují obsah nebo cíl, na který odkazují. Popisky by měly být stručné, ale zároveň dostatečně výstižné.
Konzistence: Navigace by měla být konzistentní napříč celým webem, což znamená, že umístění, styl a chování menu by mělo být stejné na všech stránkách. To pomáhá uživatelům udržet orientaci a snadno se pohybovat po webu.
Dostupnost alternativních způsobů navigace: Kromě hlavního menu by měly být poskytnuty i další způsoby navigace, jako jsou vnitřní odkazy, navigační prvky na konci stránky, navigační tlačítka atd. To umožňuje uživatelům s různými potřebami najít informace různými způsoby.
Označení aktivní položky: Aktivní položka v menu by měla být jasně vizuálně odlišena nebo označena, aby uživatelé věděli, na které stránce se momentálně nacházejí.

Zajištění jednoznačné navigace na webových stránkách je klíčové pro zlepšení přístupnosti a použitelnosti pro všechny uživatele. Na inPage je hlavní menu generováno samotnou aplikací, a vy si pouze nastavíte texty a odkazy v menu. Samozřejmostí je možnost aktivovat navigační cestu, známou také jako "drobečková navigace", která výrazně usnadní pohyb na webu osobám se zdravotním handicapem. Viz obrázek výše.

Flexibilita layoutu

Je schopnost webových stránek přizpůsobit se různým zařízením, prohlížečům a preferencím uživatelů. Jedná se o zajištění toho, aby design a uspořádání stránek bylo responzivní a přizpůsobilo se velikostem obrazovek různých zařízení (např. mobilní telefony, tablety, počítače), a také se přizpůsobilo různým preferencím uživatelů (např. velikost písma, zvětšení textu).

Flexibilita layoutu přispívá k přístupnosti webových stránek několika způsoby:

Přizpůsobení pro různé zařízení: Responzivní design umožňuje webovým stránkám optimalizovat svůj layout a obsah pro různé typy zařízení, což zahrnuje mobilní telefony, tablety, počítače a další. To zajišťuje, že uživatelé budou mít příjemnou a konzistentní uživatelskou zkušenost bez ohledu na to, jaké zařízení používají.
Zlepšení použitelnosti: Flexibilní layout umožňuje uživatelům snadno navigovat po stránkách a nalézt požadované informace bez ohledu na to, jaké zařízení nebo prohlížeč používají. To zvyšuje přístupnost pro uživatele se zrakovým postižením nebo jinými potřebami, které mohou ovlivnit jejich schopnost používat určitá zařízení.
Podpora technologií asistivního software: Flexibilní layout umožňuje lepší integraci s technologiemi asistivního software, jako jsou screen readery nebo hlasoví prohlížeče, které mohou být použity uživateli se zrakovým postižením. To umožňuje těmto uživatelům snadný přístup k obsahu a navigaci po stránkách.
Optimalizace pro různé prohlížeče: Flexibilní layout umožňuje optimalizaci webových stránek pro různé prohlížeče a platformy, což zajišťuje konzistentní zobrazení a funkčnost napříč různými prostředími.

Zajištění flexibilního layoutu je důležitým krokem k zlepšení přístupnosti webových stránek a zajistí, že uživatelé budou mít příjemnou a efektivní uživatelskou zkušenost bez ohledu na jejich zařízení, prohlížeč nebo individuální potřeby.

Šablony vytvořené na inPage jsou plně responzivní a vytvářeny právě s ohledem na přístupnost webových stránek pro zdravotně postižené uživatele.

Užitečné online nástroje pro kontrolu přístupnosti webových stránek

Online nástroje pro kontrolu přístupnosti webových stránek slouží k automatickému testování a hodnocení přístupnosti webových stránek z hlediska různých standardů a směrnic. Hlavním cílem těchto nástrojů je identifikace problémů s přístupností a poskytnutí doporučení pro jejich opravu. Mezi hlavní funkce těchto nástrojů patří:

Hodnocení přístupnosti: Nástroje automaticky prozkoumávají webové stránky a identifikují prvky, které nejsou v souladu s přístupností, jako jsou chybějící popisky k obrázkům, nedostatečný kontrast, nedostupnost navigace pomocí klávesnice atd.
Generování zpráv a doporučení: Na základě analýzy nástroje generují zprávy obsahující identifikované problémy s přístupností a doporučení, jak je opravit. Tyto zprávy často obsahují i odkazy na relevantní zdroje a návody pro zlepšení přístupnosti.
Vizualizace problémů: Některé nástroje poskytují vizuální zobrazení nalezených problémů na webových stránkách, což usnadňuje identifikaci a porozumění povahy problémů.
Podpora různých standardů a směrnic: Nástroje mohou provádět analýzu přístupnosti podle různých standardů a směrnic, jako jsou například WCAG (Web Content Accessibility Guidelines), což umožňuje zajistit soulad s mezinárodně uznávanými normami přístupnosti.
Integrace do vývojářských nástrojů: Některé nástroje mohou být integrovány přímo do vývojářských prostředí nebo prohlížečů, což umožňuje provádět testování přístupnosti přímo během vývoje webových stránek.

Nástroje vhodné pro kontrolu přístupnosti vašeho webu

ACCESSIBILITY CHECKER: Poskytuje různé funkce, včetně analýzy webových stránek na základě různých úrovní přístupnosti, generování podrobných zpráv o nalezených problémech s přístupností a doporučení pro jejich opravu.
WAVE (Web Accessibility Evaluation Tool): Poskytuje podrobné hodnocení přístupnosti webových stránek včetně identifikace problémů a doporučení pro opravy. Webová aplikace je k dispozici zdarma.
axe DevTools: Tento nástroj poskytuje rozšíření pro prohlížeč, které umožňuje rychlé kontroly přístupnosti webových stránek přímo v prohlížeči. Je k dispozici pro Google Chrome a Firefox a je zdarma ke stažení.
Google Lighthouse: Je součástí nástrojů pro vývojáře v Google Chrome DevTools. Poskytuje kontrolu přístupnosti webových stránek spolu s dalšími užitečnými informacemi o výkonu, SEO a dalších aspektech. Stačí spustit audit přímo v prohlížeči.

Závěrem

V tomto článku jsme prozkoumali klíčové kroky a principy, které je třeba dodržovat při úpravě webových stránek, aby byly co nejvíce v souladu s pravidly pro přístupnost. Zvýšení přístupnosti webu není pouze morální imperativ, ale také strategický krok, který přináší mnoho výhod pro všechny uživatele.

Důležitost zajištění přístupnosti pro všechny uživatele, včetně těch se zdravotním postižením, je nezastupitelná. Použití dostupných nástrojů a technik, jako je zajištění navigace pomocí klávesnice, dostatečný kontrast textu a pozadí, poskytnutí alternativního textu k obrázkům, správná struktura HTML kódu a jasná navigace, může výrazně zlepšit použitelnost a dostupnost webových stránek.

Tým inPage
info@inpage.cz