Odstraňte bariéry svého webu – obrázky a zvuky

Bariéry našich webů začneme odstraňovat v oblasti vizuálních a zvukových elementů stránky, tedy obrázků, zvuků, videa aj. A víte, jak byste měli postupovat v případě animací ve Flashi nebo v případě appletů?

Začneme možná nejdůležitějším pravidlem, a tím je dodržování moderních webových standardů. Toto pravidlo je obzvlášť důležité a posune váš web o velký kus dál směrem k bezbariérovosti. Jde v podstatě o to, znát moderní specifikace jazyků pro tvorbu webových stránek a striktně se jimi řídit. V nových specifikacích HTML a CSS (tedy od HTML 4 Strict a CSS 2 výše) je totiž s bezbariérovostí ve velké míře počítáno a tyto specifikace vás tak k ní samy povedou.

Používání moderních standardů s sebou samozřejmě nese i špatnou podporu těchto standardů ve starších prohlížečích. Tuto otázku musíte zvážit sami, a to podle cílové skupiny vašeho webu. Většina dnešních uživatelů Internetu (asi 90%) používá prohlížeče verzí 5+, ve kterých to s podporou standardů není zase tak špatné. Navíc tím svou stránku zpřístupníte pro handicapované uživatele, vyhledávače apod. a zároveň vaše stránka bude použitelná (ne však správně zobrazitelná) ve všech prohlížečích.

Vizuální a zvukové elementy

Ke každému vizuálnímu či zvukovému prvku stránky byste měli poskytovat alternativní textový obsah – tento alternativní obsah by měl mít minimálně stejnou informační hodnotu i účel na stránce jako původní element. Toto pravidlo byste neměli dodržovat jen kvůli handicapovaným uživatelům, ale také kvůli uživatelům přistupujícím na Internet z různých neobvyklých zařízení, či prohlížečů s vypnutým nahráváním multimediálních prvků (jak se zvukovým a vizuálním elementům souhrně říká). Nyní si probereme všechny elementy, kterých se toto pravidlo týká:

Obrázky

U obrázků byste měli využívat především tyto atributy tagu img (první z nich platí i pro tag input, v případě že jeho type="image"):

• alt
  Tento atribut je povinný u každého obrázku. Text v něm by měl být volen tak, aby plnil stejný účel jako obrázek. Rozhodně by tento text neměl být pouze doplňující informací k obrázku. Pokud používáte obrázek jako odrážku nebo oddělující čáru, neměli byste volit jako obsah parametru alt text „odrážka“, „modrý puntík“ nebo „oddělovač“, ale znaky jako „*“ nebo „-“ pro odrážky a „—„, „___“ nebo „&#152“ (&#152) pro oddělovací čáry. Samozřejmě je ale nejlepší používat vyhrazené značky pro oddělovací čáry a seznamy – hr, ul a li. Pokud má obrázek ve stránce pouze dekorativní či účelovou roli (známý jednopixelový průhledný gif), rozhodně byste neměli do atributu alt dávat prázdný řetězec. Handicapovaný uživatel potom nemůže posoudit význam tohoto obrázku. Naopak velmi vhodné jsou řetězce jako “ „, „_“ nebo “   „. Mezeru můžete použít v atributu alt i v případě, kdy se v blízkosti obrázku (z hlediska pořadí ve zdrojovém kódu dokumentu) nachází text, který význam obrázku ozřejmuje.
• longdesc
  Tento atribut by měl obsahovat adresu HTML dokumentu, ve kterém se nachází popis obrázku, pokud k němu nestačí atribut alt. Pokud již děláte tuto stránku, je vhodné uvést odkaz na ní i u obrázku (ne každý prohlížeč používá atribut longdesc).

Nyní několik příkladů:

Mezi obrázky můžeme zařadit i tzv. ASCII-art, tedy obrázky tvořené shlukem písmen (používají se hlavně v SMSkách). Tyto obrázky bychom měli uzavírat do tagu div, p nebo pre (či do jiných vhodných) a přiřazovat jim popis pomocí atributu title.

Image-mapy aneb obrázky s klikou

Image-mapy můžeme rozdělit na serverové a klientské. Obě varianty lze zpřístupnit pro handicapované uživatele, ale platí zde víc než kde jinde, že s podporou tohoto zpřístupnění v prohlížečích je to špatné. Proto byste každou image-mapu měli doplnit o textové odkazy se stejným významem (i kvůli vyhledávačům, které image-mapy neumí).

Serverové image-mapy pracují na principu, že uživatel klikne na nějakou oblast obrázku a její souřadnice se stávají součástí URL, které je prohlížečem v dalším kroku vyžádáno. Vše ilustruje příklad:

Poznámka: K vytvoření serverové image-mapy můžete použít i tag input s atributem type=“image“. V takovém případě se image-mapa neuzavírá do tagu a (který je jinak v tomto případě povinný) a výsledné URL vznikne složením hodnoty atributu action tagu form, znaku „?“ a oblasti, kde bylo uskutečněno kliknutí.

Pokud uživatel v našem příkladě klikne na souřadnice x=23 a y=25, bude URL, které si prohlížeč na serveru vyžádá, http://server.cz/stranka.php?23,25. V případě, že prohlížeč nepodporuje image-mapy, bude URL končit parametry 0,0 nebo nebude mít žádné parametry. To by měl skript v souboru stranka.php rozpoznat a nabídnout v takovém případě textovou navigaci.

Použití serverových image-map je ale i tak dnes spíše nedoporučováno vzledem ke klientským image-mapám.

Klientské image-mapy mají přímo na stránce definované jednotlivé oblasti obrázku a URL k nim náležející. Většinou se k jejich konstrukci používá tag map s několika vnořenými tagy area, které definují jednotlivé oblasti, a tag img, s kterým je mapa asociována. My si klientskou image-mapu vytvoříme trochu jinak – nejdříve se podívejte na příklad, pak si k němu něco řekneme:

Celou mapu vnořujeme do tagu object, pomocí kterého na stránce definujeme obrázek image-mapy (místo tagu img). Pokud prohlížeč tag object zvládá a umí i načítat obrázky, potom obrázek načte a vytvoří z něj image-mapu podle tagu map s vnořenými tagy a – ty nám zde nahrazují tagy area. V případě, že prohlížeč tag object nezná nebo neumí načítat obrázky, použije obsah uvnitř něj a na stránce nám tak vznikne textová navigace tvořená ragulérními HTML odkazy. Všimněte si i toho, že jsem oba odkazy oddělil znakem „|“. Na to byste neměli zapomínat, aby odkazy nesplývaly v jeden (k oddělení samozřejmě můžeme použít i jiné znaky nebo elementy).

Další alternativou je spojení alternativní textové navigace a definice image-mapy:

V takovémto případě nám na stránce vznikne jak image-mapa, tak textová navigace. Ta zároveň definuje i důležité oblasti image-mapy.

Video, audio, Flash, Java-applety a další externí doplňky stránky

Podle moderních specifikací (X)HTML by ke vkládání všech výše zmíněných objektů do stránky měl sloužit pouze tag object. Ten je párový, a právě mezi jeho otevírací a uzavírací část byste měli vložit alternativní obsah či odkaz na něj, pokud není možné doplněk zpřístupnit:

Poznámka: Pokud potřebujete k vložení Java-appletu do stránky použít tag applet, měli byste alternativní obsah vložit mezi jeho otevírací a uzavírací část a také do jeho atributu alt.

Pokud používáte video se zvukovými sekvencemi, měli byste v jeho blízkosti zařadit i odkazy na soubor s popisem zvuků (pro uživatele s vadou sluchu) a soubor s popisem vizuální informace (pro uživatele s vadou zraku). Tito uživatelé mohou vnímat jednu složku informace z videa, a proto byste jim měli poskytnout i alternativní informaci o druhé složce. Některé technologie (Quicktime, SMIL) také umožňují asociovat popis vizuální/zvukové informace se souborem videa a potom je v případě potřeby synchronně s videem uživateli poskytovat. Pokud vás tato problematika zajímá, odkáži vás na stránky NCAM.

Co se týká Flashe, měli byste vždy poskytovat alternativní obsah se stejnou informační hodnotou, a neměli byste také zapomínat na dostačující aktualizaci tohoto obsahu. Informace v souboru s Flashem totiž není textová, navíc její získání je závislé na vizuálním výstupu a většinou i přítomnosti specifického vstupního zařízení (myši).

U všech výše zmíněných prvků byste také měli umožnit jejich ovládání uživatelem – pozastavování, znovu-spouštění, přeskočení v případě menší důležitosti apod. Tyto prvky by také měli být nezávislé na vstupním zařízení (klávesnice, myš aj.). Toto je důležité pro uživatele, kteří jsou schopni tento druh informací přijmout, ale zároveň jsou nějak omezeni. Základem ale stále zůstává textová alternativa.

Pokud používáte applety v Javě a chcete je také zpřístupnit, potom vás odkáži na stránky IBM nebo Trace R&D Center, neboť je toto téma vzhledem k zaměření článku již příliš speciální.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.