Přístupnost webu: řešení pro nevidomé nebo pomocník pro zlepšení komplexní uživatelské přívětivosti?

Čvc 1, 2022 | Business, Optimalizace, UX/UI design

Přístupnost webu je často opomíjenou oblastí tvorby webových stránek a jiných digitálních produktů. Dobrý designér přitom ví, že zlepšení technických a vizuálních vlastností webu zvýší jeho hodnotu a použitelnost nejen pro handicapované jedince, ale i pro běžnou populaci. Jak se přístupnost webu definuje, analyzuje a testuje a jaká jsou její pravidla?

Definice přístupnosti webu

Podle definice MVČR lze za přístupnou považovat „internetovou stránku či mobilní aplikaci, kterou bude osoba se zdravotním postižením schopna (…) za pomocí asistivních technologií či specializovaných programů (…) efektivně používat.

Z pohledu UX designu nabízí o něco lepší definici Evropský parlament: „Přístupností internetových stránek se rozumí zajištění toho, aby byly na internetu snadno přístupné informace a funkce co nejširšímu spektru osob z hlediska jejich schopností.“

Prakticky to znamená, že se nezaměřujete pouze na osoby se zdravotním postižením, ale na celé spektrum lidí v různých situacích a s různou úrovní schopností využívat váš web.

Základní pravidla přístupného webu

Jaké podmínky musí splňovat dobře přístupný web? Čtyři základní principy přístupnosti stanovuje mezinárodní norma WCAG 2.0:

  1. Vnímatelnost – informace jsou prezentovány tak, aby je uživatelé byli schopni vnímat (například poskytnutí textové alternativy u netextových prvků stránky).
  2. Ovladatelnost – uživatelské rozhraní i navigační prvky jsou dobře ovladatelné (například možnost plného ovládání webu pomocí klávesnice, poskytnutí dostatku času uživatelům ke čtení a pochopení obsahu či kvalitní vyhledávání na webu).
  3. Srozumitelnost – vše na webu je srozumitelné (například tvorba čitelného a snadno pochopitelného textu či předvídatelné chování stránky).
  4. Robustnost – obsah je dostatečně robustní, aby mohl být spolehlivě interpretován širokou škálou přístupových zařízení včetně asistivních technologií.
dobré výsledky na monitoru počítače, zlepšení přístupnosti webu pomůže byznysu i uživatelům, článek přístupný web
Přístupný web pomáhá uživatelům a zlepšuje výsledky podnikání

Výhody přístupného webu

Stránka se snadnou přístupností přináší řadu výhod. Nejedná se přitom jen o splnění zákonů, ale můžete například získat náskok oproti konkurenci, která tuto oblast neřeší. Jaké jsou hlavní benefity přístupnosti?

Právní

Tento bod u nás nyní platí pouze pro veřejné instituce, avšak od roku 2025 by mělo vejít v platnost nařízení Europian Accessibility Act, které by se mělo vztahovat na všechny stránky i některé jiné produkty. Pokud plánujete vlastní web nebo v následujících letech chystáte redesign toho stávajícího, myslete na přístupnost už teď, abyste ji nemuseli řešit později.

Společenská odpovědnost

Umožněte všem uživatelům přístup k informacím. Pokud má vaše firma kodex společenské odpovědnosti a bere jej opravdu vážně, mělo by řešení přístupnosti webu být jeho součástí. Stejně tak například třídíte odpad kvůli životnímu prostředí nebo šetříte papír používáním elektronických formulářů. Vytvořte přístupný web, aby se uživatelé snadno zorientovali a dokázali dekódovat sdělované informace bez ohledu na postižení nebo momentální indispozice.

Podnikatelské

Zaměření se na uživatelskou přístupnost od začátku pomůže komplexně zvýšit použitelnost (digitálního) produktu a podpoří vaše PR. Promyšlenost webu má pozitivní vliv i na jeho výkon: přístupné weby získávají mnohem lepší výsledky v rámci optimalizace pro vyhledávače (SEO). Jde i o jeden z parametrů hodnocení Google, jak jsem popsala v článku Optimalizace rychlosti webu. Navíc se vyhnete potenciálním problémům na zahraničních trzích, kde mohou být pravidla nastavena přísněji.

Proč řešit přístupnost webu, i když nejste veřejná instituce?

Přestože se právní požadavky na přístupnost webů v Česku zatím týkají jen veřejných institucí, vyplatí se uživatelskou přívětivostí ve smyslu přístupnosti zabývat a web jí alespoň částečně přizpůsobit.

V Evropské unii žije odhadem 100 milionů lidí s nejrůznějšími postiženími (zdroj), řada z nich navíc trpí postižením kombinovaným. Do budoucna se přitom předpokládá nárůst tohoto čísla, zejména v kontextu stárnutí populace.

Zdravotní postižení však není zdaleka jediné omezení, které uživatelé mohou mít. Pokud se tedy zaměříte na přístupnost a splnění alespoň základních požadavků, v mnoha situacích tím pomůžete celé své cílové audienci, která rozhodně nezahrnuje jen nevidomé či neslyšící osoby.

žena u počítače, článek přísutpnost webu (přístupný web) není jen pro nevidomé uživatele
Přístupnost webu pomáhá široké škále uživatelů

Přístupný web není jen pro uživatele se ztrátou zraku

Spousta lidí má pocit, že přístupnost webu se týká pouze uživatelů s úplnou nebo částečnou ztrátou zraku; zejména těch, kteří k procházení webu používají odčítače nebo jiný software, který jim pomáhá informace na webu dekódovat.

Já alespoň základní standardy řeším při práci na každém projektu. Na přístupnost webu zpravidla přijde řeč ve chvíli, kdy dostanu zadání nebo grafické podklady, které dobré praxi neodpovídají. Od klientů pak často slyším, že slepí lidé nejsou jejich cílová skupina nebo že jejich služby či produkty nevidomí ani používat nemůžou. Tyto názory ale nemají opodstatnění; postižení je totiž mnohem více.

Kdo potřebuje přístupný web

Kvalitně zpracovaný a přístupný web by tedy měl přinášet užitek nejen běžným návštěvníkům, ale i všem uživatelům bez ohledu na postižení. Těmi můžou v běžném rozdělení být:

  1. Zraková – částečná či úplná ztráta zraku a celá škála zrakových vad včetně barvosleposti,
  2. Sluchová – částečná či úplná ztráta sluchu,
  3. Motorická – ochrnutí, třes, problémy s koordinací pohybu, snížení pohotovosti a přesnosti reakcí,
  4. Kognitivní – poruchy typu dyslexie, dysgrafie, ADHD, nesoustředěnost, autismus, problémy s pamětí,
  5. Duševní a psychická – poruchy nálady, úzkostné stavy, deprese, chronický stres.

Při designu webových stránek by se tedy měly brát v úvahu i další aspekty než jen ty, související se zrakem.

Omezení nejsou jen trvalá postižení

Při formulaci požadavků na webové stránky v jejich realizaci se zohledněním přístupnosti webu je dobré si uvědomit širší kontext, ve kterém se uživatelé můžou nacházet. Postižení totiž zdaleka nemusí být jen trvalá, tedy trvající celý život bez šance na zlepšení. Pro zvyšování uživatelského komfortu jsou důležitá i dočasná, situační a technická omezení.

1. Dočasná omezení

Dočasná omezení mohou být fyzické či psychické indispozice, které se zlepší v průběhu léčby či rekonvalesce. Můžou to být stavy typu stav po operaci oka, ucha, ruky v sádře či jiné zranění, které uživatele omezuje nebo mu znemožňuje používat web. Má-li uživatel zhoršený zrak kvůli operaci oka, může pro něj být problém dobře vidět text, který není v dostatečném kontrastu. Lze sem zařadit také vyhoření a ostatní těžké životní situace, ovlivňující pozornost a schopnost vnímat informace.

2. Situační omezení

U tohoto omezení se nejedná ani tak o postižení, jako spíš o snížené schopnosti interagovat s digitálním produktem, vlivem aktuální situace. Patří sem např. situace, kdy stojíte na zastávce a slunce svítí na displej telefonu; uživatel nic nepřečte, protože má stránka nevyhovující kontrast nebo příliš malé písmo pro mobilní zařízení. V hlučném prostředí nemusí slyšet zvuk videa nebo hovor. Nebo je jednoduše přepracovaný nebo nevyspalý a nemůže se kvůli tomu soustředit.

žena se dívá na mobil, slunce svítí zezadu, článek přístupnost webu a kontrast textu vůči pozadí
Zajištění dostatečného kontrastu písma vůči pozadí pomůže zvýšit čitelnost webu pro všechny uživatele

3. Technická omezení

Nejen zdravotní problémy mohou uživatele limitovat. Ne všichni totiž používají nejmodernější technické vybavení. Omezení tak mohou plynout také z pomalého připojení, pomalého procesoru na přístroji, nedostatečného rozlišení displeje a často také nízké počítačové gramotnosti uživatele, například seniora.

Formální požadavky přístupnosti webu a standard WCAG

Formální požadavky na přístupný web shrnuje standard WCAG (Web Content Accessibility Guidelines), který ve verzi 2.1 najdete například tady nebo v češtině zde.

WCAG poskytuje širokou škálu doporučení pro tvorbu přístupnějšího webu nejen pro uživatele s indispozicemi. Zabývá se také přístupností na všech typech zařízení, tedy na desktopech, laptopech, tabletech, mobilních zařízeních a wearables (typicky chytré hodinky).

Dalšího povedeného průvodce tímto tématem najdete v češtině v PDF zde.

5 doporučení pro přístupný web

Formální stadardy jsou poměrně složité a doporučení se týkají zejména technických parametrů webů. Pokud standardům nerozumíte, nechce se vám je studovat nebo je jednoduše nepotřebujete splňovat, ale přesto chcete svůj web přiblížit všem uživatelům bez ohledu na postižení či omezení, můžete jako základ použít těchto 5 doporučení.

1. Struktura webu

Používejte co nejvýstižnější nadpisy. Každá stránka by měla mít maximálně jeden hlavní titulek typu H1. Důležité je i další dělení textu na menší odstavce, bloky či sekce, opatřené nadpisy nižšího řádu (H2 až H6) v logickém sledu.

Přehledná a logická struktura webové stránky je výhodná nejen kvůli lepší přístupnosti a schopnosti zorientovat se na webu s použitím asistivních technologií, ale i z pohledu SEO (optimalizace pro vyhledávače).

2. Kontrast textu a pozadí

Vhodný kontrast z pohledu designu webů i grafiky obecně stanovují normy, jimiž doporučuji se řídit. Poměr kontrastu textu a interaktivních prvků by měl být alespoň 4,5:1, u nadpisů alespoň 3:1.

Kontrast textu a pozadí je vhodné řešit i kvůli barvosleposti, kterou podle Clinton Eye Associates trpí téměř 8% lidí. Nejčastější typ barvosleposti se týká červené a zelené barvy. Vyhněte se proto použití červené na zeleném pozadí a naopak. Další detaily ke kontrastu a použití barev na webové stránce si přečtěte (v angličtině) na stránce WebAIM nebo si kontrast otestujte např. zde.

3. Srozumitelný jazyk a logika informací  

Kromě vhodných barev mají velkou váhu i všechny texty na vašem webu. To se týká i nápisů na tlačítkách, chybových hlášení nebo třeba textů v košíku e-shopu. Pokud si na textování webu sami netroufáte, nechte si obsah zpracovat odborníkem. Chcete-li se do psaní pustit sami, držte se těchto základních pravidel:

  • buďte struční, výstižní a nebojte se škrtat,
  • vyhněte se dlouhým souvislým blokům textu,
  • používejte pozitivní tón,
  • věty, popisující činnost, kterou vyžadujete od uživatele, začněte výstižným slovesem,
  • používejte konzistentní a srozumitelný jazyk napříč celým webem,
  • vynechte žargon a brandová označení,
  • pište v přítomném čase a v činném rodě,
  • používejte čísla (2 místo dva),
  • jasně otextujte tlačítka a další interaktivní prvky.

Chcete-li si detailněji prostudovat pravidla efektivního psaní textů, která můžete kromě uživatelského rozhraní aplikace či webu aplikovat při psaní obecně, nakoukněte na tuto stránku (v angličtině). 

3. Alt popisky

Alternativní (alt) popisky se často používají pro SEO. Umisťují se do nich klíčová slova, na něž se má daný obrázek zobrazit ve vyhledávačích. To však není jejich primárním cílem. Měly by především umožnit nevidomým či slabozrakým uživatelům se čtečkou (odčítačem) pochopit, co je na obrázku.

Jak tedy alt popisky psát? Texty by měly být hlavně funkční. To znamená, že popisují přesně to, co je na obrázku tak, aby si nevidomý člověk lépe představil obsah obrázku.

muž tvoří wireframe na tabletu, jak psát alt popisky, článek přístupnost webu

Pokud berete alt popisky jako nástroj pro SEO a obrázek s počítačem popíšete stylem „nabídka výroby webových stránek, SEO, rychlý servis“, budete se možná lépe zobrazovat ve výsledcích vyhledávání, ale přístupnosti nepomůžete. Lepší popisek obrázku níže by byl něco jako „muž tvoří wireframe na tabletu“.

Ohledně délky alt popisků nepanuje plná shoda: někteří odborníci doporučují přibližně 50 znaků včetně mezer, jiní zase 150 znaků. Nejlepší je podle mého názoru popisek psát přibližně na 120 znaků včetně mezer.

5. Videa a obrázky

U videí rozhodně vypínejte autoplay, tedy automatické přehrávání. Nejen, že působí rušivě, ale také významně zpomalují načítání webu. Dobrou prací je také možnost stopnout a zapnout video. Samozřejmostí by mělo být varování u videí s obsahem či zpracováním, které může uživatele rozrušit (např. způsobit úzkosti nebo záchvat kvůli fotosenzitivitě u epileptiků).

Videa by také měla zahrnovat captions – titulky, které je ideálně možné i vypnout. Nejde jen o standardy, ale i o dobrou praxi: jsou situace, kdy uživatel nechce mít zvuk nahlas, ale čte si k videu titulky.

U obrázků je dobré myslet i na to, že by neměly nést nějakou zásadní informaci, o kterou by uživatelé čteček přišli. Pokud by tomu tak bylo, zmiňte ji vždy v popisku obrázku nebo v rámci vysvětlujícího textu, aby k ní melí přístup i uživatelé, kteří obsah obrázku nevidí.

Přístupný web pomáhá všem uživatelům

Zaměření se na přístupnost webu obvykle pomůže zvýšit komplexní uživatelskou zkušenost pro všechny uživatele:

  • Díky titulkům u videa jej mohou uživatelé sledovat i bez sluchátek a na místech, kde nechtějí rušit (hromadné dopravní prostředky, kanceláře).
  • Dostatečný kontrast mezi texty a pozadím a vhodná velikost fontu zajistí snazší čitelnost pro každého, například i při chůzi či v autě.
  • Logická struktura a správná navigace pomůže každému uživateli snadnější se zorientovat na vašem webu, zejména pokud je složitější.
  • Správně řazené a vizuálně odlišené nadpisy pomůžou uživatelům pochopit texty i tématické celky, ale také vyhledávačům při indexování vašich stránek.
  • Srozumitelná a konzistentní komunikace pomůže všem návštěvníkům pochopit, co nabízíte, aniž by se museli probírat tunou brandových označení a odborných výrazů, kterým nerozumí.

Analýza přístupnosti webu a její testování

Přístupnost vašeho webu můžete ověřit několika způsoby od jednoduchých testů zdarma přes komplexnější uživatelské testování až po formální audity.

Testy zdarma: WAVE

Pro základní testování zdarma můžete vyzkoušet WAVE (Web Accessibility Evaluation Tool). Jedná se o skupinu nástrojů, určených ke zlepšení přístupnosti webu. WAVE vás upozorní na nejrůznější problémy webu a navede vás k jejich řešení. Ideální pro začátek, doporučení nástroje splňují normy a získáte konkrétní tipy ke zlepšení.

webaim test google - výsledky, článek přístupnost webu (přístupný web)
Jak vypadá test z wave.webaim.org – testování google.com

Uživatelské testování přístupnosti webu

Při reálném uživatelském testování přístupnosti webu oslovíte skupinu lidí s nejrůznějším postižením, zadáte jim úkoly, které na webu mají provést a vyhodnotíte zpětnou vazbu. Cílem je ověřit, že jsou lidé skutečně schopni s vaší stránkou či digitálním produktem interagovat a dozví se na ní to, co potřebují. 

Formální audity

Pro weby, které podléhají zákonům o přístupnosti (weby měst, škol, nemocnic a další) je nejlepší profesionální audit přístupnosti tak, aby stránka naplňovala zejména právní standardy. Hledáte-li ověřeného auditora, rozhodně doporučuji Tyflokabinet. 

Přístupnosti se nebojte a aktivně ji řešte

Řešení pro přístupnost webu se rozhodně nemusíte obávat. Existuje celá řada nástrojů, které vám s touto oblastí efektivně pomohou. Použijte tipy z tohoto článku a pokud si přece jen nejste jisti, jak u svého webu pojmout přístupnost a kde vůbec začít, neváhejte mne kontaktovat