Mezi tvůrci webů je celá řada těch, kteří mají chuť pro přístupnost něco udělat, ale nechce se jim studovat spousty materiálů, které se touto tématikou zabývají a vybírat z nich to nejdůležitější. Což je celkem pochopitelné – obzvlášť u těch, kteří se přístupností přímo nezabývají, ale čas od času na ni chtě nechtě narazí. Přístupnost se od roku 1999, kdy byla vydána metodika WCAG 1.0, vyvinula v samostatnou a obsahově velmi bohatou disciplínu a když se jí člověk chce věnovat do detailů, je to de facto práce na plný úvazek.

Pokud ale chceme, aby se přístupnost stala opravdu běžnou součástí tvorby webu (což je ideální stav), je třeba nabídnout tvůrcům webů jednoduché a srozumitelné návody, kterým budou rozumět i bez toho, aniž by studovali desítky stran materiálů, metodik, pročítali blogy, atp. Ty jistě mají svou nezastupitelnou roli v případech, kdy hledáme detailní řešení nějakého dílčího problému, potřebujeme vědět, jak fungují asistivní technologie či jak uživatelé se zdravotním handicapem používají web, atp. Přiznejme si ale, že drtivá většina tvůrců webů přivítá jednoduchý návod, obsahující vše důležité, který si například mohou vytisknout vedle monitoru a mít jej pořád na očích.

Přístupnost není ve své podstatě složitá a v mnoha případech jde ruku v ruce s tvorbou kvalitního  webu. Povinností odborníků na přístupnost je zajistit, aby požadavky na přístupnost a jejich implementace byla co nejjednodušší. Na druhou stranu není náhodou, že metodiky přístupnosti zpravidla obsahují několik desítek požadavků a vybrat z nich opravdu ty nejdůležitější není úkol tak jednoduchý, jak by se na první pohled mohlo zdát. A protože jsem si sám na tento úkol úplně netroufal, požádal jsem o pomoc kolegy z týmu, kteří byli tak laskavi (děkuji) a napsali mi, co z hlediska přístupnosti považují na nejdůležitější, a opřel se také o některé zahraniční průzkumy mezi handicapovanými uživateli.

Pojďme se tedy společně podívat na 15 technik, které jsou důležité pro vytvoření přístupné webové stránky, a které jsme vybrali jako ty, co se dají relativně snadno implementovat, a současně jejich implementace má za následek výrazné zlepšení přístupnosti.

1. Vytvořte konzistentní navigaci a strukturu

Pokud je v rámci stejného webu na jedné stránce menu na začátku stránky a má nadpis H2 Menu, na druhé stránce je někde u konce a jeho nadpis je H4 Navigace a na třetí menu nadpisem uvozeno není vůbec, musí se nevidomý uživatel při procházení webu s každou stránkou seznamovat znovu od začátku. Což ho pochopitelně zdržuje a komplikuje mu procházení webové prezentace. Kromě kódu je důležitá i vizuální stránka věci – jednotlivé prvky  webové stránky by měly být umístěny na stejných místech a měly by od sebe být zřetelně odděleny. Všechny stránky jednoho webu by tedy měly mít jednotnou strukturu z hlediska kódu i vizuálního zobrazení.

Autor: Radek Pavlíček

Ukázka konzistentního záhlaví, navigace a vyhledávání na webu yourdolphin.com.

2. Strukturujte obsah stránky pomocí nadpisů

Nadpisy jsou pro řadu handicapovaných uživatelů nejdůležitější navigační prvek na webových stránkách. Pokud jsou na správných místech, tedy vždy tam, kde začíná další část stránky, a pokud jsou výstižné a srozumitelné, je pro ně pohyb po stránce mnohem rychlejší a snazší.

Vyznačte proto nadpisy značkami h1 až h6 s ohledem na jejich důležitost. Nezapomeňte na vhodně skryté pomocné nadpisy nad důležitými částmi stránky.

Autor: Radek Pavlíček

Ukázka strukturování stránky pomocí nadpisů na webu zdrojak.cz.

Další informace k tomuto tématu

1. Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod
2. WCAG 2.0 – Vnímatelnost a přizpůsobitelnost

3. Tam, kde je to potřeba, používejte seznamy

Celá řada informací, která se vyskytuje na webových stránkách, má charakter seznamu. Nejedná se pouze o navigační části webu, kde se se seznamy setkáváme nejčastěji, ale dost často i o informace v obsahové části webu. Vyznačení relevantních částí textu pomocí značek pro seznamy (ul, ol, li, dl, dt, dd) totiž přináší uživatelům celou řadu výhod:

1. poznají, kde seznam začíná a kde končí a mají tak představu o tom, které položky patří logicky k sobě,
2. poznají, kolik má seznam položek a jak je rozsáhlý (to se hodí obzvlášť u navigace),
3. seznamy lze do sebe i vnořovat – díky tomu pak může uživatel poznat i závislosti mezi jednotlivými položkami,
4. asistivní technologie (tj. programy, které uživatelům s handicapem pomáhají při práci s webem) dnes umí informovat o struktuře a typu seznamů a umožňují snazší navigaci mezi položkami seznamů. Například nevidomému uživateli se tak s informacemi v seznamu pracuje mnohem lépe, než kdyby se jednalo o ty samé informace ve formě prostého textu, protože má kromě obsahu k dispozici i informaci o struktuře.

4. Zajistěte dostatečný barevný kontrast

Dostatečný barevný kontrast mezi barvami popředí a pozadí textu (či textu v obrázku), který nese významové sdělení, výrazně zlepšuje čitelnost. Dbejte proto na to, aby vše, co je na stránce opravdu důležité, bylo dostatečně kontrastní. Pro měření dostatečného barevného kontrastu existuje celá řada algoritmů a nástrojů. Ten aktuální je algoritmus světelnosti, pro testování doporučuji desktopový Colour Contrast Analyzer nebo online CheckMyColours­.com (tady jen pozor při interpretaci výsledků). Na pozadí také nepoužívejte vzorek, který snižuje čitelnost textu.

Barvy také použijte k zvýraznění či odlišení jednotlivých částí webu – řadě uživatelů toto odlišení pomáhá při pochopení rozložení webové stránky.

Autor: Radek Pavlíček

Rozhraní programu Colour Contrast Analyser.

5. Nespoléhejte se pouze na barvu a vizuální umístění prvků na stránce.

Celá řada uživatelů nemá možnost vnímat web v podobě, v jaké je standardně zobrazen v prohlížeči – ať už kvůli zdravotním omezením, použité asistivní technologii či proto, že používají zařízení, které zobrazování barev nepodporuje (například Kindle). Proto není vhodné použít pro zvýraznění důležitého textu pouze barvu, odlišovat odkazy od okolního textu pouze barvou, nebo se v textu odvolávat na “druhý odkaz v pravém sloupci uprostřed.”

Pokud mají vizuální aspekty stránky důležitou informační hodnotu, musí být vždy uživatelům tyto informace k dispozici i jiným způsobem, například pomocí běžného textu nebo sémantickými (významovými) značkami zdrojového kódu.

Autor: Radek Pavlíček

Obvody jsou odlišeny pouze barvou, při zobrazení ve stupních šedi tak není možné jednotlivé obvody od sebe odlišit.

6. Definujte dostatečnou výchozí velikost písma a umožněte i jeho zvětšování.

Dobrá čitelnost textu patří k základním požadavkům na přístupnost. Kromě kontrastní barvy písma oproti barvě podkladu má na ni vliv i dostatečná výchozí velikost písma. Mohlo by se zdát, že situaci řeší možnost zvětšování písma, ale není tomu tak. Vzhledem k tomu, že celá řada uživatelů si zvětšit text na stránce neumí, je lepším řešením nabídnout dostatečně velké a čitelné písmo standardně a nespoléhat se na to, že si je uživatel bude umět zvětšit. Pokud chcete uživateli nabídnout větší komfort a několik verzí webu, je to možné, ale vždy by mělo platit, že by to nemělo být na úkor přístupnosti verze primární. 

Autor: Radek Pavlíček

Malé a málo kontrastní písmo – tak přesně takto by to vypadat nemělo.

7. Obrázkům, které nesou významové sdělení, definujte relevantní textovou alternativu.

Důležitým grafickým prvkům, nesoucím významové sdělení, přiřaďte relevantní textovou alternativu pomocí atributu alt, případně – u komplikovanějších obrázků, grafů či fotogalerií – přidejte textový popis třeba formou tabulkových dat či článku. Dekorativní grafiku schovejte pomocí CSS nebo jí přiřaďte prázdný atribut alt.

Obrázky, které slouží jako odkaz, by měly mít textovou alternativu přiřazenu vždy, a ta by měla popisovat cíl, kam odkaz vede (tedy ne to, co je na obrázku).

Autor: Radek Pavlíček

Relevantní alternativní textové popisky u piktogramů jízdních řádů

Velmi problematickým prvkem na webových stránkách je CAPTCHA. Pokud to lze, vyhněte se jejímu použití. Pokud to možné není, doplňte ji vhodnými a přístupnými alternativami.

Autor: Radek Pavlíček

Ukázka různých CAPTCHA

Pokračování příště

Příště se podíváme na základní pravidla pro vytváření přístupných tabulek, formulářů a srozumitelného tex­tu.