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.
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ř.
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? 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í. Ú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ý. 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: 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: 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? 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. Č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“. 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.
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í. Praktický Inspirující Zábavný Nic moc
1) Nemožnost obsloužit web klávesnicí
2) Nevhodný barevný kontrast
3) Automaticky spouštěná média
4) Necitlivě zvolené carousely
5) Špatně strukturované texty
6) Obrázky bez alt textů
7) Nesrozumitelné formuláře
Dodržujte metodiky
Jak se vám článek líbil?
4
1
0
1
