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

CYAN MAGENTA YELOW BLACK CYAN MAGENTA YELOW BLACK

CYAN MAGENTA YELLOW BLACKCYAN MAGENTA YELOW BLACK

DavidŠpinar

ENCYKLOPEDIE WEBDESIGNERA

Tvoř

íme

přís

tupn

épř

ístu

pné

web

ové

strá

nky

strá

nky

David Špinarwww.zonerpress.cz

• 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?

© Foto: Jiří Heller

PŘÍSTUPNÉ webové

Tvoříme

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

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živate-lů 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 charakteris-tik www stránek a to, že je takto pošlapávaná, je vinou pouze laj-dáckých webdesignérů a lhostejných majitelů webů.

Cílem této knihy je nejenom vás naučit, jak vytvářet bezbariéro-vé 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é mno-ho skutečných výhod. Přístupný web je tak v důsledku nejen kvalit-nější a levnější, ale i navštěvovanější a ziskovější.

Zoner Press tel.: 532 190 883 fax: 543 257 245e-mail: [email protected]://www.zonerpress.cz

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

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

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 web-designér při každodenní práci. Na slevy, které můžete získat, a vy-davatelský 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 ad-rese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PRÉMIOVÝ PLUSPLUS PROGRAM PROGRAM.

© F

oto:

Jiří

Hel

ler,

ww

w.h

elle

r.cz

Foto

grafi

e z

nabí

dky

foto

bank

y H

ELLE

R.CZ

9 7 8 8 0 8 6 8 1 5 1 1 4

ISBN 80-86815-11-0KATALOGOVÉ ČÍSLO: ZR414

ZONER software, s.r.o. významný producent software v oblasti digitální fotografie,

počítačové grafiky a multimédií, poskytovatel internetových

služeb, souvisejících s prezentací na internetu a e-komercí,

a nakladatelství odborné literatury.

www.zoner.cz

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

pristupnost_2.indd 1pristupnost_2.indd 1 1.10.2004 11:50:421.10.2004 11:50:42

PŘÍSTUPNÉ webové

Tvoříme

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

tvorba pristupnych www stranek.indb 1 28.9.2004 12:11:48

Tvoříme přístupné webové stránkyAutor: David Špinar

Copyright © ZONER software s.r.o.

Vydání první v září 2004. Všechna práva vyhrazena.

KATALOGOVÉ ČÍSLO: ZR414

Zoner PressZONER 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: [email protected] 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ýraz-ně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ánky4

Obsah

I – Co je přístupnost a komu je prospěšná 9 kapitola Přístupný web –charakteristika a výhody 11

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

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

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

kapitola Handicapovaní uživatelé Internetu 29Zrakově postižení uživatelé 30

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

Sluchově postižení uživatelé 40Pohybově postižení uživatelé 41Uživatelé s poruchami učení a soustředění 43

Poruchy učení 43Poruchy soustředění 43Zranění mozku a genetické vady 44

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

kapitola Pravidla a metodiky tvorby přístupného webu 47Web Content Accessibility Guidelines 1.0 48Section 508 50Blind Friendly Web 53Pravidla pro tvorbu přístupného webu 55

II – Pravidla tvorby přístupného webu 59 kapitola Obrázky a jiné grafické prvky 61

Co se naučíte v této kapitole? 61Obrázky – skrytá hrozba 62

Nepřístupné obrázky a hlasové čtečky 64


Óbsah a úvod 5

Přístupné obrázky 64V čem reálně atribut alt pomáhá 65Pouhá existence atributu alt není všechno 67Obrázky obsahující text 67Ryze dekorační obrázky 71Obrázky zobrazující rozsáhlé informace 73

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

kapitola Doplňky webových stránek 81Co se v této kapitole naučíte 81Doplňky webových stránek a pravidla přístupnosti 82Nezávislost na kaskádových stylech (CSS) 83

V čem může být s kaskádovými styly konkrétně problem? 83Jak tedy správně na CSS styly 86

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

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

Shrnutí 99 kapitola Ovládání webu 101

Co se v této kapitole naučíte 101Odkazy 102

Výstižné odkazy 102Unikátní odkazy 104Odlišení odkazu 105Odkazy mimo WWW stránky 106

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

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

Rámy 124Pojmenování rámů 125Posouvání obsahu rámů 127

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



Stránku ovládá uživatel 133Shrnutí 134

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

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

Popisky formulářových polí vesložitějších případech 145Řešení pomocí značky <label> 147Řešení pomocí atributu title 150Další příklady 151

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

Shrnutí 163 kapitola Tabulky 165

Co se v této kapitole naučíte 165Tabulky rozvrhující prvky na stránce 166

Tabulky a linearita 166Tabulky pro rozvržení obsahu a strukturální značky 170

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

Shrnutí 176 kapitola Barvy 177

Co se naučíme v této kapitole 177Nezávislost na barvách 178

Odlišení významu 178Odlišení odkazů 180 Kontrast barev popředí a pozadí 182

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

Shrnutí této kapitoly 191 kapitola Zdrojový kód 193

Co se v této kapitole naučíme 193Sémantika a kód 194

Proč je dodržování sémantiky důležité 194Nadpisy 195Seznamy 198


Óbsah a úvod 7

Metaznačka pro určení znakové sady stránky 202Kaskádové styly (CSS) 203Validita zdrojového kódu 206

Proč je validita důležitá 207Shrnutí 208

kapitola Písmo 209Co se v této kapitole naučíte 209Velikost písma 210

Jak se velikost písma definuje 211Problematická jednotka px 213

Typ písma 216Shrnutí 218

kapitola Uživatelské prostředí 219Co se v této kapitole naučíme 220Nezávislost na uživatelském prostředí 220

Nezávislost obsahu 220Nezávislost ovládání 223

Nežádoucí změny uživatelského prostředí 226Automatická pop-up okna 226Změny parametrů okna 227

Odkazy otevírané do nových oken 229V čem je problém 230

Shrnutí 231 kapitola Textový obsah webu 233

Co se v této kapitole naučíte 233Jednoduchý a srozumitelný obsah 234

Proč je jednoduchost a srozumitelnost důležitá 234Jak tvořit jednoduchý a srozumitelný obsah 235Automatická kontrola srozumitelnosti? 235Srozumitelnost napříč webem 236

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

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

Základní informace o webu 244Prohlášení o přístupnosti 246Nežádoucí pohyb na stránce 249

Blink a Marquee 250Shrnutí 250

kapitola Přístupné PDF 251Co dělá PDF přístupným 252



Nastavení makra PDFMaker 253Parametry zdrojového dokumentuv MS Wordu 259

Textové popisky obrázků 259Struktura dokumentu 260Barvy 264

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

Shrnutí 270

III – Testování přístupnosti webu 273 kapitola Kontrola přístupnosti www stránek 275

Co se v této kapitole naučíte 276Kontrola uživatelským testem 276

Pomocné toolbary 276Uživatelské testy 278

Kontrola automatickými nástroji 285Bobby 286Cynthia Says 289WAVE 292aDesigner 294

Kontrola proti bodům zvolené metodiky 297Jak postupovat 298

Přílohy 299 píloha A Pravidla pro tvorbu přístupného webu 301

Úvod 301Pravidla pro tvorbu přístupného webu 302

píloha B Výběr z překladu Web Content Accessibility Guidelines 1.0 315 píloha C Blind Friendly Web 331

I. Úvod 332II. Pravidla s nejvyšší prioritou 333III. Pravidla se střední prioritou 342IV. Pravidla s nejnižší prioritou 344V. Zběžná kontrola přístupnosti stránky 347VI. Použité zdroje 348VII. Změny oproti předchozím verzím 348

píloha D Kontrolní tabulka 351

Rejstřík 357


1

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ě ob-sahuje 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.

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



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án-ky 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, ne-disponuje 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řístup-nosti 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. Vzpo-meň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 pe-restrojka je přestavba. Ottův slovník naučný nám řekne, že přestavba je rekonstrukce. A Tech-nický 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 13

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 oce-nit, ž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 zane-dbatelně málo, a jako podklad si berou statistiky různých analytických nástrojů pro měření návštěvnos-ti. 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



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 hromo-val 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ízePomocí 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řizo-vací 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. Poskytu-jete-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, za-káž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ů.



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ě od-poví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á skupinaVelmi č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 ne-mají, 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-



covník v IT oddělení velké firmy. Proč? Protože na jeho počítači, operačním systému či interne-tové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ákladyNe 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í pre-zentace 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ži-vatelé, 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řístup-ný 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 rekla-mu 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ší.



Lepší viditelnost webuKdyž 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éro-vé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ě texto-vý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 Minis-terstva práce a sociálních věcí (http://www.mpsv.cz) vypadá v normálním browseru takto:



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:



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 kva-lita 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 handica-povaný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 majo-ritní 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 obsa-hový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 ne-přístupná, ale také špatně použitelná.



Ukázka 2: Navigační odkazy jsou odděleny od obsahových. Web se stal přístupným pro některé handi-capované 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é.


15

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.

Kontrola přístupnosti www stránek



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čítePro 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 najed-nou. 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 testemPodstatou 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é toolbaryRá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í brow-ser 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, valido-vat stránku, měnit barvy atp.


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

Web Accessibility ToolbarProhlížeč: MS Internet Explorer.

Download: http://www.slunecnice.cz/product/Web-Accessibility-Toolbar/

Web Developer ToolbarProhlíž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 rych-lejší bude, pokud si je nainstalujete a sami vyzkoušíte.



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



1. Vypnutá grafika

Vypněte si v prohlížeči zobrazování obrázků. Pokud pomocí obsahu atributu alt, který se zob-razí 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ě nadefino-vaný atribut alt.



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í hodno-tu, 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í.



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.



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 obsaho-vým prvkem), je všechno v pořádku.

Web ministerstva – špatně. Písmo se nedá zvětšit.



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ál-ně ovladatelná, je všechno v pořádku.

Web ministerstva – špatně. Grafické prvky nemají textovou náhradu.



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íro-vat" 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í.


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

Documents