Tvoříme přístupné webové stránky by Zoner Press

CYAN

MAGENTA

YELOW

CYAN

BLACK

MAGENTA

YELOW

E N C Y K L O P E D I E

ZONER software, s.r.o. významný producent software v oblasti digitální fotograﬁe, počítačové graﬁky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Všichni uživatelé nejsou stejní. Někteří hůře vidí, slyší nebo se pohybují. Mnoho uživatelů trpí některou z poruch učení, např. dyslexií. Jiní zase nevlastní optimální hardwarové či softwarové vybavení. Internet používá také mnoho lidí, kteří s ním nemají zkušenosti nebo jsou v důchodovém věku. Ačkoliv to bude pro mnohé překvapení, těchto uživatelů je mnohem více, než aby se nad nimi mohlo mávnout rukou. Celá tato široká skupina uživatelů je na Internetu diskriminována, protože dnešní webové stránky jsou postavené tak, že jim kladou do cesty nepřekročitelné bariéry. Přitom přístupnost pro všechny je jedna z přirozených charakteristik www stránek a to, že je takto pošlapávaná, je vinou pouze lajdáckých webdesignérů a lhostejných majitelů webů. Cílem této knihy je nejenom vás naučit, jak vytvářet bezbariérové weby, ale také vás přesvědčit, že je to důležitá složka každého webu, která – kromě toho, že umožní handicapovaným uživatelům www stránky vůbec používat – přinese majitelům webů také mnoho skutečných výhod. Přístupný web je tak v důsledku nejen kvalitnější a levnější, ale i navštěvovanější a ziskovější.

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na slevy, které můžete získat, a vydavatelský plán, v němž vedle knih domácích odborníků najdete celou řadu titulů světově uznávaných autorů, se informujte na adrese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

Fotograﬁe z nabídky fotobanky HELLER.CZ

www.zoner.cz

E N C Y K LO P E D I E W E B D E S I G N E R A

KATALOGOVÉ ČÍSLO: ZR414

ISBN 80-86815-11-0

Tvoříme přístupné webové stránky

Tvoříme

PŘÍSTUPNÉ webové STRÁNKY

• Co je to přístupný web a proč je tak důležitý?

• Jaké překážky brání tomu,

aby web mohli používat skutečně všichni uživatelé?

• Kdo to jsou handicapovaní

uživatelé a kolik jich vlastně je?

• Jak handicapovaní

uživatelé používají Internet?

• Čím může být web bez

bariér prospěšný také svému provozovateli?

• Které zásady při tvorbě webu dodržovat, aby nekladl uživatelům zbytečné překážky?

David Špinar

pristupnost_2.indd 1

David Špinar

www.zonerpress.cz

ZONER software, s.r.o., Koželužská 7, 602 00 Brno YELOW

Připraveno s ohledem na novelu Zákona č. 365/2000 Sb., o informačních systémech veřejné správy

Zoner Press tel.: 532 190 883 fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

MAGENTA

W E B D E S I G N E R A

ENCYKLOPEDIE WEBDESIGNERA

David Špinar

CYAN

BLACK

9 7 8 8 0 8 6

BLACK

8 1 5 1 1 4

CYAN

MAGENTA

YELLOW

BLACK 1.10.2004 11:50:42

Tvoříme

PŘÍSTUPNÉ webové STRÁNKY

Připraveno s ohledem na novelu Zákona č. 365/2000 Sb., o informačních systémech veřejné správy

David Špinar

Tvoříme přístupné webové stránky Autor: David Špinar Copyright © ZONER software s.r.o. Vydání první v září 2004. Všechna práva vyhrazena. KATALOGOVÉ ČÍSLO: ZR414 Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno Odpovědný redaktor: Miroslav Kučera DTP: Miroslav kučera © Cover foto: Jiří Heller, HELER.CZ s.r.o., www.heller.cz © Cover a layout: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí. Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-11-0

Moderní technologie jsou jedinečným nástrojem komunikace. Objem informací dostupných na internetu neustále roste a k práci s moderními technologiemi se pomalu ale jistě odhodlává i veřejná správa. Za těchto okolností musí platit, že nikdo nesmí být v přístupu k informacím na internetu diskriminován. Publikace Davida Špinara vychází jen několik týdnů po té, co Ministerstvo informatiky zveřejnilo pravidla pro tvorbu přístupných webových stránek ve veřejné správě. Není to náhoda. David Špinar byl jedním z nejvýraznějších členů odborné pracovní skupiny, kterou ministerstvo zřídilo, a bez jeho pomoci a zkušeností bychom jen obtížně náš dokument určený pro veřejnou správu dokončili. Za to mu patří upřímný dík. Zdravotní postižení nesmí představovat handicap v přístupu k informacím. Kniha Davida Špinara je jedním z kroků, které tuto bariéru pomáhají překonat. Věřím, že nejenom ve veřejné správě, ale i v soukromé sféře, bude tento trend pokračovat. Vladimír Mlynář

Tvoříme přístupné webové stránky

Obsah I – Co je přístupnost a komu je prospěšná

kapitola  Přístupný web –charakteristika a výhody

Proč je přístupnost tak důležitá Proč se bezbariérový web vyplatí

13 14

Peníze, peníze, peníze Lepší viditelnost webu Lepší použitelnost webu Posilování dobrého jména Přístupnost a zákony

14 17 19 21 21

Mýty v oblasti přístupnosti "Přístupný web je dražší" "Přístupný web je ošklivý a brání kreativitě" "Můj web nepoužívají handicapovaní" "Stačí vytvořit textovou verzi stránek"

kapitola  Handicapovaní uživatelé Internetu Zrakově postižení uživatelé Nevidomí a jinak těžce zrakově postižení uživatelé Uživatelé s vadou zraku Uživatelé se sníženým barvocitem Uživatelé s dočasně zhoršenou možností vidět

Sluchově postižení uživatelé Pohybově postižení uživatelé Uživatelé s poruchami učení a soustředění Poruchy učení Poruchy soustředění Zranění mozku a genetické vady

kapitola 

25 25 25 26 27

29 30 30 34 39 39

40 41 43 43 43 44

Uživatelé s alternativnímizobrazovacími zařízeními Shrnutí

45 46

Pravidla a metodiky tvorby přístupného webu

Web Content Accessibility Guidelines 1.0 Section 508 Blind Friendly Web Pravidla pro tvorbu přístupného webu

48 50 53 55

II – Pravidla tvorby přístupného webu kapitola  Obrázky a jiné grafické prvky Co se naučíte v této kapitole? Obrázky – skrytá hrozba Nepřístupné obrázky a hlasové čtečky

59 61 61 62 64

Óbsah a úvod Přístupné obrázky V čem reálně atribut alt pomáhá Pouhá existence atributu alt není všechno Obrázky obsahující text Ryze dekorační obrázky Obrázky zobrazující rozsáhlé informace

Obrázkové formulářové tlačítko Textová alternativa obrázkového tlačítka Obrázková mapa Shrnutí této kapitoly

kapitola  Doplňky webových stránek Co se v této kapitole naučíte Doplňky webových stránek a pravidla přístupnosti Nezávislost na kaskádových stylech (CSS) V čem může být s kaskádovými styly konkrétně problem? Jak tedy správně na CSS styly

Nezávislost na Javascriptu Jaký může nastat problém Jak správně na JavaScript

Nezávislost na flashi Jak správně na flash

Shrnutí

kapitola  Ovládání webu Co se v této kapitole naučíte Odkazy Výstižné odkazy Unikátní odkazy Odlišení odkazu Odkazy mimo WWW stránky

Navigační informace Navigace je oddělená od obsahu Navigace je srozumitelná a konzistentní napříč webem Navigace je dostupná i obejitelná Odkaz na titulní stránku a stránku vyšší úrovně Mapa webu

Obrázkové klikací mapy Mapy na straně klienta Mapa na straně serveru

Rámy Pojmenování rámů Posouvání obsahu rámů

Název stránky Co je název stránky a kde se ukazuje Proč je název stránky důležitý a jak by měl vypadat

64 65 67 67 71 73

75 76 77 78

81 81 82 83 83 86

88 88 90

94 94

101 101 102 102 104 105 106

107 107 110 113 116 119

120 121 122

124 125 127

129 130 131

Tvoříme přístupné webové stránky Stránku ovládá uživatel Shrnutí

kapitola  Formuláře Co se v této kapitole naučíte Malý úvod k formulářům Popisky formulářových polí

133 134

137 137 138 140

Popisky a metodiky přístupnosti Label – návěští každého formulářového prvku Řešení pomocí atributu title

142 142 145

Popisky formulářových polí vesložitějších případech

145

Řešení pomocí značky <label> Řešení pomocí atributu title Další příklady

Přehledné a dobře použitelné formuláře Rozsáhlé formuláře a metodiky přístupnosti Členění formulářových prvků Členění výběrových seznamů

Shrnutí

kapitola  Tabulky Co se v této kapitole naučíte Tabulky rozvrhující prvky na stránce Tabulky a linearita Tabulky pro rozvržení obsahu a strukturální značky

Tabulky nesoucí tabulková data Linearita Strukturální značky Víceúrovňová záhlaví

147 150 151

153 155 155 160

163

165 165 166 166 170

170 170 171 174

Shrnutí

176

kapitola  Barvy

177

Co se naučíme v této kapitole Nezávislost na barvách Odlišení významu Odlišení odkazů Kontrast barev popředí a pozadí

Funkce "Vysoký kontrast" V čem může být problém

Shrnutí této kapitoly

kapitola  Zdrojový kód Co se v této kapitole naučíme Sémantika a kód Proč je dodržování sémantiky důležité Nadpisy Seznamy

177 178 178 180 182

185 188

191

193 193 194 194 195 198

Óbsah a úvod Metaznačka pro určení znakové sady stránky Kaskádové styly (CSS) Validita zdrojového kódu Proč je validita důležitá

202 203 206 207

Shrnutí

208

kapitola  Písmo

209

Co se v této kapitole naučíte Velikost písma Jak se velikost písma definuje Problematická jednotka px

Typ písma Shrnutí

kapitola  Uživatelské prostředí Co se v této kapitole naučíme Nezávislost na uživatelském prostředí Nezávislost obsahu Nezávislost ovládání

Nežádoucí změny uživatelského prostředí

209 210 211 213

216 218

219 220 220 220 223

226

Automatická pop-up okna Změny parametrů okna

226 227

Odkazy otevírané do nových oken

229

V čem je problém

230

Shrnutí

231

kapitola  Textový obsah webu

233

Co se v této kapitole naučíte Jednoduchý a srozumitelný obsah Proč je jednoduchost a srozumitelnost důležitá Jak tvořit jednoduchý a srozumitelný obsah Automatická kontrola srozumitelnosti? Srozumitelnost napříč webem

Rozmístění informací podle priority Rozmístění obsahu na stránce Rozmístění slov v obsahových prvcích

Členění obsahových bloků Formuláře Text

Základní informace o webu Prohlášení o přístupnosti Nežádoucí pohyb na stránce Blink a Marquee

Shrnutí

kapitola  Přístupné PDF Co dělá PDF přístupným

233 234 234 235 235 236

239 239 241

242 242 242

244 246 249 250

250

251 252

Tvoříme přístupné webové stránky Nastavení makra PDFMaker Parametry zdrojového dokumentuv MS Wordu Textové popisky obrázků Struktura dokumentu Barvy

Kontrola v Acrobatu Zobrazení tagů Práce s tagy Závěrečná kontrola přístupnosti

Shrnutí

III – Testování přístupnosti webu kapitola  Kontrola přístupnosti www stránek Co se v této kapitole naučíte Kontrola uživatelským testem Pomocné toolbary Uživatelské testy

Kontrola automatickými nástroji Bobby Cynthia Says WAVE aDesigner

Kontrola proti bodům zvolené metodiky Jak postupovat

Přílohy

259 260 264

264 264 265 268

270

273 275 276 276 276 278

285 286 289 292 294

297 298

299

píloha A Pravidla pro tvorbu přístupného webu Úvod Pravidla pro tvorbu přístupného webu

píloha B Výběr z překladu Web Content Accessibility Guidelines 1.0 píloha C Blind Friendly Web I. Úvod II. Pravidla s nejvyšší prioritou III. Pravidla se střední prioritou IV. Pravidla s nejnižší prioritou V. Zběžná kontrola přístupnosti stránky VI. Použité zdroje VII. Změny oproti předchozím verzím

píloha D Kontrolní tabulka

Rejstřík

253 259

301 301 302

315 331 332 333 342 344 347 348 348

351

357

Přístupný web – charakteristika a výhody Tim Berners-Lee, zakladatel technologie WWW a ředitel konsorcia W3C, kdysi pronesl obdivuhodnou větu, kterou považuji za základní kámen přístupnosti a která by měla viset v kancelářích všech tvůrců webových stránek. "Síla webu je v jeho univerzalitě. Přístup pro každého nezávisle na schopnostech je jeho základní prvek." Tato věta v sobě v podstatě obsahuje všechno, co bych vám touto knihou chtěl sdělit. Kdyby ji všichni tvůrci www stránek znali a dodržovali, mohl jsem si ušetřit při psaní spoustu času. Skutečnost je však jiná a jak už to bývá, mnohem horší. Naprosto drtivá většina dnešních webových stránek v sobě obsahuje obrovské překážky, které ve výsledku způsobují to, že je daný web pro značnou část uživatelů absolutně nepřístupný. Pojďme si tedy vysvětlit, co to ta přístupnost vlastně je a v čem je důležitá. Nejprve obecně ke slovu přístupnost (v angličtině accessibility). Pod pojmem přístupnost můžeme chápat takový stav, kdy daná věc neklade svým uživatelům při používání žádné zásadní překážky. Přístupnou budovu mohou tedy například používat vozíčkáři a přístupný web zase například slabozrací. Synonynem pro přístupnost může být slovo bezbariérovost. Pojem přístupnosti webových stránek je tedy oproti obecnému pojmu zúžen na funkčnost www stránek. Přístupné stránky nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat.

Tvoříme přístupné webové stránky

Pokud bych se měl pokusit o jednu souhrnnou definici toho, co je přístupná webová stránka, vyjádřil bych se zřejmě takto: Přístupná webová stránka je použitelná pro každého uživatele Internetu, a to nezávisle na jeho postižení, schopnostech, znalostech, zkušenostech či zobrazovacích možnostech. Dobře si přečtěte tuto větu. Každé slovo v ní má svůj důležitý význam. Vnímat obsah webové stránky a ovládat její funkce je zkrátka právem každého uživatele Internetu a nesmí mu být žádný obsah či funkce upřena jen proto, že trpí některým typem zdravotního postižení, má omezené schopnosti, nedisponuje skvělými znalostmi a zkušenostmi s používáním webu nebo nevlastní optimální zobrazovací zařízení. Mnozí z vás si po přečtení předchozího odstavce řeknete, že po vás chci příliš. Že požadavek přístupnosti jde nad rámec toho, jak webová stránka standardně funguje. Že je to to samé, jako bych chtěl po výrobcích novin, aby byly přístupné i pro nevidomé. Musím vás ale z tohoto omylu rychle vyvést. Vzpomeňte si to, co o webu napsal jeho zakladatel Tim Berners-Lee. Rozdíl mezi webem a novinami je právě v tom, že zatímco noviny jsou pro lidi, kteří nevidí, nepřístupné ze své podstaty, na webu je tomu právě naopak. Web je z podstaty naprosto univerzální a přístupný a vše, co z něj vytvořilo nepřístupné médium, mají na svědomí lajdáčtí webdesignéři. Toto téma mi připomíná jeden starý vtip o perestrojce, který koloval za dob totality: Pro pochopení termínu perestrojka je třeba tří slovníků. Rusko-český slovník nám sdělí, že perestrojka je přestavba. Ottův slovník naučný nám řekne, že přestavba je rekonstrukce. A Technický slovník nám prozradí, že rekonstrukce je uvedení do původního stavu. Ačkoliv se to bude zdát na první pohled kuriózní, považuji snahu o tvorbu přístupných webů za něco podobného, jako byla snaha o perestrojku. Perestrojka stejně jako přístupnost byla sveřepě prezentována jako něco novátorského a jdoucí "nad rámec současnosti". Přitom šlo ve skutečnosti pouze o návrat "ke kořenům". Tím jsme se dostali k další definici přístupnosti, kterou považuji za velmi důležitou: Přístupnost vychází ze samotných základů webu a nejde o žádnou nadstavbu. Za to, že dnes mají bezbariérovost a web k sobě tak daleko, mohou jen a pouze tvůrci www stránek, kteří odvádějí špatně svoji práci. Jak si ukážeme ještě mnohokrát v této knize, snaha o přístupný web je ve většině případů skutečně jen "oprašování" zásad správné tvorby www stránek, na nichž byl kdysi web postaven. Byl bych moc rád, kdyby v tomto ohledu bylo mezi námi jasno, protože tuto argumentaci budu používat v této knize ještě mnohokrát. Bezbariérový web není web, ke kterému bylo něco přidáno, aby se stal přístupným. Je to přesně naopak. Je to web, u něhož byla dodržena původní pravidla, a tím byla přístupnost zachována.

Kapitola 1 – Přístupný web – charakteristika a výhody

I když mnoho tvůrců webových stránek skuhrá, že jim za přístupnost webu žádný klient nezaplatí nic navíc, je to stejně nesmyslný povzdech, jako by si výrobce automobilu stěžoval, že klient nedokáže ocenit, že vyrobil automobil na čtyřech kolech, a nikoliv na třech. Nepřístupný web je zkrátka vizitkou špatné práce tvůrce webu, který buď nemá potřebné znalosti, nebo svoji práci odbyl. Vedle toho, že je přístupnost znakem kvality práce každého webdesignéra, se jedná také o skutečně podstatný prvek www stránek, který má reálnou využitelnost. Nejdná se tak pouze o jakési bezobsažné pravidlo.

Proč je přístupnost tak důležitá Web, který je plný nepřístupných bariér, je pro mnoho uživatelů velkým problémem, ačkoliv si to vy, jakožto tvůrce stránek, ani nemusíte uvědomit. Nikdy totiž nesmíte podlehnout dojmu, že jsou všichni uživatelé stejní jako vy. Co byste měli o uživatelích vašeho webu rozhodně vědět? Buďte si jistí, že všichni uživatelé vašeho webu nemají stejné: 1. Zdravotní dispozice. Někteří hůře vidí nebo nevidí vůbec, někteří neslyší. Někteří mají problém používat horní končetiny a jiní zase trpí poruchami soustředění. 2. Zkušenosti s Internetem. Někteří třeba používají Internet jen zřídka a nemají žádné zažité mechanismy. 3. Jazykové vybavení a schopnost porozumět psanému textu. Někteří uživatelé ovládají češtinu jen omezeně a některé zbytečně složité slovní konstrukce jsou pro ně nesrozumitelné. 4. Technické vybavení. Někteří uživatelé například nemohou jako vstupní zařízení používat myš. Jiní uživatelé například musejí používat černobílý monitor nebo nemají monitor vůbec a obsah jim interpretuje hlasová čtečka. Někteří uživatelé třeba používají kapesní počítače (PDA) s malými displeji. 5. Softwarové vybavení. Někteří uživatelé nemohou používat stejný operační systém nebo internetový prohlížeč jako vy. To, že zrovna vy v těchto ohledech nemáte žádné problémy, rozhodně neznamená, že takoví jsou i vaši uživatelé. Pokud budete na tuto zásadu myslet při tvorbě svého webu, jste na dobré cestě. Další chybou, kterou byste mohli udělat, by bylo podcenění počtu uživatelů, které jsem zmiňoval v předchozích bodech. Mnoho tvůrců webových stránek podléhá dojmu, že takových uživatelů je zanedbatelně málo, a jako podklad si berou statistiky různých analytických nástrojů pro měření návštěvnosti. Přesto se však tito lidé velmi pletou. Handicapovaných uživatelů, tedy všech uživatelů, u kterých existuje rozumný důvod se domnívat, že s některými bariérami na webu budou mít potíže, totiž může být až třetina z celkového počtu uživatelů, kteří by rádi vaše webové stránky používali. Je důležité si uvědomit, že handicapovaným uživatelem

Tvoříme přístupné webové stránky

webu nejsou jen zdravotně postižení, ale všichni ti, kteří mohou mít problém vnímat obsah vašeho webu a ovládat jeho funkčnost. O tom, že 30 % není žádné nadsazené číslo, se vás pokusím přesvědčit v následující kapitole věnované handicapovaným uživatelům. Dříve, než se k tomu však dojde, bych rád probral ještě dvě podkapitoly, které logicky patří do tohoto úvodu. Za prvé, představím vám základní důvody, proč je pro majitele webu přístupnost výhodná, a za druhé se pokusím vyvrátit nejčastější mýty v oblasti bezbariérového webu.

Proč se bezbariérový web vyplatí V předchozích částech této kapitoly jsem se vás snažil trochu vystrašit, přiznávám. Nejdřív jsem hromoval proti neschopným tvůrcům webu a pak také vyjmenovával skupiny uživatelů, kterým svým nepřístupným webem můžete uškodit. Byl bych však strašně nerad, kdybyste přístupnost chápali pouze jako nějakou "buzeraci", která vás nutí dodržovat nějaké zásady. V této kapitole bych se proto rád podíval na přístupnost z té pozitivnější stránky. Popíšu vám několik výhod, které vám může bezbariérový web přinést. Zaměřím se konkrétně na následující aspekty: 1. Peníze, peníze, peníze 2. Lepší viditelnost webu. 3. Lepší použitelnost webu 4. Posilování dobrého jména. 5. Soulad se zákony.

Peníze, peníze, peníze Pomocí přístupného webu můžete více vydělat a ještě uspořit nějaké náklady. V důsledku je také pořizovací cena přístupného webu nižší než u nepřístupného. Nevěříte? Pokud ne, rád vás přesvědčím.

Handicapovaných je opravdu hodně Nejprve si uvědomte jeden důležitý fakt. Kdesi na druhé straně internetové linky existuje určitá skupina lidí, která má nějaký důvod navštívit váš web. Je druhotné, jaký ten důvod vlastně je. Prostě ho ti lidé mají. Pokud něco prodáváte, chtějí to koupit. Pokud poskytujete nějaké služby, chtějí je využít. Poskytujete-li informace, chtějí si je přečíst. Následně si představte situaci, kdy každému třetímu uživateli, který takto projeví zájem o váš web, zakážete vstup. Prostě ho pošlete jinam se vzkazem, že o něj nestojíte. Připadá vám to absurdní? Myslíte si, že takhle by se žádný rozumě myslící majitel webu nemohl chovat? Já si myslím totéž. Přesto se však přesně takto chová naprostá většina majitelů webů.

Kapitola 1 – Přístupný web – charakteristika a výhody

I když se vám to bude zdát nemožné, skutečně cca třetina uživatelů má určité specifické potřeby, které na nepřístupném webu nemohou být naplněny. V této knize je budu nazývat handicapovanými uživateli a blíže vám je představím v další kapitole. V souhrnu je jich ale skutečně ohromné množství. Ucelené statistiky z Velké Británie nám ukazují:

• 8,6 miliónů lidí trpí některou formou zdravotního postižení, což odpovídá 14 procentům britské populace.

• Každý dvanáctý muž a každá dvoustá žena trpí některým typem barvosleposti, což celkově odpovídá 9 % procentům britské populace.

• 12 miliónů lidí je starších 60 let, což odpovídá 20 % britské populace. To ale samozřejmě není všechno. Například platí že:

• V roce 2003 se celosvětově prodalo téměř 19 miliónů kapesních počítačů (PDA) a jejich prodej každým rokem stoupá (viz http://www.etforecasts.com/pr/pr0603.htm)

• Podle statistik měřícího systému Navrcholu.cz má ve svých prohlížečích nefunkční javascript 7 % uživatelů a flash 11 % uživatelů.

Handicapovaní jsou i vaše cílová skupina Velmi často se setkávám s názorem, že handicapovaných uživatelů může být sice hodně, ale rozhodně nepatří do cílové skupiny, kterou chce majitel webu oslovit. Tento názor má slabiny hned na dvou místech. Za prvé, pro některé typy webů neplatí ze samotné podstaty věci. Některé weby prostě cílové skupiny nemají, protože do cílové skupiny patří každý. Takovým webem jsou například zpravodajské weby, portály, některé internetové obchody, bankovní služby nebo weby státních a samosprávných institucí. Naprosto neoddiskutovatelný je tento fakt v případě posledního případu, tedy webů veřejných institucí. Tyto weby musí poskytovat informace všem bez rozdílu a nesmějí nikoho diskriminovat. Nad tím, že to dělají a do letošního roku to nikomu příliš nevadilo, mi zůstává rozum stát. Za druhé, i u webů, kde mají cílové skupiny svůj smysl, nelze paušálně tvrdit, že handicapovaní nejsou těmi, které by měl potřebu majitel webu oslovit. Ukážu vám několik příkladů:

• Cestovní kancelář nabízející adrenalinové zájezdy vskutku nemá v cílové skupině například nevidomé nebo tělesně postižené. Přesto si však u ní nekoupí zájezd člověk, který má pouze krátkodobě ruku v sádře. Proč? Protože web se dá ovládat jen myší a s ní uživatel v danou chvíli pracovat nemůže.

• Internetový obchod prodávající knihy vskutku nemá v cílové skupině nevidomé. Přesto si u ní nekoupí obrázkovou encyklopedii člověk trpící některou z poruch soustředění. Proč? Protože se na webu, který obsahuje nekonzistentní chaotickou navigaci, nerozdělené dlouhé obsahové bloky a malé nezvětšitelné písmo, nedokáže vůbec zorientovat.

• Bankovní dům ve svém internetovém bankovnictví třeba nemusí mít v cílové skupině uživatele s poruchou hybnosti horních končetin. Přesto si u něj ale nezřídí účet vcelku dobře placený pra-

Tvoříme přístupné webové stránky covník v IT oddělení velké firmy. Proč? Protože na jeho počítači, operačním systému či internetovém prohlížeči bankovní aplikace vůbec nefunguje.

A mohl bych samozřejmě pokračovat. Proto byste měli mít vždy na paměti, že handicapovaní, ať už je rozškatulkujeme jakkoliv, do cílové skupiny vašeho webu rozhodně patří a měli byste s nimi vždy počítat.

Šetříme náklady Ne všechny weby jsou postavené na tom, že mají svému majiteli přinést zisk. Některé jsou založeny na principu, že poskytují svým návštěvníkům pouze informace. Příkladem jsou třeba různé firemní prezentace nebo weby státních a samosprávných institucí. Přestože to však na první pohled vypadá, že takový model fungování nemá ekonomický základ, přesto nepochybně existuje. Pokud totiž obsloužím návštěvníka, který potřeboval nějaké informace, na webu, nevytvářím tím žádné dodatečné náklady. Kdyby ale zavolal nebo poslal e-mail či papírový dopis, někdo by mu musel odpověď zprostředkovat telefonicky nebo písemně. Což už pochopitelně náklady zcela pochopitelně vytváří. Přístupný web bez bariér, na kterém nemají problémy nalézt potřebné informace i handicapovaní uživatelé, vám pak může uspořit náklady v tom, že tito uživatelé nemuseli zvednout sluchátko a zdržovat vaší telefonickou podporu, nemuseli napsat dopis, na který by má někdo z vaší firmy či instituce musel odpovědět. A to zdaleka není všechno. Přístupný a kvalitně připravený web může uspořit značné náklady nejen přímo svému provozovateli, ale také přímo svému tvůrci (a tím potažmo opět provozovateli). Přístupný web se totiž ze své podstaty mnohem snadněji a rychleji upravuje, opravuje a spravuje. Syntakticky a sémanticky čistý zdrojový kód je lépe přehledný a čitelný. Pokud je důkladně oddělená vrstva obsahu a jeho struktury od vrstvy vizuální prezentace, lze obrovské změny v designu činit pouze na jednom místě a velmi rychle.

Přístupný web je levnější Představte, že za vámi přijdu a nabídnu vám reklamu ve svých novinách, které čte 70 tisíc lidí. Za reklamu si řeknu 100 tisíc Kč. Pak za vámi přijde můj konkurent a nabídne vám stejně vypadající reklamu za stejné peníze. Jediný rozdíl bude, že jeho noviny čte 100 tisíc lidí. U koho si reklamu koupíte? Pokud budete myslet ekonomicky, pak zcela určitě u mého konkurenta. Stejný princip platí u přístupných resp. nepřístupných webů. Nepřístupným webem jste schopni v průměru oslovit jen 70 % potenciálních uživatelů. Přístupným webem 100 %. Protože není nejmenší důvod, proč by v absolutním vyjádření měl stát přístupný web více peněz (pokud vám někdo tvrdí opak, pak nemluví pravdu). V relativních číslech je přístupný web radikálně levnější.

Kapitola 1 – Přístupný web – charakteristika a výhody

Lepší viditelnost webu Když jsem v předchozí části věnované penězům zmiňoval skupinu uživatelů, kteří mají nějaký důvod navštívit váš web a jejichž část může zůstat "za dveřmi", argumentoval jsem tím, že pomocí bezbariérového webu můžete celý tento potenciál využít. Přístupný web však umí ještě mnohem více. Díky němu můžete tento potenciál ještě radikálně zvýšit. Tím nástrojem, který umí zvýšit počet návštěvníků, jsou pochopitelně vyhledávače. Tedy místa, kde každý den začínají svou pouť Internetem milióny návštěvníků, kteří díky tomu, že se dobře umístíte ve výsledcích vyhledávání, mohou ocitnout i na vašem webu. Každý rozumně myslící majitel webu už dnes nepodceňuje roli vyhledávačů jakožto majoritního zdroje návštěvnosti, protože v posledních letech jsou to opravdu ony, které na weby přivádějí masy uživatelů. A vyhledávače přístupné stránky doslova milují. Víte proč? Protože jim dokonale rozumí. Aby také ne, když roboti vyhledávačů jsou těmi nejpostiženějšími uživateli, kteří kdy na vaše stránky zavítali. Roboty zajímá jen text, jeho sémantika (tj. vyznačovování významu) a odkazy. Nedokáží vidět obsah obrázků, nerozumí Javascriptu. Flash je pro ně jen nepochopitelný externí soubor. Pokud tedy budou vaše stránky přístupné, zajistíte si tím přízeň robotů, kteří ochotně zaindexují váš obsah, protože se na vašem webu vyznají, naleznou všechen text a pochopí jeho sémantické označení. Uvědomte si totiž, jak fungují vyhledávače. Jejich roboti každodenně procházejí webové stránky, po kterých se pohybují pomocí odkazů. Jediné, co je zajímá je text a jeho případné sémantické označení. Přístupný web je zároveň i "robot-friendly", protože:

• Veškeré informace jsou přítomny v textové podobě. A to buď pouze v ní, nebo v podobě textových alternativ grafických prvků.

• Žádný obsah nezůstal před roboty ukrytý například ve flashi nebo JavaScriptu. • Všechny odkazy jsou plně funkční a robot se pomocí nich dostává na další stránky. • Je dodrženo sémantické označování textu. Tvůrce webu jasně vyznačil název stránky (značka <title>), jednotlivé nadpisy (značky <h1> až <h6>) nebo různá zdůraznění (značky <em> a <strong>). Z těchto sémantických značek robot pozná, který obsah má na stránce prioritu.

• Nejdůležitější obsah je umístěn na začátku stránky, kde existuje větší pravděpodobnost, že si ho robot vyhledávače všimne. Tento způsob omezené interpretace si můžeme ukázat na jasném příkladu. Titulní stránka webu Ministerstva práce a sociálních věcí (http://www.mpsv.cz) vypadá v normálním browseru takto:

Tvoříme přístupné webové stránky

Použijeme-li ale nějaký nástroj (např. Poodle Predictor – http://www.gritechnologies.com/ tools/spider.go), který nám ukáže obsah stránky tak, jak ho vidí robot vyhledávače, obsah bude vypadat takto:

Kapitola 1 – Přístupný web – charakteristika a výhody

Existují samozřejmě i další faktory, které podporují dobrou pozici vašeho webu ve výsledcích hledání ve vyhledávačích. Kromě kvality samotného obsahu je to také tzv. odkazová popularita, tedy počet a kvalita odkazů, které vedou z jiných webů na ten váš. Přístupnost webu, tedy jakási technická kvalita, však hraje opravdu významnou úlohu a pokud chcete začít s optimalizací pro vyhledávače, rozhodně začněte s tím, že ze svého webu odstraníte bariéry, které vadí nejen robotům vyhledávačů, ale i handicapovaným lidem.

Lepší použitelnost webu Použitelný web je takový web, který se návštěvníkům dobře používá. Kde se dobře orientují, rychle naleznou to, co hledají. Kde se neztrácí, nedělají zbytečné chyby. Jsou to weby, ze kterých mají uživatelé dobrý pocit. Přístupnost je v podstatě jednou ze složek použitelnosti, která je vymezena především vůči handicapovaným uživatelům. Přístupný web je takový web, který je použitelný i pro handicapované. Existují však pochopitelně dobře použitelné, avšak nepřístupné weby. Na takových webech nemá běžný uživatel žádný problém, ale postiženému již potíže mohou vzniknout. Mezi přístupností a použitelností tedy existuje úzký vztah. Především byste měli vědět, že obě témata mají stejný cíl – spokojeného uživatele. Přesto však ne každé zlepšení použitelnosti znamená rovněž zlepšení přístupnosti. Obráceně to platí bezezbytku. Konkrétní pravidla tvorby přístupného webu, která vám v této knize představím, se od sebe mimo jiné liší i v tom, jak moc jsou zaměřeny pouze pro handicapované. Některé zásady skutečně ocení jen postižení, například nevidomí. Příkladem jsou třeba alternativní popisky obrázků. Web může být pro majoritní skupinu uživatelů bez obtíží použitelný i bez nich. Nemůže být ale přístupný. Jiná pravidla, kterých je většina, směřují souběžně i k lepší použitelnosti. Užitek z nich čerpají všichni uživatelé, ale handicapovaní stonásobně více. Příkladem je třeba zásada rozdělování rozsáhlých obsahových celků do menších částí, oddělování navigačních informací, zásada podtrhávání odkazů nebo zásada používání odkazů, ze kterých je jasné, kam vedou. Podívejte se ostatně na následující ukázku. Ačkoliv se jedná o ryzí pravidlo přístupnosti, výrazně je jím ovlivněna i použitelnost pro běžného uživatele. Ukázka 1: V textu nejsou odděleny navigačních informace od obsahových. Taková situace je nejen nepřístupná, ale také špatně použitelná.

Tvoříme přístupné webové stránky

Ukázka 2: Navigační odkazy jsou odděleny od obsahových. Web se stal přístupným pro některé handicapované uživatele a současně se zvýšila i použitelnost pro všechny ostatní.

Většina zásad tvorby přístupného webu tedy obecně zvyšují použitelnost i pro běžného uživatele, ačkoliv jsou jeho přínosy pochopitelně mnohonásobně vyšší pro handicapované.

Kontrola přístupnosti www stránek

Podle toho, jak znám tvůrce www stránek, můžu myslím směle prohlásit, že mnohem pravděpodobněji vytvoří stránky nepřístupné než přístupné. Není to ale vůbec proto, že by byla snaha o bezbariérový web nějakou činností navíc, která se tvůrcům nezaplatí. Jak jsme si už řekli v úvodu této knihy, přístupný web není o nic nákladnější než nepřístupný. Co ale platí bezezbytku, je to, že výroba přístupných stránek vyžaduje určité znalosti a zkušenosti, které často webdesignéři nemají nebo nechtějí mít. V této kapitole tedy budu vycházet z této nemilé skutečnosti. Budu předpokládat, že webová stránka vykazuje některé chyby, které způsobují nepřístupnost stránky. Naším úkolem bude chyby nalézt, a to co nejjednodušším, avšak nejspolehlivějším způsobem. Dříve, než se pustíme do jednotlivých možností, které se vám pro kontrolu přístupnosti nabízejí, je třeba poznamenat několik důležitých věcí. Za prvé, musíte mít jasno proti jakým zásadám web kontrolujete. Musíte zkrátka vědět, co považujete za chybu, a co nikoliv. Můžete buď využít některou stávající metodiku popř. jen její část, nebo si vytvořit seznam zásad sami. Nemůžete například začít kontrolovat web, pokud jste se nerozhodli, jestli na každé stránce musí být přítomen odkaz na titulní stránku, nebo to není nutné. Pokud se rozhodnete využít některou již existující metodiku, měli byste mít jasné důvody pro výběr některé z nich. Já osobně bych vám pro české prostředí doporučoval česká Pravidla pro tvorbu přístupného webu, která vznikla pro účely Zákona o informačních systémech veřejné správy a o která považuji za velmi dobrá. Za druhé, měli byste rozumně odhadnout své časové možnosti a schopnosti. Některé typy kontrol jsou časově náročné a pokud jim nebudete věnovat požadovaný čas a pozornost, výsledky vám budou k ničemu. U některých typů kontrol se také vyžaduje určitá míra znalosti značkovacího jazyka nebo kaskádových stylů. Pokud je nemáte, vybírejte si takovou možnost kontroly, která je nevyžaduje.

276

Tvoříme přístupné webové stránky

Jakmile jste si udělali jasno v tom, co považujete z hlediska přístupnosti za chybu a jaké jsou vaše možnosti a schopnosti, můžete se pustit do testování.

Co se v této kapitole naučíte Pro testování a kontrolu přístupnosti na stránkách se vám nabízejí tři základní možnosti, které se vás pokusím naučit a vysvětlit vám jejich výhody a nevýhody. Již v tuto chvíli bych vám rád zdůraznil, že tyto způsoby kontroly rozhodně nejsou v konkurenčním vztahu a můžete je provádět všechny najednou. Jsou to: 1. Kontrola uživatelským testem. Pomocí svého uživatelského prostředí se pokusíme nasimulovat potenciálně problematické situace, kterým musí čelit handicapovaní. Pokud stránka v těchto simulacích obstojí, můžeme být spokojeni. 2. Kontrola automatickými nástroji. Pro ulehčení práce se vám nabízí několik šikovných on-line nástrojů, které dokáží některé prvky zkontrolovat za vás. U bodů, které automaticky zkontrolovat nelze, vás alespoň poprosí, abyste danou věc zkontrolovali ručně. 3. Kontrola proti bodům zvolené metodiky. Nejtěžší, avšak nejspolehlivější metoda, při které procházíte kontrolní body metodiky bod po bodu a kontrolujete, zda-li je konkrétní zásada na webu splněna či nikoliv.

Kontrola uživatelským testem Podstatou kontroly uživatelským testem je simulace situací, kterým musí čelit handicapovaní uživatelé. Je to vlastně taková zkouška, zda-li web obstojí, pokud nejsou k dispozici optimální podmínky. Jedná se o nejjednodušší formu kontroly, která vás nebude stát příliš času ani námahy, ale přesto dokáže odhalit podstatnou část prvků, které mohou z hlediska přístupnosti činit problémy. Pochopitelně však zdaleka ne všechny. Některé simulace jsou velmi jednoduché, jiné již předpokládají trochu znalostí práce s vaším prohlížečem. Dříve než se pustíme do jednotlivých uživatelských testů, ukážu vám několik pomůcek, které vám při jejich realizaci mohou pomoci. Jedná se o rozšíření vašeho prohlížeče – tzv. toolbary.

Pomocné toolbary Rád bych vám představil dva šikovné toolbary, pomocí nichž můžete jednoduše testovat některé prvky přístupnosti na svých www stránkách. Jeden pro MS Internet Explorer, druhý pro alternativní browser Mozilla / Firefox. S jejich pomocí jsou některé simulace mnohem jednodušeji realizovatelné. Stačí si je jen nainstalovat a pak rovnou v prohlížeči měnit různá nastavení, zobrazovat některé nadstandardní informace, validovat stránku, měnit barvy atp.

Kapitola 15 – Kontrola přístupnosti www stránek

277

Web Accessibility Toolbar Prohlížeč: MS Internet Explorer. Download: http://www.slunecnice.cz/product/Web-Accessibility-Toolbar/

Web Developer Toolbar Prohlížeč: Mozilla/Firefox. Download: http://www.slunecnice.cz/product/Web-Developer/

Nebudu vám zde sáhodlouze popisovat, co všechno můžete pomocí toolbarů provádět. Mnohem rychlejší bude, pokud si je nainstalujete a sami vyzkoušíte.

278

Tvoříme přístupné webové stránky

Uživatelské testy Nyní se ale pusťme do jednotlivých uživatelských testů, ve kterých by váš web měl měl obstát. Pokud neobstojí, je to důvod k nápravě. Všechny testy provedeme na jedné stránce, a sice titulní stránce webu Ministerstva pro místní rozvoj (http://www.mmr.cz), která pro zcela běžného uživatele vypadá takto:

Kapitola 15 – Kontrola přístupnosti www stránek

279

1. Vypnutá grafika Vypněte si v prohlížeči zobrazování obrázků. Pokud pomocí obsahu atributu alt, který se zobrazí místo obrázku pochopíte smysl a obsah všech obrázků, které nesou významovou informaci, je všechno v pořádku. Web ministerstva – špatně. Naprostá většina obrázku (i navigačních) postrádá vhodně nadefinovaný atribut alt.

280

Tvoříme přístupné webové stránky

2. Vypnuté kaskádové styly Vypněte si v prohlížeči podporu kaskádových stylů. Pokud jsou všechny textové informace vůči svému pozadí čitelné, pořadí obsahových prvků zůstává smysluplné a žádná informace nechybí, je všechno v pořádku. Web ministerstva – dobře. Všechny prvky jsou funkční a dostupné, i když není aktivní podpora CSS.

3. Vypnuté aktivní prvky Vypněte si v prohlížeči podporu aktivních prvků, jako jsou JavaScript, Java applety nebo Flash. Pokud jsou všechny ovládací prvky stále funkční a všechny prvky, které nesly informační hodnotu, stále viditelné, je všechno v pořádku. Web ministerstva – dobře. Všechny prvky jsou funkční a dostupné, i když není aktivní podpora aktivních prvků. 4. Ovladatelnost klávesnicí Zkuste ovládat svůj web pouze pomocí klávesnice. Pokud budete moci aktivovat jakýkoliv odkaz či vyplnit a odeslat každý formulář, je všechno v pořádku. Web ministerstva – dobře. Stránka je ovladatelná i klávesnicí.

Kapitola 15 – Kontrola přístupnosti www stránek

281

5. Velikost okna a rozlišení obrazovky Různým způsobem měňte velikost aktivního okna prohlížeče a rozlišení své obrazovky (až na 640 x 480 pixelů). Pokud bude pomocí posuvníků dostupný celý obsah stránky, je všechno v pořádku. Web ministerstva – dobře. Stránka je dostupná celá pomocí posuvníků v různě velikých oknech prohlížeče i různých rozlišeních obrazovky.

282

Tvoříme přístupné webové stránky

6. Velikost textu V prohlížeči MS Internet Explorer pomocí menu zvětšete velikost písma na stránce. Pokud se písmo skutečně zvětší a bude navíc stále dobře čitelné (tj. nezmizí pod některým jiným obsahovým prvkem), je všechno v pořádku. Web ministerstva – špatně. Písmo se nedá zvětšit.

Kapitola 15 – Kontrola přístupnosti www stránek

283

7. Textový prohlížeč Zobrazte si stránku v textovém prohlížeči (např. Lynx) nebo nějakém jeho emulátoru (http:// www.delorie.com/web/lynxview.html). Pokud budou v takovém zobrazení přítomny všechny informace, které budou navíc správně strukturálně poskládány, a stránka bude normálně ovladatelná, je všechno v pořádku. Web ministerstva – špatně. Grafické prvky nemají textovou náhradu.

284

Tvoříme přístupné webové stránky

8. Extrakce textového obsahu 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ř. do Poznámkový bloku ve Windows). Pokud je obsah stránky rozložen ve správném a smysluplném pořadí, je všechno v pořádku. Web ministerstva – dobře. Textový obsah je strukturován ve správném pořadí.

9. Vysoký kontrast Zapněte ve Windows funkci Vysoký kontrast (levé tlačítko na Ploše > Vlastnosti > Vzhled > Barevné schéma > Vysoký kontrast – černá). Pokud na stránce budou viditelné všechny prvky a bude-li viditelný vkládaný text do formulářových polí, je všechno v pořádku. Web ministerstva – špatně. V patičce webu není viditelný text, protože se jedná o černý text na černém pozadí.