Přejít k navigační liště

Zdroják » Webdesign » WCAG 2.0 – Vnímatelnost a přizpůsobitelnost

WCAG 2.0 – Vnímatelnost a přizpůsobitelnost

Články Webdesign

V dnešním díle našeho seriálu o WCAG 2.0 se podíváme na to, jakým způsobem tvořit obsah, který lze prezentovat více způsoby, aniž by přitom došlo ke ztrátě informací či narušení jeho struktury.

Návštěvníci webových stránek mají při prohlížení jejich obsahu nejrůznější potřeby a preference. Řada z nich si upravuje zobrazení stránek, používá k práci s nimi různá alternativní zařízení či asistivní technologie (screenreadery, softwarové lupy, braillské řádky). Uživatelé tedy vůbec nemusí vidět obsah webových stránek v podobě, v níž jej autor vytvořil a zamýšlel prezentovat. Abychom webové stránky zpřístupnili co nejširší skupině uživatelů, je třeba zajistit, aby obsah webových stránek uživatelé mohli bez obtíží vnímat různými smysly – zrakem, sluchem či hmatem.

Ukázka začátku titulní stránky www.zdrojak.cz v Braillově písmu

K tomu, abychom tohoto docílili, musíme informace na webu prezentovat v podobě, kterou lze programově určit. S obsahem webu si pak poradí i asistivní technologie uživatelů se specifickými potřebami či je zachována jeho struktura při zkopírování obsahu stránky do textového editoru.

A právě těmto aspektům tvorby webových stránek se věnuje třetí pravidlo metodiky WCAG 2.0.

Pravidlo 1.3

Přizpůsobitelné: Vytvořte obsah, který lze prezentovat více způsoby (např. zjednodušený vzhled), aniž by přitom došlo ke ztrátě informací či narušení struktury.

Smyslem tohoto pravidla je zajistit, aby informace byly dostupné ve formě, která je vnímatelná všemi uživateli a mohou být například čteny pomocí hlasového výstupu, zobrazeny na braillském řádku či zobrazeny ve zjednodušené podobě bez toho, aniž by došlo ke ztrátě významu. Pravidlo obsahuje tři kritéria úspěšnosti s nejvyšší prioritou.

1.3.1 Informace a vzájemné vztahy

Informace, strukturu a vzájemné vztahy obsažené v prezentaci je možné programově určit nebo jsou dostupné ve formě textu.

Uživatelé běžně vnímají strukturu prostřednictvím různých vizuálních podnětů – nadpisy jsou často napsány větším písmem oproti běžnému textu, položky seznamů jsou uvozeny odrážkami a jsou odsazeny, formulářové prvky, které k sobě patří, jsou podbarveny jinou barvou pozadí oproti ostatnímu textu, důležitá slova jsou zvýrazněna pomocí tučného písma, kurzívy či jiného fontu, atp.

Na webových stránkách se také můžeme setkat s auditivním formátováním – například zvuk metronomu může upozorňovat na blížící se konec času pro vyplnění formuláře, změna výšky hlasu či jeho rychlosti zase může být použita pro zdůraznění informace či k indikaci citace, atp.

Toto kritérium úspěšnosti se tedy zabývá zachováním informací a vztahů mezi nimi, které jsou naznačeny vizuálně či auditivně, i v případě, kdy se forma prezentace na straně uživateli změní. Příkladem může být použití screenreaderu, braillského řádku či nahrazení CSS, které definoval autor stránky, uživatelským CSS.

Nadpisy

Strukturování webové stránky pomocí nadpisů a jejich vyznačování pomocí značek h1h6 patří k základním kamenům moderního pojetí přístupnosti. Protože o tomto tématu už bylo napsáno mnohé, nebudu nosit dříví do lesa a  dovolím si zde odkázat na článek Jak přístupně strukturovat webovou stránku pomocí nadpisů na blogu POSLEPU, který se touto tématikou detailně zabývá. Pro zájemce, kteří se chtějí o přínosu a významu nadpisů pro uživatele screenreaderů přesvědčit na vlastní oči, je připraveno následující video.

Seznamy

Stejný požadavek jako na nadpisy se týká i vyznačování seznamů a položek seznamů značkami ol, ul, li, dl, dt, dd. Zatímco běžný uživatel může skutečnost, že se jedná o seznam, poznat například z odsazení a z vizuální podoby textu, uživatel screenreaderu takovou možnost nemá. Jediným způsobem, jak mu může jeho program předat informaci, že následující informace mají charakter seznamu, je tyto informace jako položky seznamu vyznačit.

Přínos, který pro uživatele screenreaderu správně vyznačený seznam má, opět ukazuje následující video.

Tabulky

Prezentování informací v tabulkách patří z pohledu uživatelů screenreaderů mezi jeden z nejobtížnějších aspektů, protože data v tabulce jsou 2D, zatímco screenreadery je prezentují lineárně. Při tvorbě tabulek je tedy třeba dbát na jejich maximální jednoduchost a pokud už je nutné použít komplikovanou tabulku, je třeba dodržet několik pravidel:

  • do každé buňky dát pouze informace, které spolu souvisí,
  • zajistit smysluplnost při čtení tabulek po řádcích zleva doprava,
  • vyznačit záhlaví řádků a sloupců pomocí značek th,
  • zajistit jednoznačnou vazbu mezi buňkami a jejich záhlavími pomocí id a headers v případě, kdy buňka má více než jedno záhlaví a jejich určení je nejednoznačné,
  • u značky table definovat atribut summary a v něm stručně popsat účel tabulky a její rozložení.

Příklady přístupných a hůře přístupných tabulek jsou k dispozici na stránce Příklady tabulek k procvičení, která je součástí tutoriálu Testování přístupnosti webových stránek se screenreaderem JAW­S.

Skutečnost, že i s poměrně komplikovanou tabulkou se při jejím správném vytvoření dá pomocí screenreaderu pracovat, potvrzuje i následující vi­deo.

Formuláře

U formulářových prvků je velmi důležité přiřadit formulářovým prvkům jejich popisky pomocí značky label a atributů for a id, aby bylo možné programově určit, ke kterému prvku patří který popisek. U komplikovanějších formulářů je potom vhodné skupiny prvků seskupit a vhodně nadepsat pomocí značek fieldset a legend. Opět nebudu opakovat již jednou napsané a rád bych odkázal na tutoriál Použitelné a přístupné webové formuláře od Plaváčka, který prakticky nic – snad jen tvorbu formulářů pomocí tabulek bych nedoporučil – neztratil na své aktuálnosti.

Příklady přístupných a hůře přístupných až nepřístupných formulářů jsou také k dispozici na stránce Příklady formulářů na procvičení, která je součástí tutoriálu Testování přístupnosti webových stránek se screenreaderem JAW­S.

Závěrem této sekce bych rád podotkl, že správně naformátované dokumenty nepomáhají jen uživatelům se zdravotním handicapem, ale každému, kdo je musí dále zpracovávat – ať už se jedná o zpracování ruční (zkopírování informací z webových stránek do jiného programu) či programové (generování obsahu na základě korektně definovaných nadpisů). Přínos tohoto pravidla tedy jde výrazně nad rámec potřeb a požadavků uživatelů se zdravotním handicapem.

1.3.2 Srozumitelné pořadí

Jestliže má pořadí informací, v němž jsou prezentovány, vliv na jejich srozumitelnost, lze správné pořadí, v němž mají být informace čteny, programově určit. 

Smyslem tohoto kritéria je umožnit alternativní pořadí čtení obsahu stránky za současného zachování významu sdělení. Obsah, který nevyhovuje tomuto kritériu úspěšnosti, může činit problémy například uživatelům asistivních technologií, kterým je prezentován v nesprávném a tudíž nesrozumitelném pořadí.

Pořadí prezentování informací je srozumitelné, pokud nemůže být změněno bez toho, aniž by došlo ke změně jeho významu. Pokud například stránka obsahuje dva nezávislé články, pak pořadí, v jakém je čteme, nemá vliv na srozumitelnost obsahu. Články samy o sobě musí mít srozumitelné pořadí (aby dávaly smysl), ale nadřazený prvek, který je obsahuje, už podmínku srozumitelného pořadí splňovat nemusí, protože články jsou na sobě nezávislé a je tedy jedno, zda si nejprve přečteme článek první a pak druhý nebo naopak.

Příkladem porušení tohoto kritéria úspěšnosti může být například situace, kdy je layout stránky či formuláře vytvořen pomocí tabulky a screenreader její obsah neinterpretuje z důvodu, s jakým pracuje s tabulkou, správně.

1.3.3 Vlastnosti na základě smyslového vjemu

Pokyny, jak správně vnímat obsah a jak s ním správně zacházet, nezávisí výhradně na vlastnostech založených na smyslovém vnímání, které jednotlivé komponenty mají, jako např. tvar, velikost, optické umístění orientace či zvuk.

Účelem tohoto kritéria je zajistit, aby všichni uživatelé rozuměli instrukcím pro práci s obsahem, i když nejsou schopni v důsledku svého zdravotního postižení vnímat například tvar, velikost či umístění konkrétního objektu. V některých případech se autoři webových stránek spoléhají na to, že uživatelé jsou schopni vizuální aspekty stránky či jejích částí vnímat a na stránkách se tedy můžeme setkat s instrukcemi jako klikněte na kulaté tlačítko či pro přechod na další část formuláře použijte tlačítko v pravém dolním rohu. Tyto instrukce ale mohou být pro určitou část návštěvníků nesrozumitelné, protože je nejsou schopni vnímat a porozumět jim – ať už z důvodu zdravotního postižení či použitého zařízení pro zobrazení stránek.

Smyslem tohoto kritéria není odrazovat od tohoto stylu používání instrukcí pro práci se stránkou, protože pro určitou skupinu návštěvníků se jedná o velmi efektivní způsob, ale doplnit je dalším typem informací, které jsou srozumitelné a přístupné i pro uživatele, kteří tyto aspekty vnímat nemohou.

Ukázka nevhodně definovaných instrukcí, které předpokládají schopnost vizuálního vnímání na straně uživatele

Příště se podíváme na to, jak uživatelům usnadnit vnímání obsahu webové stránky a odlišit informace v popředí od informací na pozadí.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.