Sjednocená organizace nevidomých a slabozrakých ČR
www.sons.cz
verze: 2.3
datum vydání: 31.3.2005
Autor: Mgr. Radek Pavlíček, (pavlicek@sons.cz)
Problematika zpřístupnění obsahu webových stránek osobám se specifickými potřebami se v poslední době dostává stále více a více do popředí zájmu webmasterů a webdesignérů. Tento metodický návod se zabývá detailním popisem pravidel zpřístupnění webových stránek uživatelům s těžkým zrakovým postižením - tedy těm, kteří nevidí vůbec, nebo jen velmi málo. Mezi uživatele s těžkým zrakovým postižením řadíme nejen uživatele nevidomé, pro něž je zcela nemožné získávat informace zrakem, ale také uživatele jinak zrakově postižené - uživatele se zúženým zorným polem, s velmi vysokou krátkozrakostí, tunelovým viděním či barvoslepostí. Odhaduje se, že v České republice žije přibližně 100 000 osob s těžkým zrakovým postižením. Pro mnohé z nich může být web velkým pomocníkem a často i jedinou cestou k samostatnému provedení určité činnosti - ať už je to přečtení nejnovějších zpráv na zpravodajském webu, objednání zboží v internetovém obchodě či stažení knihy z Knihovny digitálních dokumentů, kterou provozuje Sjednocená organizace nevidomých a slabozrakých.
Uživatelé se zrakovým postižením používají ke čtení obsahu webových stránek speciální technologie, které jim obsah webových stránek zpřístupňují.
Nevidomí uživatelé k získávání informací z webových stránek používají tzv. hlasové nebo hmatové výstupy, pomocí kterých je jim buď hlasem předčítán nebo na speciálním zařízení (tzv. braillském řádku) v braillově písmu zobrazován text, zveřejněný na webových stránkách. Informace o tom, co se bude předčítat či zobrazovat, předává hlasové syntéze či na braillský řádek tzv. odečítač (čtečka) obrazovky. Hlasový nebo hmatový výstup není prohlížeč webových stránek, ale zpracovává stránku, načtenou v běžném prohlížeči (většinou v Microsoft Internet Exploreru, který je těmito pomocnými technologiemi nejlépe zpřístupněn).
Uživatelé slabozrací používají tzv. softwarové lupy, pomocí kterých si obsah webových stránek zvětšují. Někdy však samotné zvětšení nestačí a je třeba i upravit barevné schéma či kontrast barev. U uživatelů slabozrakých už se můžeme kromě majoritního Microsoft Internet Exploreru setkat i s používáním jiných prohlížečů (např. Mozilly či Opery), protože tyto prohlížeče disponují funkcemi, které prohlížení webových stránek slabozrakým uživatelům usnadňují.
Při vytváření nebo úpravě stránek s ohledem na zrakově postižené uživatele je třeba si uvědomit tyto základní skutečnosti:
Pokud tedy budete tvořit stránky s ohledem na tuto skupinu návštěvníků, berte prosím na výše uvedené skutečnosti zřetel. Jak na to, se dočtete v následujících kapitolách.
Závěrem si řekněme, že dodržením těchto pravidel nezlepšíte přístupnost webových stránek pouze uživatelům zrakově postiženým, ale také uživatelům s jiným postižením - například s motorickým postižením horních končetin (nemožnost ovládat počítač myší) nebo s menšími poruchami soustředění (pomalé reakce na vizuální podněty). Stejně tak může dodržení některých pravidel pomoci zvýšit návštěvnost stránek i o uživatele s monochromatickým monitorem, uživatele, kteří mají v prohlížeči vypnutu podporu aktivních prvků (Java, ActiveX, Javascript) či uživatele nepoužívající majoritní prohlížeč.
Tato sekce obsahuje pravidla, jejichž splnění je bezpodmínečně nutné k tomu, aby zrakově postiženému návštěvníku byly informace na stránkách dostupné.
Odečítač obrazovky umí pracovat pouze s informacemi v textové podobě. Proto je třeba, aby každý grafický objekt, sloužící k ovládání stránky (typicky se jedná o odkaz, tvořený pomocí obrázku), měl definován alternativní textový popisek, jehož obsahem je popis cíle, na který grafický objekt vede. Například takto:
<p>Instituce města:</p> <p><a href="muzeum.html"> <img src="muzeum_label.gif" alt="Městské muzeum - zde se o něm dozvíte více" /> </a></p> <p><a href="divadlo.html"> <img src="divadlo_label.gif" alt="Městské divadlo - zde se o něm dozvíte více" /> </a></p>
Pokud je grafický objekt definován prvky [input] či [applet], též dbejte na přiřazení jejich alternativních textových popisků. Nejčastěji se takových grafických objektů používá jako náhrada standardních tlačítek ve formulářích. V těchto případech zvolte popisek např. "Vyhledej", "Přejdi" nebo "Odešli data". Zvolte jej podle vlastního účelu daného tlačítka formuláře. Příklad:
<input type="image" src="red_button.gif" name="Submit" alt="Odešli objednávku" />
Během vývoje nástrojů pro tvorbu webových stránek se v posledních letech prosadily ve velké míře různé aktivní prvky (nejčastěji Javascript). Pomocí těchto prvků je možné na stránkách vytvářet nejrůznější efekty, čímž stránka nabývá na reprezentativnosti a přehlednosti pro čtenáře bez zrakového postižení a bez problémů obsluhujícího myš. Bohužel však mnohé z těchto prvků jsou pro uživatele se zrakovým postižením velmi málo přístupné, především mohou být zcela nepřístupné pro nevidomé uživatele. Stránka využívající možnosti Javascriptu může být nepřístupná i pro ty uživatele, kteří nedisponují prohlížeči podporující Javascript, nebo pro ty, kteří mají v prohlížečích podporu těchto prvků vypnutu.
Javascript se často využívá pro tvorbu menu v podobě rozbalovacích nabídek odkazů. Pro čtenáře, kteří musejí používat pomocné technologie (např. odečítač obrazovky), je tato nabídka většinou nedostupná proto, že ten objekt stránky, na který je nutno klepnout myší pro jeho rozbalení nabídky, se nijak navenek netváří jako takto aktivní prvek. O přístupnosti schovaných odkazů nemluvě.
Proto na takových stránkách doporučujeme například vytvořit seznam klasických odkazů, jenž by nahrazoval odkazy skryté v rozbalovací "Javascriptové" nabídce. Tento náhradní seznam odkazů se dá též řešit umístěním klasického rozbalovacího seznamu (prvek [select]), který by obsahoval všechny cíle, jež se nalézají v nepřístupné nabídce vytvořené pomocí Javascriptu. Další možností je naprogramovat Javascriptovou nabídku tak, aby byla přístupná i bez použití myši.
Pro vyzkoušení, zda je stránka s Javascripty za použití výše popsaných alternativ přístupná, doporučujeme vypnout v prohlížeči podporu Javascriptu a zkusit její obsluhu a navigaci. Pokud se i poté k informacím na stránce dostanete, je velká pravděpodobnost, že stránka bude přístupná i pro uživatele se zrakovým postižením.
V případě použití appletů, prvků ActiveX či při použití kaskádových stylů atd. je vhodné analogicky aplikovat výše uvedené postupy tak, aby všechny informace na stránce byly přístupné i v případě, kdy kterýkoliv z těchto doplňků nad rámec HTML není k dispozici.
Problematika, jak zpřístupnit tabulku pro nevidomého čtenáře, je poměrně rozsáhlá. V závislosti na tom, jaké je členění tabulky, jak je strukturována, jak je velká, je svým způsobem čitelná pro nevidomého uživatele. Pro lepší představu uvedeme, že nevidomý čtenář není schopen mít stále jasnou představu o celkovém uspořádání tabulky, nemá např. okamžitou možnost srovnání jistého údaje v jednom řádku s analogickým údajem na jiném řádku či při čtení jistého údaje nemá vždy možnost přečíst si jméno aktuálního sloupce či řádku.
Pro zpřístupnění informací uspořádaných do tabulky můžeme doporučit tato pravidla:
| Místo | Příjezd | Odjezd | Číslo spoje |
|---|---|---|---|
| Brno Praha Cheb |
- 18:00 20:50 |
15:00 18:30 - |
5612 5947 - |
Uživateli, který používá jako alternativu obrazovky např. hlasový výstup, by se obsah tabulky interpretoval takto:
Místo, Příjezd, Odjezd, Číslo spoje Brno Praha Cheb, -, 18:00 20:50, 15:00 18:30 -, 5612 5947 -
Což je pochopitelně nepřehledné a matoucí. Správně by tabulka měla být definována takto:
| Místo | Příjezd | Odjezd | Číslo spoje |
|---|---|---|---|
| Brno | - | 15:00 | 5612 |
| Praha | 18:00 | 15:30 | 5947 |
| Cheb | 20:50 | - | - |
| Jana | Petr | Milan | |
|---|---|---|---|
| Váha | 50 | 80 | 100 |
| Věk | 30 | 25 | 48 |
Definujte tabulku radši takto:
| Váha | Věk | |
|---|---|---|
| Jana | 50 | 80 |
| Petr | 80 | 25 |
| Milan | 100 | 48 |
Z hlediska přístupnosti tabulek pro slabozraké uživatele platí následující pravidla.
Pokud používáte tabulky pro rozložení obsahu stránky tabulky, uvědomte si, že nevidomý uživatel nemá před začátkem čtení stránky celkový přehled o rozložení jejích jednotlivých části. Běžný návštěvník při prvním zběžném prohlédnutí členění stránky dokáže poznat, jaké části textu k sobě významově patří a dokáže od sebe jednotlivé celky dokumentu odlišit. Nevidomý uživatel k obsahu stránky může přistupovat pouze "lineárně". To znamená postupně část po části, od začátku po konec. Z tohoto důvodu je důležité, jak je obsah stránky pomocí tabulek rozčleněn (tedy jaká je struktura textu v jejím zdrojovém kódu, nikoliv na obrazovce), neboť pomocné technologie (např. odečítače obrazovky) při zpřístupnění stránky postupují po řádcích odshora dolů a v jednotlivých řádcích pak zleva doprava po jednotlivých buňkách. Doporučujeme tvůrcům webu, aby zkontrolovali toto členění takto: Označte v prohlížeči celou kontrolovanou stránku pomocí funkce "Vybrat vše", zkopírujte označený blok do schránky a po té obsah schránky vložte do jednoduchého textového editoru (např. "Poznámkový blok"). Pokud se obsah stránky objeví v editoru se správnou návazností - ve správném členění, je stránka definována z hlediska přístupnosti pro nevidomé uživatele správně.
U tabulek, které jsou užity pouze pro vytvoření celkového rozložení stránky, nedefinujte záhlaví, zápatí, atd. (značky [th], [tfoot], [caption]).
Z hlediska dobré čitelnosti pro těžce slabozraké uživatele doporučujeme při definici jednotlivých částí tabulky používat raději míry relativní namísto měr absolutních. Nezapomínejme totiž, že těžce slabozraký čtenář má většinou ve svém prohlížeči nastavenu jinou velikost písma, než se kterou autor počítá, či má nastaveno menší rozlišení obrazovky.
Klikací mapa nahrazuje několik odkazů na další stránky. Tento prvek může být pro uživatele s těžkým zrakovým postižením někdy velmi nepřístupný, a to ze dvou důvodů:
Proto doporučujeme se použití klikací mapy spíše vyhnout (někdy se dá nahradit sadou obrázkových odkazů poskládaných ve výsledném zobrazení stejně jako původní klikací mapa) nebo webovou stránku s klikací mapou doprovodit sadou textových odkazů, které budou jednotlivé cíle klikací mapy kompletně nahrazovat. Stejně dobrou náhradou může být rozbalovací seznam, ze kterého si uživatel vybere cílovou stránku.
Pokud je však použití mapy nevyhnutné, nepoužívejte tzv. "server-side" mapy, ale lépe "client-side" mapy. Jako alternativní popisek obrázku, který je samotnou mapou, uveďte stručný popis klikací mapy (např. "Navigace"). V jednotlivých definicích klikacích oblastí mapy definujte vhodný popisek, a to pomocí parametru [alt] i [title]. Použití obou parametrů je nevyhnutné. Například:
<img src="mapa.jpg" alt="Navigace" usemap="#Mapa"> <map name="Mapa"> <area shape="rect" coords="14,10,116,33" href="cenik.html" title="Ceník" alt="Ceník"> <area shape="rect" coords="88,44,183,67" href="kontakty.html" title="Kontaktní adresy" alt="Kontaktní adresy"> </map>
Automatická změna obsahu stránky může být pro uživatele se zrakovým postižením velkou překážkou v přístupnosti. Podpůrné technologie (např. odečítače obrazovky) zpřístupňují stránku tak, že ji zpracují do podoby čitelné pro nevidomého a nevidomý návštěvník si ji poté může začít prohlížet (číst). Pokud během tohoto čtení dojde k automatické obnově stránky, je stránka znovu odečítačem obrazovky zpracována a předložena uživateli, který si ji však musí začít pročítat znovu od začátku a nemusí se tak tudíž vůbec dostat k informacím, které hledá.
Proto je nutné, aby k obnovení stránky došlo pouze v případě, kdy uživatel aktivuje nějaký prvek, který je k tomuto účelu určen. Tzn. není například možné, aby při pohybu tabulátorem po odkazech došlo při pouhém najetí na odkaz ke změně určité části stránky, která má pak za následek obnovení stránky a výše zmíněný jev.
Používání rámů pro tvorbu webových stránek je i přes spoustu nevýhod stále velmi rozšířené. Dá se však říci, že pro orientaci uživatelů s těžkým zrakovým postižením nejsou právě přívětivé nejméně z toho důvodu, že po zvolení určitého odkazu není předem zřejmé, do kterého rámu se nový obsah načte. Na druhou stranu však nelze tvrdit, že by se z hlediska přístupnosti neměly vůbec používat. Při dodržení následujících pravidel může být i stránka s rámci pro uživatele se zrakovým postižením přístupná.
U každého rámce v definici [frameset] by měl být vhodně a srozumitelně zvolen název ([name]) a popisný titulek ([title). Název by měl vystihovat účel rámce a jeho vztah k ostatním rámcům. Např.:
<frameset cols="10%, 90%" title="Nabídka našich služeb">
<frame src="menu.html" name="NavigacniRamec" title="Navigační rámec">
<frame src="main.html" name="RamecProPopisSluzeb"
title="Rámec pro popis služeb">
<noframes>
<a href="noframes.html">Nabídka našich služeb
bez použití rámců</a><br />
<a href="popis.html">Zde je popis rámců.</a>
Popsán je zde účel jednotlivých rámců,
k jakému účelu jsou vytvořeny
a jaký obsah se do nich načítá.
</noframes>
</frameset>
Z příkladu je také zřejmé, že by nemělo být opomenuto využití části [noframes]. Je pochopitelné, že ne všechny stránky budou spravovány a vedeny ve dvou verzích - rámcové a bezrámcové, avšak pro jejich přístupnost je tato varianta velmi vhodná. Také dostupnost textového popisu, jakým jsou rámce konkrétně využity, je žádoucí (v příkladu dokument popis.html). Odkaz na tento popis by měl být k dispozici na začátku každého rámce. Pokud si nepřejete, aby odkaz na tento popisný dokument byl vidět na obrazovce pro každého čtenáře stránek, je možné jej např. pomocí kaskádových stylů schovat.
Ve zdrojovém kódu samotných stránek, které se do jednotlivých rámců načítají, volte vhodné tituly (značka [title] v sekci [head]). Ty se sice na obrazovce nikde nezobrazí, pro zrakově postižené uživatele jsou však přístupné díky pomocné technologii (např. pomocí odečítače obrazovky). Vhodně zvolené názvy těchto stránek mohou také napomoci v přehlednější orientaci.
Pro těžce slabozraké čtenáře je stránka, rozdělená na rámce, přístupnější tehdy, když definice velikosti rámce v sekci [frameset] je specifikována v relativních mírách. Opět připomínáme, že není vždy jisté, jaké rozlišení obrazovky uživatel používá. Slabozrací uživatelé mají často nastaveno rozlišení nejmenší, aby zobrazované objekty byly na obrazovce co největší. Z podobného důvodu důrazně nedoporučujeme v definicích rámců zakazovat zobrazování posuvníků (parametr [scrolling] značky [frame]) a nedoporučujeme používat parametr [noresize] pro zakázání změny velikosti rámce.
Z označení každého odkazu je patrné, kam vede, a to nezávisle na tom, zda je uživatel obeznámen s okolním kontextem daného odkazu. Většina nevidomých uživatelů se totiž zpravidla nejprve seznámí s obsahem stránky projitím odkazů na dané stránce a teprve pak pročítá veškerý obsah stránky.
Označením odkazu je myšlena kombinace samotného textu odkazu (tzn. textu umístěného mezi párové značky [a]) a atributu [title] značky [a].
Pokud je to možné, měl by být cíl odkazu zřejmý už ze samotného textu odkazu.
<p><a href="muzeum.html">Muzeum</a> </p>
Pokud toto možné není, je pro jednoznačnou identifikaci odkazu použit atribut [title] značky [a].
<p>Pro informace o muzeu klikněte <a href="muzeum.html" title="informace o muzeu">zde</a>. </p>
Odkazy, které nevyhovují tomuto pravidlu jsou například odkazy, kde text samotného odkazu je ve tvaru "klikněte zde", "sem", "celý text článku", aniž by tento text byl doplněn atributem [title] značky [a] s doplňující informací.
Někteří zrakově postižení uživatelé nemusí být schopni barvy rozpoznat vůbec či mohou používat kvůli své zrakové vadě jiné barevné schéma, než je standardní schéma operačního systému (ve Windows například Vysoký kontrast - černá). Proto je důležité, aby stránka byla přístupná i v případě, kdy si uživatel změní barevné schéma operačního systému či kdy není schopen barvy kvůli svému zrakovému postižení interpretovat. Na webové stránce se tedy nevyskytují informace, jejichž správná interpretace závisí na schopnosti vnímat barvy. Chybou je tedy například vyznačení povinných položek ve formuláři či odlišení odkazů od okolního textu pouze jinou barvou.
V případě, že si uživatel z důvodu své zrakové vady nastaví v prohlížeči (např. v Microsoft Internet Exploreru přes Nástroje - Možnosti sítě Internet - Usnadnění) ignorování barev, stylu a velikosti písem definovaných na stránkách www, je třeba, aby stránka byla přístupná i při tomto nastavení.
Barvy písma a podkladu musí být definovány tak, aby byly dostatečně kontrastní.
Kombinace barvy popředí (tj. např. písma) a barvy či vzorku pozadí mají dostatečný vzájemný kontrast. Kontrast barev lze vypočítat pomocí metodiky W3C (http://www.w3.org/TR/AERT#color-contrast) nebo zjistit pomocí některého z dostupných on-line nástrojů (www.juicystudio.com/services/colourcontrast.asp, nebo www.sovavsiti.cz/kontrast). Minimální hodnota pro rozdíl jasu je 125 bodů (maximum této hodnoty je 255) a pro rozdíl barev 500 bodů (maximum této hodnoty je 765). Čím jsou tato čísla větší, tím je kombinace barev více kontrastní a tudíž lépe čitelná.
Velikosti písem na stránkách by měly být definovány pouze pomocí klíčových slov CSS xx-small, x-small, small, medium, large, x-large a xx-large nebo pomocí hodnot smaller, larger, procent a jednotek em a ex), aby v případě, kdy je písmo pro čtenáře příliš malé, jej bylo možné pomocí prostředků prohlížeče (např. v Internet Exploreru Zobrazit - Velikost textu) zvětšit.
Kvůli známé chybě Internet Exploreru, ve kterém nelze zvětšit písmo, jehož velikost je definována pomocí jednotky px, není možné tuto jednotku pro definování velikosti písma použít.
Pro definici tabulek, rámců apod. je také vhodné používat ty jednotky, u nichž může uživatel jejich hodnoty měnit pomocí prostředků prohlížeče (např. rozměry tabulky je vhodnější definovat pomocí procent než pixelů).
Kód stránek je validní dle některé ze zveřejněných formálních gramatik (např. HTML 4.01 Transitional, XHTML 1.0 Strict). Jelikož odečítače obrazovky mohou mít se zpřístupněním nevalidních stránek problémy (nevalidní stránka může v nejhorším případě způsobit až "zamrznutí" prohlížeče), je důležité, aby kód stránek odpovídal některé formální gramatice.
Skutečnost, zda je kód stránky validní, lze zjistit např. pomocí on-line validátoru na http://validator.w3.org.
Pro těžce slabozraké návštěvníky může být použití vizuálních efektů (např. blikání textu, automatické změny zobrazení textu, animace textu atd.) velmi matoucí a podstatně ztěžující nebo úplně znemožňující čtení dané informace. Vyhněte se proto, pokud je to možné, používání těchto efektů, rozhodně je nepoužívejte u textů, které slouží k zobrazení důležitých informací (nadpisy, aktuality, atd.) na stránkách.
Případné použité animace či dynamicky se měnící prvky na stránkách se nesmí trvale měnit s frekvencí větší než 1 Hz (tzn. jedna fáze dynamicky se měnícího objektu musí být zobrazena alespoň 1 sekundu).
Při tvorbě WWW stránky používejte pro vyznačování nadpisů a seznamů značky, nesoucí sémantické informace o struktuře stránky.
Nadpisy definujte pomocí značek [h1], [h2] ... [h6]. Vyhněte se definování nadpisů pomocí značky [font] nebo definováním vlastní třídy pro danou úroveň nadpisu. Při použití značek pro nadpisy dbejte také na správnou hierarchii nadpisů.
V případě správného použití značek pro nadpisy si může nevidomý uživatel prostřednictvím odečítače obrazovky vybírat podle nadpisů ty části stránky, které ho opravdu zajímají, a nemusí pročítat spoustu pro něj nezajímavých informací. Tento způsob práce se dá přirovnat k výběru konkrétní kapitoly z knihy pomocí obsahu a částečně snižuje velmi omezující lineární vnímání informací.
Příklad:
Správně:
<h1>Název společnosti</h1> <h2>Export </h2> <p>Text odstavce ... </p> <h2>Import</h2> <p>Text odstavce ... </p>
Špatně:
<div class="nadpis1">Název společnosti</div> <div class="nadpis2">Export </div> <p>Text odstavce ... </p> <div class="nadpis2">Import</div> <p>Text odstavce </p>
Obdobným způsobem jako nadpisy vyznačujte v dokumentu seznamy a jejich jednotlivé položky. Definujte je pomocí značek [ul], [ol], [dl], [dt], [dd] a ne pomocí značek [p] a [br].
Příklad použití:
Správně:
<ul> <li><a href="program-kina.html">Program kina</a></li> <li><a href="program-divadla.html">Program divadla</a></li> <li><a href="koncerty.html">Koncerty</a></li> </ul>
Špatně:
<p> <a href="program-kina.html">Program kina</a><br /> <a href="program-divadla.html">Program divadla</a><br /> <a href="koncerty.html">Koncerty</a> </p>
Značky nesoucí sémantickou informaci umisťujte v dokumentech na místa, kam opravdu patří. Tzn. značkou [h1] vyznačte nejdůležitější nadpis na stránce, značkou [h2] nadpis nižší úrovně atd. Text, který je ze své podstaty seznamem, vyznačte opravdu jako seznam.
Ukázku správného používání značek pro nadpisy a seznamy lze najít např. na www.blindfriendly.cz.
Lze říci, že všechny prvky, které se na stránkách s formuláři mohou vyskytnout, jsou při dodržení určitých podmínek přístupné i těžce zrakově postiženému uživateli. Platí to pro editační políčka, zaškrtávací políčka, přepínače, rozbalovací seznamy i tlačítka. Při definování jednotlivých prvků formuláře je třeba brát zřetel na to, aby popisný text jednotlivých formulářových prvků byl srozumitelný a byl svázán s daným prvkem pomocí značky [label] a atributů for a id. Příklad:
<form action="url" method="post"> <p> <label for="name1"> <u>J</u>méno: </label> <input type="text" id="name1" /> <br /> <label for="name2"> <u>P</u>říjmení: </label> <input type="text" id="name2" /> </p> </form>
Pokud toto spojení nedefinujeme, nelze zaručit, že nevidomý uživatel bezpečně pozná, co má do daného políčka vyplnit či jakou možnost má zvolit v případě rozbalovacích seznamů či přepínačů. Pouhé vizuální umístění popisného textu vedle prvku formuláře není dostačující.
Obsahem této sekce jsou pravidla, jejichž splnění je nutné k tomu, aby orientace zrakově postiženého na stránkách byla co nejjednodušší.
Všechny netextové prvky, nesoucí významovou informaci, mají definován alternativní textový popisek. Pokud je netextový prvek použit pouze jako dekorace, je buď schován na pozadí pomocí CSS nebo má atribut [alt] ve všech případech prázdnou hodnotu. Některé odečítače obrazovky umožňují nevidomému uživateli pracovat pouze s grafikou, doplněnou alternativními textovými popisky, a grafické objekty bez alternativních popisků úplně ignorovat. Definováním alternativních popisků pouze u významově důležitých prvků tedy můžete nevidomému uživateli výrazně ulehčit práci s netextovými prvky na stránce.
Příkladem netextového prvku, jež nese významovou informaci, je například fotografie u článku, která tento článek informačně doplňuje. U takovéto fotografie je velmi vhodné alternativní textový popisek uvést. Naopak dekorační grafiku (zaoblené rožky, grafické odrážky u seznamů, atd.) je vhodné alternativními textovými popisky nedoplňovat.
Pokud je toto pravidlo beze zbytku dodrženo, nevidomý uživatel si může pomocí odečítače obrazovky grafiku bez popisků odfiltrovat a pracovat pouze s těmi grafickými prvky, které nesou nějakou informaci.
Hlavní sdělení stránky musí být na jejím začátku.
Jak jsme uvedli v úvodu, nevidomý uživatel získává informace ze stránky lineárně. Pokud hlavnímu sdělení stránky předchází např. dlouhé navigační menu, je nevidomý uživatel nucen projít toto menu pokaždé, než se dostane k hlavnímu sdělení stránky, projít. Technologie CSS umožňuje uspořádat obsah stránky tak, aby hlavní sdělení stránky bylo na logickém začátku webové prezentace a přitom nebyl narušen grafický vzhled prezentace (např. navigace je umístěna v levém sloupci, hlavní sdělení v prostředním, ale nevidomému uživateli je prostřední sloupec s hlavním obsahem stránky zpřístupněn jako první). Ukázku takového řešení je možné najít např. na www.blindfriendly.cz.
Pokud toto řešení nelze z nějakého důvodu použít, má návštěvník možnost přeskočit na hlavní sdělení stránky pomocí odkazu, který je umístěn co nejblíže k začátku stránky.
Související:
Při definici titulku stránky (značka [title] v sekci [head]) je vhodné volit taková slova, která odpovídají obsahu stránky, protože titulek stránky je pro nevidomého uživatele významným navigačním prvkem (může si jej nezávisle na tom, kde má právě umístěn kurzor, nechat přečíst).
Nicneříkající titulky jako "New Page 1" či použití stále stejného titulku (např. názvu organizace) v rámci celého webu ztěžují orientaci hlavně v situacích, kdy má uživatel otevřeno několik oken prohlížeče.
Ukázku správně řešených titulků stránek lze najít například na www.blindfriendly.cz.
Pokud odkaz vede na dokument typu jiného než HTML (např. doc, pdf, xls, ...) je vhodné na tuto skutečnost návštěvníka stránky dopředu upozornit.
Příklad správného použití:
<p><a href="metodika.doc">Metodický návod (doc, 47 kB)</a> </p> <p><a href="metodika.doc" title="Metodický návod (doc, 47 kB)"> Metodický návod</a></p>
Možnost otevření odkazované stránky do nového okna prohlížeče může být při uváženém použití velmi užitečné pro uživatele bez zrakového postižení. Tato funkce může napomoci v přehlednosti při práci s větším množstvím informací. Ale pro jakkoliv zrakově postiženého uživatele mohou být nečekaně přibývající okna prohlížeče matoucí a nepřehledné. Doporučujeme proto označení odkazu s touto vlastností doplnit i o informaci, že se odkaz otevře do nového okna. Např. takto:
<p>Instituce města:</p> <ul> <li><a href="muzeum.html" target="_blank"> Městské muzeum [nové okno] </a></li> </ul>
Další možností je umístit upozornění na otevření v novém okně prohlížeče do atributu [title]. Např. takto:
<p>Instituce města:</p> <ul> <li><a href="muzeum.html" target="_blank" title="Městské muzeum [nové okno]"> Městské muzeum </a></li> </ul>
Otevírání dalšího okna prohlížeče (např. okna s reklamou) současně s otevíráním okna s úvodní stránkou prezentace je pro nevidomého návštěvníka velmi matoucí, protože po načtení obou oken má jako hlavní (aktivní) okno to, které se otevře jako poslední (typicky to bývá to s reklamou) a tudíž se nemusí vůbec k hledaným informacím dostat.
Pokud je otevírání dalšího okna při načítání úvodní stránky nevyhnutelné, doporučujeme do něj umístit i informaci o tom, že se jedná např. o okno s reklamou a také jej doplnit odkazem vedoucím na hlavní stránku prezentace.
Tato sekce obsahuje pravidla, jejichž dodržením ještě více usnadníte zrakově postiženým návštěvníkům získávání informací z webových stránek.
Jazyk HTML umožňuje přiřadit odkazům a prvkům formuláře horkou klávesu pomocí atributu [accesskey]. Tato skutečnost má za následek, že stránka je lépe ovladatelná z klávesnice. Jakémukoliv uživateli (nejen zrakově postiženému) mohou nadefinované klávesové zkratky nemalou měrou urychlit orientaci na stránce.
Důležitým navigačním prvkem je myšlen například první odkaz v nabídce nebo prvek ve formuláři, na který se může uživatel v případě, že je pro něj definována klávesová zkratka, kdykoliv jejím stisknutím dostat. Příkladem může být třeba webová prezentace na www.blindfriendly.cz, kde je pro vstup do menu definována klávesová zkratka Alt+M. Uživatel se tak může pomocí této klávesové zkratky kdykoliv do menu přesunout.
Ukázka definice horké klávesy:
<a href="knihovna.html" accesskey="k"> <span class="podtrzeni">K</span>nihovna</a>
Při definování horkých kláves doporučujeme následující:
Na WWW stránkách se lze často setkat s možností stáhnout si určitý dokument jako externí soubor v jiném formátu než HTML (pdf, rtf, doc, eps a další). Varianta zveřejnění určitých informací ve zvláštním souboru (nikoliv pomocí HTML stránky) má nespornou výhodu pro ty uživatele, kteří nemají k dispozici trvalé připojení k Internetu a chtějí si dokument přečíst off-line. Navíc v mnohých případech je distribuce některých typů dokumentů v jiných formátech než HTML nezbytná (HTML je pro ně nevhodný). Mějte však na paměti, že pro mnoho uživatelů (nejen zrakově postižených) mohou být externí formáty dokumentů nepřístupné např. z důvodu, že nedisponují externími prohlížeči pro tyto formáty. Anebo může být čtení dokumentu v externím prohlížeči pro některou skupinu uživatelů (například uživatele nevidomé) zcela nepřístupné.
Při použití externích souborů pro distribuci dokumentu se snažte, aby stejný dokument byl dostupný i ve formátu HTML, případně i v dalších formátech. Např. obsah dokumentu ve formátu pdf může být k dispozici i prostřednictvím formátů txt, html, rtf a podobně. Význam tohoto doporučení se liší podle důležitosti dokumentů uveřejňovaných pomocí externích formátů.
V definici tabulky používejte značky [th] pro identifikaci záhlaví, [thead] pro identifikaci opakujících se záhlaví, [tfoot] pro opakující se zápatí a [caption] pro popis tabulky. Některé pomocné technologie (např. odečítače obrazovky) dokáží zpřístupnit i tyto doprovodné informace o rozložení tabulky, které mohou v orientaci napomoci. HTML jazyk také umožňuje v případě potřeby pro každý řádek definovat popisný text (parametr [title] značky [tr]) a totéž i pro sloupec (parametr [title] značky [td]). Doporučujeme také uvést stručný popis tabulky v parametru [summary] značky [table].
V malé míře se na webových stránkách vyskytují "ASCII náhrady" grafického vyjádření větších symbolů, grafů či kreseb. Jsou to kombinace znaků - většinou na několika řádcích pod sebou, které mají znázorňovat určitý grafický objekt. Pokud má tento objekt na stránce větší informační důležitost, je vhodné doplnit před tento objekt např. do hranatých závorek textový odkaz, který vede na místo v dokumentu, jenž je za tímto objektem, či odkaz vedoucí na krátký textový soubor, který stručně popisuje objekt "ASCII artu" a má stejnou informační hodnotu jako popisovaný "ASCII art" objekt.
Znakové řetězce, které bývají nazývány "smiley emoticons" [např. :-) ], je možné zpřístupnit následujícím způsobem:
<acronym title="smajlík">:-)</acronym>
Obdobným způsobem je možné také zpřístupnit jiné zkratky.
<abbr title="Microsoft Internet Explorer">MSIE</abbr>
Související odkazy:
Na samostatné stránce je uvedeno prohlášení, jasně vymezující míru přístupnosti webu či jeho jednotlivých částí. Je zde uvedeno, která pravidla přístupnosti a dle jakých metodik (WCAG 1.0, BFW, Section 508, Pravidla pro tvorbu přístupného webu vydaná MI ČR) webová prezentace splňuje.
Pokud některá část webu vzhledem ke svému charakteru pravidla přístupnosti nesplňuje (mapy, videozáznamy, atd.), je zde tento fakt také uveden.
Dále je v tomto prohlášení uveden popis ovládání webu včetně seznamu použitých horkých kláves (pokud jsou definovány).
Ukázku takového prohlášení najdete např. na www.blindfriendly.cz/prohlaseni-o-pristupnosti.php.
Definice HTML umožňuje identifikaci změn použitého jazyka v textu (parametr [lang]). Toho využijte při tvorbě stránek, na kterých se vyskytuje text psaný v různých jazycích. Např. tento text:
<p>"How do you do, my friends", zeptal se bezmyšlenkovitě svou rodnou řečí Mike, ale jeho oči mířily jinam než na nás...</p>
... by se dal definovat takto:
<p><span lang="en">"How do you do, my friends"</span>, zeptal se bezmyšlenkovitě svou rodnou řečí Mike, ale jeho oči mířily jinam než na nás...</p>
Tato identifikace může mít pro zrakově postiženého ten význam, že jím použité pomocné technologie (odečítače obrazovky) mohou změnu jazyka textu zaregistrovat a krátkodobě změnit jazyk hlasového výstupu. Text v jiném jazyce pak bude vysloven se správnou výslovností.
Vzhledem ke stávající malé podpoře této vlastnosti na straně odečítacích programů požadujeme vyznačování změny použitého jazyka pouze u rozsáhlejších textů v cizím jazyce (typicky cizojazyčná verze).
Dodržení většiny pravidel a doporučení, která jsme uvedli v předchozích kapitolách, si může tvůrce stránek zkontrolovat i vlastními silami a odhalit tak případné prohřešky proti pravidlům přístupnosti. V této závěrečné kapitole uvedeme stručně několik postupů, jak tuto kontrolu provést.
Pro testování přístupnosti webových stránek je možné použít tzv. Accessibility Toolbary, obsahující spoustu funkcí pro testování přístupnosti - namátkou jmenujme třeba možnost zapnutí/vypnutí stylového předpisu, zobrazení stránky při různých rozlišeních obrazovky, atd.
Toolbary jsou ke stažení na adresách:
Další možností je postupovat dle níže uvedených bodů:
Takto odhalíte ty grafické objekty, které nemají alternativní textový popisek.
Pokud i po tomto opatření budou jakýmkoliv způsobem přístupné všechny informace na stránce, je z hlediska její přístupnosti vše v pořádku.
Jestliže bude obsah čitelný, smysluplný a přístupný i zde, je velmi pravděpodobné, že stránka bude přístupná i pro uživatele se zrakovým postižením.
Označte celou stránku pomocí příkazu "Vyber vše", zkopírujte jej do schránky příkazem "Kopírovat" a vložte jej do jednoduchého editoru (např. "Poznámkový blok" v Microsoft Windows). Obsah stránky by opět měl být rozložen ve správném a smysluplném pořadí.
Mezi odkazy a dalšími aktivními prvky (především prvky formulářů) vyzkoušejte pohyb pomocí klávesy TAB. Ujistěte se, zda se kurzor při přesunu pomocí klávesy TAB pohybuje po jednotlivých aktivních prvcích ve smysluplném pořadí.
Zmenšujte a poté zvětšujte velikost okna prohlížeče. I při malé velikosti jeho okna by měl být přístupný celý rozsah stránky - pohybem posuvníků. Stejnou zkoušku proveďte při různých nastaveních rozlišení obrazovky. Stránka by měla být přístupná i při rozlišení 640×480 bodů.
V Microsoft Windows nastavte zobrazení obrazovky na schéma "Vysoký kontrast - černá (největší)" a zjistěte, zda je obsah stránky čitelný a přístupný. Můžete také vypnout v prohlížeči Microsoft Internet Explorer zobrazování dokumentu podle barev definovaných v jeho zdrojovém kódu - nastavení "Možnosti sítě Internet", záložka "Obecné", tlačítko "Usnadnění", dále "Ignorovat barvy, styly i velikosti písem". Po načtení stránky i při těchto nastaveních zjistěte, zda je její obsah čitelný a přístupný. Vyzkoušejte i jiná schémata, než je Vysoký kontrast - černá (největší).
"HTML 4.01 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 December 1999.
www.w3.org/TR/1999/REC-html401-19991224/
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999.
www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds., 6 November 2000
www.w3.org/TR/WCAG10-TECHS/
"HTML Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds., 6 November 2000
www.w3.org/TR/WCAG10-HTML-TECHS/
Best Practice - Pravidla pro tvorbu přístupného webu MI ČR, 30.7.2004 (pdf; 323,7 kB)
Verze 1 tohoto metodického návodu popisovala obecné zásady přístupnosti a uváděla výčet 11 technických prvků HTML s popisem jejich správného použití a s označením priority důležitosti v rozmezí 1 - 5.
Verze 2.0 z června roku 2003 byla reakcí na změny v oblasti tvorby WWW stránek a v oblasti asistivních technologií, ke kterým došlo od prvního vydání verze 1.
V této verzi také došlo k rozdělení pravidel do tří sekcí:
Došlo tak k přiblížení metodiky Blind Friendly a normy WCAG 1.0, která také rozlišuje tři úrovně přístupnosti:
Místo písmen A jsou při hodnocení stránek dle metodiky Blind Friendly používána zatržítka.
Ve verzi 2.1 byly oproti verzi 2.0 provedeny tyto změny:
Ve verzi 2.2 byly oproti verzi 2.1 provedeny tyto změny:
Ve verzi 2.3 bylo provedeno
Aktuální verze 2.3 obsahuje 25 pravidel přístupnosti.
Veškeré připomínky zasílejte na adresu info@blindfriendly.cz
K jakémukoliv užití textů a obrázků, uveřejněných na tomto serveru, je třeba
souhlas provozovatele, viz. ochrana autorských práv.
Prohlášení o přístupnosti © SONS ČR a TyfloCentrum Brno, o.p.s. 2001-8
Prosíme, podpořte provoz tohoto serveru jakoukoliv finanční částkou. Děkujeme a prosíme, napište nám o Vašem daru.
Bankovní spojení: ČS, a.s. pobočka Brno, Palackého 56, č.ú. 2025306339 / 0800, v.s.= vaše IČO, do zprávy pro příjemce zapište "682003"