7 nejčastějších problémů, které brání přístupnosti webu

Jiří Hochman 14. 05. 2019

Jsou vaše stránky přístupné širokému okruhu návštěvníků, nebo některé prvky brání snadnému užívání? Projděte si nejčastější problémy, které Modrý duch nachází při analýze přístupnosti webu.

Audit přístupnosti webu ocení nejen hendikepovaní lidé

Návštěvnost webu a jeho snadná použitelnost bývá jedním z klíčových předpokladů k tomu, aby stránky plnily své cíle. Na světě ale existuje mnoho lidí, kteří jsou při surfování po internetu nějakým způsobem znevýhodněni. Podobně jako u kancelářských budov, úřadů nebo stanic metra by mělo být v zájmu majitelů těmto návštěvníkům odstranit veškeré překážky a umožnit jim tak nejen přístup „do objektu“, ale také bezproblémový pohyb uvnitř. V on-line světě mluvíme o přístupnosti webových stránek, která je úkolem především pro webdesignera. Ten by měl navrhovat web s ohledem na lidi, kteří mají:

zraková omezení (částečně nebo zcela neschopní vidět či rozeznávat barvy),
sluchová postižení, snížená schopnost slyšet,
snížené motorické schopnosti (lidé s omezenou možností pohybu, například ovládat myš),
fotosenzitivní záchvaty (epilepsie),
kognitivní postižení (uživatelé s dyslexií nebo demencí).

Zajímavou cílovým segmentem bývají také senioři. Některé osoby ze zmíněných skupin využívají různá zařízení nebo softwarové nástroje, které jim umožňují webový obsah číst (např. čtečky pro nevidomé). Je tedy důležité zajistit přístupnost webu i vzhledem k těmto zařízením.

Zpřístupnění stránek nemá „pouze“ sociální, ale také obchodní dopad. Pokud se web dobře používá a lidé na něm snadno nacházejí to, co hledají, uvítají to nejen výše uvedení uživatelé, ale také všichni ostatní. Vyšší návštěvnost a větší uživatelská přívětivost se následně projeví na snazší dohledatelnosti stránek ve vyhledávačích.

Komplexní analýza přístupnosti webu (a následné zásahy, které web zpřístupní) je prací pro specialisty. Na základě následujících 7 nejčastějších problémů si ale zvládnete sami zkontrolovat alespoň některé prvky vašich stránek. Které to jsou?

1) Nemožnost obsloužit web klávesnicí

Jedna z klíčových vlastností dobře přístupného webu je jeho snadná obsluha i bez použití myši. Pohybovat se po stránkách, vybírat tlačítka a „proklikávat“ se na externí odkazy nebo vyplňovat webové formuláře musí uživatel zvládnout pouze pomocí klávesnice, typicky za využití tabulátoru, enteru, šipek nebo mezerníku. Aktuálně používaný prvek by měl být jednoznačně rozpoznatelný (ohraničené tlačítko, kurzor v políčku formuláře). Kromě vhodného nakódování lze používání webu klávesnicí usnadnit také správnou strukturou navigace. Pořadí prvků v menu tedy musí být logické a maximálně intuitivní.

2) Nevhodný barevný kontrast

Úkolem pro designera při tvorbě webu je zvolit takové barvy, které vytvářejí funkční barevný kontrast. Citlivá volba odstínů a dostatečně kontrastní tmavé písmo na světlém podkladu zpřístupňují web nejen barvoslepým, ale i lidem bez zrakových potíží í – některé barvy či barevné kombinace mohou způsobovat únavu očí nebo bolest hlavy. Nevhodný kontrast vyjde najevo i na mobilním zařízení (stačí si web prohlížet proti slunci). V jednoduchém on-line nástroji Contrast Checker se rovnou můžete podívat, jak váš web vidí barvoslepí, a snadno ověřit, jestli je kontrast na vašem webu dostatečný.

3) Automaticky spouštěná média

Video možná strhává pozornost a kraluje obsahovému marketingu, ale pokud se automaticky spustí na landing page, je pro uživatele spíše matoucí. Při přehrávání na mobilním telefonu nechtěný videoobsah rychleji vybíjí baterii a někdy je obtížné (nebo přímo nemožné) jej přeskočit. Necitlivé použití může u fotosenzitivních lidí vést až k epileptickému záchvatu. Stahování videa nebo zvukového doprovodu navíc prodlužuje dobu načítání webu.

Co se přístupnosti webu týče, použití automaticky spouštěných médií se vůbec nedoporučuje. Jestliže se bez nich na své on-line prezentaci přece jen neobejdete, řiďte se následujícími pravidly:

umožněte zastavení přehrávání stisknutím Esc na klávesnici,
nechte přehrát jeden až dva cykly animace a pak video zastavte,
opatřete video tlačítkem „Přehrát znovu“,
nepřidávejte zvukový doprovod, pokud tedy není pro výsledné sdělení nezbytně nutný (případně použijte titulky které jej doplní),
pokud musíte videa opatřit zvukovým doprovodem, udělejte to ohleduplně a dejte prostor k zastavení videa i slepým uživatelům (např. pauzou s dostatkem času na nalezení tlačítka „Stop“).

4) Necitlivě zvolené carousely

Negativní emoce u návštěvníků vyvolávají pop-up okna a carousely (slideshow, slidery apod.). I zde platí, že je lepší se těmto prvkům vyhnout. Pokud se vám jejich použití zdá nezbytné, snažte se ctít alespoň soubor základních zásad:

uživatel musí být schopen slideshow zastavit (protože se snímky mění příliš rychle na to, aby vstřebal jejich obsah),
listování mezi jednotlivými slidy musí být ovladatelné pouze klávesnicí,
změnu mezi slidy musí umět zachytit i čtečky pro nevidomé.

Pop-up okna by nikdy neměla být tím prvním, co na uživatele po načtení vyskočí dřív, než si udělá jasno o vaší nabídce. Z hlediska UX je výhodnější, pokud se objeví s jistou časovou prodlevou po načtení, po proscrollování určité části stránky (ideální pozici je nejlepší testovat), nebo při odchodu uživatele z webu.

Nemohl by váš web ještě lépe sloužit hendikepovaným, seniorům nebo mobilním uživatelům?

Chci audit přístupnosti webu

5) Špatně strukturované texty

Obsah webu zpřístupníte širšímu okruhu uživatelů dobrým html strukturováním a využíváním nadpisů. Jasně formulované titulky musí být pochopitelné pro vyhledávače, uživatele i čtečky pro nevidomé. Každá stránka by měla mít alespoň jeden H1 nadpis, vhodné je použít více nadpisů H2. Při dalším dělení je nutné pokračovat v návaznosti a postupovat v pořadí H3, H4 a tak dále. U všech nadpisů i podnadpisů nezapomínejte ctít elementární zásady SEO a kde je to možné, přirozeně v textu používejte klíčová slova.

6) Obrázky bez alt textů

Čtečky pro zrakově postižené využívají alternativní text u obrázků, který si vyhodnocují také vyhledávače. Z hlediska SEO je tedy vhodné každý obrázek opatřit krátkou větou, která jej jednoduše popíše za využití klíčového slova. Jestliže je pro vaše podnikání důležitá lokalita (školy, restaurace, kurzy či jiné služby), pracujte v alt textech také s místními názvy. Přítomnost alt textů na webu si ověříte kliknutím pravým tlačítkem na obrázek a volbou možnosti „Prozkoumat“.

7) Nesrozumitelné formuláře

Zásadní z hlediska konverzí je patřičná přístupnost webových formulářů, které by měly být jednoduché a intuitivní: uživatel musí dostat zřetelné instrukce k vyplnění, které by pak měl zvládnout pouze za využití klávesnice (viz první bod). To je ale úkol hlavně pro kodéra. Formuláře z hlediska UX už Modrý duch detailněji rozebral v článku 10 tipů, jak zjednodušit otravné formuláře.

Dodržujte metodiky

Myslíte to s přístupností vážně? Neváhejte se ponořit do oficiálních pravidel, metodik a zákonů o přístupnosti, které jsou na internetu snadno dohledatelné. Někdejší Ministerstvo informatiky ČR vypracovalo pro tuzemské stránky Pravidla přístupnosti webu, Sjednocená organizace nevidomých a slabozrakých ČR už v roce 2000 rozběhla projekt Blind Friendly Web. Kromě toho existuje celá řada mezinárodních metodik, z nichž nejrozšířenější jsou Web Content Accessibility Guidelines (WCAG) organizace World Wide Web Consortium (W3C). Z těch ostatně vychází i zatím nejnovější český Zákon č. 99/2019 Sb.: Zákon o přístupnosti webových stránek a mobilních aplikací.