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

Zdroják » Webdesign » WCAG 2.0 – Vnímatelnost a textové alternativy

WCAG 2.0 – Vnímatelnost a textové alternativy

Články Webdesign

V prvním díle našeho seriálu jsme se seznámili s novinkami, které přináší metodika WCAG 2.0. Jednou z velkých změn je odklon od technických aspektů k principům přístupnosti. V dnešním díle se proto podíváme na první princip – Vnímatelnost.

Vnímatelnost je prvním z principů metodiky WCAG 2.0. Smyslem tohoto principu je zajistit prezentování informací a součástí uživatelských rozhraní tak, aby je uživatelé byli schopni vnímat. Obsah webu by tedy měl být vnímatelný všemi relevantními smysly – zrakem, sluchem a/nebo hmatem. Princip vnímatelnosti obsahuje čtyři pravidla, my se dnes podíváme na pravidlo první, které se zabývá textovými alternativami.

Pravidlo 1.1 Textové alternativy

Opatřete veškerý netextový obsah textovými alternativami, které je možné podle potřeby převést do jiných formátů jako například zvětšené písmo, bodové písmo, fonetický přepis či zjednodušený ja­zyk.

Toto pravidlo má nejvyšší prioritu (A) a jeho smyslem je zajistit, aby veškerý netextový obsah byl k dispozici i v textové podobě. Textem je zde myšlen text v digitální podobě, ne text ve formě obrázku. Text má totiž oproti jiným způsobům prezentování informací jednu velkou výhodu. Je možné jej prezentovat více způsoby – vizuálně, mluvenou řečí, v hmatové podobě – a dokonce je možné tyto způsoby kombinovat. Text v digitální podobě lze tedy snadno zvětšovat, nechat číst syntetickým hlasem či převést do Braillova písma. Uživatel se specifickými potřebami si jej tedy může upravit tak, že se s jeho obsahem může seznámit nezávisle na pomoci dalších osob. Například nevidomý uživatel tak může mít text předčítán hlasovým výstupem a současně si jej může číst v Braillově písmu na braillském řádku.

Ilustrace vnímatelnosti u WCAG

Ke každému netextovému obsahu, který je uživateli prezentován, by proto měla existovat relevantní textová alternativa. Existuje ale řada výjimek, kdy netextový obsah textovou alternativu mít nemusí a kdy by naopak dokonce byla spíše ke škodě než k užitku.

Prvním takovým případem je netextový obsah, který má pouze dekorativní charakter. V takovém případě je vhodné textovou alternativu nedefinovat. I když ani v tomto případě se nemusí jednat o dogma. Například uživatelé screenreaderů v nedávném průzkumu, který provedl WebAim, požadovali textovou alternativu i u fotografie usmívající se ženy, která měla navodit atmosféru přátelské firmy.

Definovat textovou alternativu u CAPTCHA by také nebylo to pravé, protože by se tím popřel její smysl, t.j. odlišit člověka od robota. Na druhou stranu je CAPTCHA uživateli screenreaderů – aspoň dle již citovaného průzkumu – vnímána jako nejproblematič­tější věc z hlediska přístupnosti. Textová alternativa tohoto netextového obsahu by tedy měla vždy alespoň popisovat její účel a charakter a autor webu by měl rozhodně poskytnout jiné alternativy CAPTCHA, které využívají různé smysly, aby s formulářem, který CAPTCHA chrání, mohlo pracovat co nejvíce uživatelů s různými typy postižení.

Ideálním řešení je například poskytnutí několika variant CAPTCHA, možnost kontaktovat technickou podporu, jejíž pracovník může uživateli pomoci či u autorizovaných uživatelů CAPTCHA řešení nepoužívat (toto řešení používají například někteří mobilní operátoři u SMS bran).

Ilustrace vnímatelnosti CAPTCHA

Jestliže primárním účelem netextového obsahu je zprostředkování určitého smyslového zážitku, jako je například záznam symfonie, fotografie západu slunce, umělecké dílo, atp. V takovém případě lze velmi obtížně popsat jeho sdělení slovy. Jaká by měla být například relevantní textová alternativa k Dvořákově Novosvětské? Ano, můžeme ji popsat, ale textovým popisem nikdy nesdělíme to, co hudbou. Textová alternativa takového obsahu by pak měla alespoň popisovat jeho charakter a účel.

Dalším příkladem obsahu, kde není nutné definovat relevantní textovou alternativu, je test nebo cvičení, které nelze převést do textové podoby tak, aby zůstala zachována jeho funkčnost. Může se jednat například o test, při němž je bezpodmínečně zapotřebí sluch (například diktát) či zrak (geometrická úloha, test na rozpoznání barev). Textová alternativa by v takovém případě opět byla velmi obtížně až nemožně realizovatelná, a proto stačí, když textová alternativa v takovém případě alespoň popisuje charakter a účel testu či cvičení.

U netextového obsahu, který slouží jako ovládací prvek či prvek reagující na vstup uživatele (obrázky sloužící jako potvrzovací tlačítka, mapy, animace), mají tyto prvky název, popisující jejich účel.

Poslední výjimkou je potom živě vysílané audio a/nebo video, kde by byl opět problém poskytnout textovou alternativu, takže i  těchto případech stačí textová alternativa pouze ve formě popisu, o jaký netextový obsah se jedná.

Ve všech ostatních případech, jakými jsou grafy, diagramy, audio nahrávky, obrázky či animace, musí být definována textová alternativa, která má stejnou informační hodnotu jako netextový obsah.

Při definování textové alternativy je třeba mít na paměti následující pravidla.

  • Ne vždy je nutné definovat textovou alternativu prostřednictvím atributu alt. Je řada případů, kdy by to bylo spíše kontraproduktivní. Příkladem může být třeba textová alternativa ke grafu, kde může být vhodnější použít jako textovou alternativu tabulku, která byla zdrojem dat ke grafu, než graf složitě popisovat. Stejně tak textovou alternativou fotogalerie může být třeba článek o akci, na níž byly fotografie pořízeny.
  • Alternativní textový popisek obrázku se může měnit podle kontextu, v němž je obrázek použit. Stejný obrázek tedy může mít různou textovou alternativu v závislosti na tom, zda jej použijeme jako dekoraci (v takovém případě ji ani mít nemusí), až po situaci, kdy bude jeho textovou alternativou třeba již zmíněná tabulka.
  • Méně je mnohdy více – spíše než dlouhý a komplikovaný popis uživatelé ocení stručné a jasné vyjádření smyslu či významu netextového obsahu.
  • U grafického prvku, který slouží jako odkaz, je nutné vždy definovat textovou alternativu. Například pro uživatele screenreaderu je totiž nepopsaný grafický odkaz velmi frustrující, protože bez relevantního popisku nepozná, zda se jedná jen o odkaz na větší náhled dekorativního obrázku nebo na stránku s kontakty, kterou na webu marně hledá. U grafického odkazu by navíc textová alternativa neměla obsahovat popis toho, co je na obrázku, ale měla by výstižně charakterizovat smysl/cíl odkazu.

Příklady vhodného definování textové alternativy

Piktogramy u vlakového spojení

U piktogramů je důležité popsat jejich význam – ne to, co je na nich zobrazeno. U piktogramu, který znázorňuje možnost zakoupení místenky, tedy nedefinujeme textovou alternativu pouhým písmenem R, ale slovy „možno zakoupit místenku“, podobně u piktogramu, sloužícího jako grafický odkaz na e-shop, kde je možné zakoupit místenku, je nevhodné definovat alternativní textový popisek v podobě „nákupní košík“. Ideální je popsat účel odkazu, tedy v tomto případě Koupit místenku.

ALT u piktogramů by měl být popisný, nikoli opisný

Sloupcový graf

U sloupcového grafu, který znázorňuje počet prodaných lístků v lednu, únoru a březnu můžeme textovou alternativu definovat například takto: krátký popis grafu uděláme v podobě „Graf – prodej lístků v lednu až březnu“ a graf dále doplníme buď tabulkou nebo jeho slovním popisem, v němž uvedeme hodnoty za jednotlivé měsíce.

Sloupcový graf je lépe nabídnout alternativně jako tabulku

Audiozáznam mluveného slova

U audiozáznamu mluveného slova uvedeme do textu odkazu, který na soubor s audiozáznamem vede, informaci, výstižně popisující cíl odkazu – například „Audioverze časopisu Chaloupka 1/2010“. Za tento odkaz pak umístíme další odkaz, který vede na textový přepis audiozáznamu. V našem případě by to byla textová verze časopisu.

Audiozáznam tiskové konference

U audiozáznamu tiskové konference postupujeme obdobně. Textová alternativa v tomto případě zahrnuje doslovný přepis všeho, co na konferenci zaznělo. Kromě toho také obsahuje informace o tom, kdo co řekl, a také o dalších zvucích, které na konferenci zazněly – potlesk, smích, dotazy od novinářů, atp.

Animace s ukázkou fungování motoru auta

Animace znázorňuje, jak funguje motor auta. Animace nemá audio stopu a je součástí tutoriálu, který popisuje, jak funguje motor auta. Protože text obsahuje kompletní vysvětlení, animace je tím pádem alternativou k textu tutoriálu. Vlastní textová alternativa animace tedy může být jen velmi stručná, může obsahovat krátký popis animace a odkaz na text tutoriálu.

Mapa

Obrázek s plánem jednoho podlaží domu je interaktivní. Uživatel si může vybrat některou místnost a kliknutím na ni se může dostat na stránku s detailními informacemi o konkrétní místnosti. Krátká textová alternativa může popisovat obrázek a jeho funkcionalitu například takto: „Plán přízemí. Kliknutím na některou z místností se o ní dozvíte více informací“.

Nalézt alternativní obsah například k plánům je někdy těžké - ilustrační obrázek

Příklady definování textových alternativ dnešní díl ukončíme, příště se blíže podíváme na Pravidlo 1.2, které se věnuje alternativě multimediálních prvků.

Komentáře

Subscribe
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Pavel Kysilka

diky. Pekne. Toto jsem dlouho shanel.

Martin Doubravský

Hezke shrnuti,
problemy s CAPTCHA pristupnosti by mohla vyresit http://textcaptcha.com/

Jiří J.

Bohužel také často osobně narážím s vimperatorem tam, kde nemá obrázek s odkazem alternativní text. U webů různých netechnických nadšenců to dovedu pochopit, ale na firemních stránkách některých společností mi to už začíná vadit.

.

Tam by přece bylo lepší to řešit pomocí atributu title přímo v odkazu…

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.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.