Přístupnost není charita - nepřístupný web je ztracená obchodní příležitost

Děkuji všem, kteří přišli na mou stejnojmennou přednášku na letošní WebExpo. Zde je slíbený článek se stručným shrnutím prezentace, komentovanými slajdy a také s odkazy na další zdroje informací.

Přístupnost je bohužel stále často vnímána jako záležitost jen těch několika málo nevidomých, a proto přijde řadě lidí nezajímavá. Během prezentace jsem na nělikolika příkladech ze života a případových studiích ukázal, jak je přístupnost velmi úzce provázána s dalšími oblastmi webu a jak pomáhá skutečně všem uživatelům.

Pokud vytvoříte na svém webu takové bariéry, že na něm není schopen návštěvník nakoupit, tak se nepřístupným webem připravujete o zisk a kazíte si reputaci. To jsme si ukázali na zkušenostech Michala a Davida. Takže až někde uvidíte Michala Davida, vzpomeňte si na přístupnost ;-)

Společnosti Legal & General Group a Tesco si vytvořením přístupného webu snížily náklady na jeho provoz, zvýšily zisky a zlepšily své PR v očích veřejnosti. Stejné výhody může přístupnost přinést i vám.

Ukázali jsme si také, že přístupnost nemusí být složitá a nákladná. Často stačí provést jen několik málo úprav a přístupnost webu můžeme výrazně zlepšit.

Přístupnostní minimum

• Zajistěte ovladatelnost svého webu z klávesnice.
• Strukturujte obsah webu pomocí nadpisů.
• U grafických prvků, které nesou významovou informaci, definujte relevantní textovou alternativu.
• Dbejte na dostatečný barevný kontrast.

Pokud se chcete o přístupnosti dozvědět více a nechcete studovat komplexní a mnohastránkové metodiky přístupnosti, přečtěte si alespoň můj článek na Zdrojáku 15 cest k lepší přístupnosti vašeho webu.

Komentované slajdy k prezentaci

Další informace

• Přístupnost není charita - anotace přednášky na webu WebExpa
• Case Study of Accessibility Benefits: Legal & General Group (L&G)
• Case Study of Accessibility Benefits: Tesco
• Jak k nám loni nepřiplul Ježíšek po Vltava.cz
• Osnovy fulltextového vyhledávání Seznamu pomáhají i přístupnosti
• Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod

Osnovy fulltextového vyhledávání Seznamu pomáhají i přístupnosti

Osnovy fulltextového vyhledávání Seznamu vám pomohou nejen zvýšit míru prokliku, ale i zlepší přístupnost. O co jde?

Pokud uvedete dostatečné množství oddílů textu na stránce rozumnými (smysluplnými) nadpisy, z nadpisů uděláte kotvy (přiřadíte jim jednoznačné ID) a odkážete na ně pomocí vnitřních odkazů ve zdrojovém HTML kódu stránky, pak se výběr odkazů na podkapitoly zobrazí v přirozených výsledcích vyhledávání na Seznamu. Vyzkoušejte si to například na dotazu [freddie mercury site:wikipedia.org]

A jak s tím souvisí přístupnost?

O tom, že správné vyznačování nadpisů patří dnes k základním kamenům přístupnosti, netřeba hovořit. Pokud jste doposud nadpisy na stránce moc neřešili, pak s příchodem osnov máte o důvod víc se jimi zabývat a smysluplné nadpisy na stránce používat. Způsob, jakým se osnovy tvoří, je také přínosný pro uživatele, kteří ovládají počítač pouze z klávesnice, ale nemají k dispozici žádnou asistivní technologii, která by jim umožnila rychlý a efektivní pohyb po stránce. Možnost rychlého přesunu na jednotlivé části stránky tedy určitě přivítají. Dalším benefitem je pak jednoznačně strukturování textu, kdy se u takto vytvořeného textu dá předpokládat, že bude pro návštěvníky přehlednější a čitelnější.

Jak na osnovy?

• Umístěte krátké a výstižné nadpisy nad jednotlivé části stránky.
• Každému nadpisu přiřaďte jednoznačné ID.
• Na nadpisy odkažte pomocí odkazů uvnitř samotné stránky.

Osobně jsem velmi rád za další pěkný a praktický příklad toho, jak je přístupnost velmi úzce provázána s dalšími oblastmi tvorby webu.

Související odkazy

• Osnovy: vybrané odkazy dovnitř dokumentu
• Proč Osnovy fulltextového vyhledávání Seznamu pomohou víc cílové stránce, než vyhledávači
• Osnovy na Seznamu vám zvýší CTR

Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod

Strukturování webové stránky pomocí nadpisů patří k základním kamenům moderního pojetí přístupnosti. Naštěstí už je tento požadavek velmi dobře zapsán mezi tvůrci webových stránek a najít dnes webovou stránku, který není alespoň nějak strukturována pomocí nadpisů, je docela kumšt. I když výjimky se najdou.

S kolegy jsme se proto na tuto oblast zaměřili a připravili praktický návod, jak si dnes s touto z hlediska přístupnosti naprosto zásadní věcí poradit.

Aby strukturování pomocí nadpisů bylo handicapovaným uživatelům opravdu k užitku, je třeba dodržovat určitá pravidla. Tak jako v jiných oblastech přístupnosti, ani zde neexistuje jediné správné řešení, takže níže uvedené berte jako doporučení a naši best practice, která se může časem změnit - například po rozšíření landmarků z WAI-ARIA již ztratí význam pomocné skryté nadpisy nad dalšími částmi stránky.

Co je tedy třeba dodržet?

• Pro vyznačení nadpisů použijte k tomu určené značky h1 až h6. Jen tak budou moci asistivní technologie s nadpisy pracovat a zpřístupnit je uživatelům. Pokud nadpisy označíte jako nastylované divy či spany, asistivní technologie je budou považovat za prostý text a ne za nadpis a takto jej i budou svému uživateli prezentovat.
• Při vyznačování nadpisů je třeba brát v potaz jejich důležitost - čím vyšší důležitost nadpisu, tím vyšší úroveň nadpisu.
• Důležitá je i hierarchie nadpisů - specifikace HTML ani metodika WCAG 2.0 ji sice striktně nevyžadují, ale určitě je k užitku - uživatelé screenreaderů podle ní poznají, jaká je závislost mezi jednotlivými nadpisy. Pokud například vyznačíte nadpis sekce Aktuality jako h2, je vhodné nadpisy jednotlivých aktualit vyznačit jako h3, aby bylo zřejmé, že se jedná o nadpisy podřízené nadpisu Aktuality.
• Vhodně skrytými pomocnými nadpisy je užitečné vyznačit i další části stránky (menu, vyhledávání, atp.). Tento požadavek vychází z požadavků uživatelů screenreaderů na snadnou dostupnost nejen hlavního obsahu stránky, ale i jejích dalších částí, které jsou pro něj například po dočtení článku velmi důležité. Pomocné nadpisy je vhodné vyznačit takovou úrovní nadpisů, která se nevyskytuje v hlavním obsahu stránky - šikovným příkladem může být třeba Wikipedia, která pro pomocné nadpisy používá nadpisy 5. úrovně. Důvod je prostý - aby se to uživateli screenreaderu nepletlo ;-) Pokud pro pomocné nadpisy použijete jinou úroveň, uživatel bude vědět, že to je nadpis některé z dalších sekcí webu a ne odstavce v hlavním obsahu stránky.
• Mezi značky a uzavřete pouze relevantní část textu - tedy to, co je opravdu nadpisem. Nemělo by tam být nic, co nadpis není - a už vůbec ne na jeho začátku. Jestliže jsem v předchozím bodě Wikipedii pochválil, tak zde ji musím dát jako nevhodný příklad. Zakomponováním řetězce [editovat] na začátek většiny nadpisů v obsahové části stránky velmi komplikuje používání nadpisů uživatelům screenreaderů.
• Zdržuje to (nevidomý slyší slovo editovat před každým nadpisem), v tomto případě je navíc celý nadpis ve screenreaderu JAWS roztažený na 3 řádky:
  • na prvním řádku hlásí: nadpis úrovně 2 hranatá závorka
  • na druhém: nadpis úrovně 2 odkaz editovat hranatá zavřít
  • na třetím: nadpis úrovně 2 text nadpisu
• Znemožňuje používání počátečních písmen pro rychlý přesun na konkrétní nadpis.

Ujistěte se také, že obsah spadající pod nadpis obsahuje informace očekávané z nadpisu, tj. neobsahuje např. odkazy, které patří do jiné sekce stránky nebo které mají být uvozeny zcela novým nadpisem. Rovněž se přesvědčte, že obsah spadající pod daný nadpis mu nepředchází. Příkladem může být například ilustrační foto, které slouží jako odkaz na detail článku, ale v kódu je umístěno před nadpisem.

A jaké jsou vaše zkušenosti se strukturováním webové stránky nadpisy? Dodržujete výše uvedené či strukturujete webovou stránku pomocí nadpisů jinak? Podělte se o své názory v komentářích.

Související odkazy

• Chybka ve skrývání obsahu stránky a jak ji opravit

HeadingsMap - testování struktury nadpisů na stránce

HeadingsMap je nástroj pro testování strukturování stránky pomocí nadpisů. Jedná se o doplněk do FireFoxu, který zobrazí strukturu nadpisů včetně jejich úrovně a případných chyb ve struktuře.

Jeho použití je velmi jednoduché. Po standardní instalaci se objeví v levém dolním rohu prohlížeče ikonka, která slouží k aktivaci doplňku. V případě, že stránka obsahuje nějaké nadpisy, jsou tyto nadpisy přehledně zobrazeny ve stromové struktuře v levé části prohlížeče. Položky jsou aktivní, tzn. po kliknutí je obsah stránky odrolován tak, aby nadpis byl vidět a současně je zvýrazněn. HeadingsMap tedy může sloužit nejen k testování, ale i k běžnému použití jako osnova stránky.

HeadingsMap umí upozornit na potencionální nedostatky ve struktuře nadpisů (na stránce například určité úrovně nadpisů úplně chybí či po nadpisu první úrovně následují nadpisy třeba až třetí či čtvrté úrovně). Sympatické je, že doplněk umí pracovat i se skrytými nadpisy a s nadpisy v rámcích, takže uživateli žádný nadpis skutečně neunikne.

Zajímavá debata na téma používání nadpisů proběhla nedávno na 456 Berea Street pod článkem Headings, heading hierarchy, and document outlines.

Děkuji Oldovi Vetešníkovi za upozornění na tento zajímavý nástroj.