66
Přístupnost webových Přístupnost webových stránek stránek David Špinar, Dobrý web David Špinar, Dobrý web

Přístupnost webových stránek

  • Upload
    zinnia

  • View
    48

  • Download
    9

Embed Size (px)

DESCRIPTION

Přístupnost webových stránek. David Špinar, Dobrý web. Obsah prezentace. Co je to přístupnost a k čemu je dobrá Pro koho a proč je přístupnost důležitá Legislativa v oblasti přístupnosti Zásady přístupného webu Zákon č. 365/2000 Sb. o ISVS Další metodiky (WCAG, Section 508) - PowerPoint PPT Presentation

Citation preview

Page 1: Přístupnost webových stránek

Přístupnost webových Přístupnost webových stránekstránek

David Špinar, Dobrý webDavid Špinar, Dobrý web

Page 2: Přístupnost webových stránek

Obsah prezentaceObsah prezentace

Co je to přístupnost a k čemu je dobrá Pro koho a proč je přístupnost důležitá Legislativa v oblasti přístupnosti Zásady přístupného webu

►Zákon č. 365/2000 Sb. o ISVS►Další metodiky (WCAG, Section 508)

Testování přístupnosti webu

Page 3: Přístupnost webových stránek

Co je to „přístupnost“Co je to „přístupnost“

► V angličtině „accessibility“V angličtině „accessibility“► Několik definic:Několik definic:

Přístupná webová stránka je použitelná pro každého uživatele Internetu, a sice nezávisle na jeho postižení, schopnostech, znalostech, zkušenostech či zobrazovacích možnostech.

Přístupná webová stránka nestaví svým potenciálním uživatelům do cesty překážky, které by jim znemožnily danou stránku efektivně použít.

Přístupná webová stránka respektuje své uživatele a předpokládá vysokou variabilitu možností a schopností svých uživatelů.

► Přístupnost je jeden ze základních kamenů tvorby webových Přístupnost je jeden ze základních kamenů tvorby webových stránek (jako další se uvádějí např. použitelnost, dobrá stránek (jako další se uvádějí např. použitelnost, dobrá informační architektura či SEO)informační architektura či SEO)

Page 4: Přístupnost webových stránek

Proč je přístupnost tak důležitá?Proč je přístupnost tak důležitá?

Existují dva základní důvody (premisy):Existují dva základní důvody (premisy):1. Všichni uživatelé Internetu nejsou stejní.

Všichni stejně nevidí, stejně neslyší, nemluví stejným jazykem, nemají stejnou schopnost používat horní končetiny, nemají stejné hardwarové vybavení, znalosti a zkušenosti v používání Internetu apod.

2. Každý takto "specifický" uživatel má většinou i "specifické" potřeby, které není schopen překročit či obejít.

Page 5: Přístupnost webových stránek

Kdo tedy má „specifické“ Kdo tedy má „specifické“ potřeby?potřeby?► Uživatele se „specifickými“ potřebami budeme Uživatele se „specifickými“ potřebami budeme

nazývat „hendikepovaným“.nazývat „hendikepovaným“.► „„Hendikepovaný uživatel“ je v našem kontextu Hendikepovaný uživatel“ je v našem kontextu

tedy:tedy: uživatel, u kterého lze důvodně předpokládat, že mu

nevhodně vytvořená webová stránka bude činit problémy při použití, které není schopen jednoduše obejít. Tento hendikep vztahuje tedy pouze na použitelnost webových stránek. Hendikepovaným uživatelem z hlediska použití webových stránek budeme tak nazývat i člověka, který v běžném životě žádný hendikep nemá.

Page 6: Přístupnost webových stránek

Základní kameny přístupnostiZákladní kameny přístupnosti

Základním smyslem snahy o přístupný Základním smyslem snahy o přístupný web je tedy:web je tedy:

1. Pochopit, jací uživatelé s různými hendikepy používají Internet.

2. Pochopit, jaké jsou jejich specifické potřeby, které nemohou obejít

3. Tyto specifické potřeby naplnit.

Page 7: Přístupnost webových stránek

Základní důvody pro přístupnostZákladní důvody pro přístupnost

► Více obchodních příležitostíVíce obchodních příležitostí Hendikepovaných uživatelů je skutečně mnoho

(např. v UK cca 8,6 mil s kupní silou 45 mld. Liber ročně)

Není pravda, že hendikepovaní nejsou cílovou skupinou

► Lepší viditelnost webuLepší viditelnost webu Přístupný web je zároveň „robot-friendly“ Vyhledavače majitelé stránek milují, ale často jim

indexaci pěkně znepříjemňují

Page 8: Přístupnost webových stránek

Základní důvody pro přístupnost Základní důvody pro přístupnost II.II.► Posilování značkyPosilování značky

Diskriminace je vnímána negativně Přístupnost buduje renomé

► Úspora nákladů na správu a změny webuÚspora nákladů na správu a změny webu Přístupný web se díky svým charakteristikám

velmi dobře spravuje a aktualizuje.► ZákonnostZákonnost

Nepřístupné weby jsou v mnoha zemích za hranicí zákona.

Page 9: Přístupnost webových stránek

Hendikepovaní uživateléHendikepovaní uživatelé

Page 10: Přístupnost webových stránek

Základní skupiny Základní skupiny hendikepovanýchhendikepovanýchHendikepované uživatele Internetu můžeme Hendikepované uživatele Internetu můžeme

rozdělit do následujících skupin:rozdělit do následujících skupin:1. Zrakově postižení2. Sluchově postižení3. Pohybově postižení4. Uživatele se zobrazovacími problémy5. Uživatelé s poruchami učení a soustředění6. Roboti7. Ostatní

Page 11: Přístupnost webových stránek

Zrakově postiženíZrakově postižení

► Považováni často za jedinou skupinu Považováni často za jedinou skupinu hendikepovanýchhendikepovaných

►Nepřístupný web na ně dopadá nejvíceNepřístupný web na ně dopadá nejvíce►Nejsou největší skupinouNejsou největší skupinou► Zrakově postižené můžeme opět rozdělit do Zrakově postižené můžeme opět rozdělit do

několika skupinněkolika skupin Zcela nevidomí a jinak těžce zrakově postižení Slabozrací Barvoslepí Uživatelé s dočasně zhoršenou schopností vidět

Page 12: Přístupnost webových stránek

Zcela nevidomí a jinak těžce Zcela nevidomí a jinak těžce zdravotně postiženízdravotně postižení► Menší část, ale s největším negativním dopadem Menší část, ale s největším negativním dopadem

nepřístupných stráneknepřístupných stránek► Internet je pro ně často jedinou možností jak Internet je pro ně často jedinou možností jak

„překonat“ své postižení„překonat“ své postižení► Pro prezentaci obsahu používají hlasové čtečky a Pro prezentaci obsahu používají hlasové čtečky a

braillský řádekbraillský řádek► Jejich základní potřebou je možnost spolehnout se Jejich základní potřebou je možnost spolehnout se

na textovou informaci – obsah musí být vhodně na textovou informaci – obsah musí být vhodně strukturován, grafické a multimediální prvky musejí strukturován, grafické a multimediální prvky musejí mít textové alternativy, musí být použitelná mít textové alternativy, musí být použitelná navigace.navigace.

Page 13: Přístupnost webových stránek

SlabozracíSlabozrací

► Jen omezená možnost používat zrakJen omezená možnost používat zrak►Potřebují manipulovat s textem, Potřebují manipulovat s textem,

hlavně jej zvětšovathlavně jej zvětšovat►Text musí být čitelný i při velkém Text musí být čitelný i při velkém

zvětšení, a to i vůči svému okolí zvětšení, a to i vůči svému okolí (problém s obrázky, výškou řádků (problém s obrázky, výškou řádků apod.)apod.)

Page 14: Přístupnost webových stránek

BarvoslepíBarvoslepí

►Forem sníženého barevného citu je Forem sníženého barevného citu je celá řadacelá řada

►Tito uživatelé mají často problém Tito uživatelé mají často problém rozeznávat některé barvy od sebe.rozeznávat některé barvy od sebe.

► Je třeba dodržovat správný kontrast Je třeba dodržovat správný kontrast barev a u prezentace důležitého barev a u prezentace důležitého obsahu se na barvy raději nespoléhat.obsahu se na barvy raději nespoléhat.

Page 15: Přístupnost webových stránek

Uživatelé s dočasně zhoršenou Uživatelé s dočasně zhoršenou možností vidětmožností vidět

► Jde o aktuální světelné a zobrazovací Jde o aktuální světelné a zobrazovací možnostímožností

►Např. osvětlení místnosti, přímé slunce Např. osvětlení místnosti, přímé slunce v monitoru, nekvalitní monitor apod.v monitoru, nekvalitní monitor apod.

►Opět je třeba dbát na kontrast, Opět je třeba dbát na kontrast, možnost zvětšení obsahu, správnou možnost zvětšení obsahu, správnou strukturu dokumentu apod.strukturu dokumentu apod.

Page 16: Přístupnost webových stránek

Sluchově postiženíSluchově postižení

► Zatím není takový problém, protože audio Zatím není takový problém, protože audio složek na webu příliš není.složek na webu příliš není.

►Mezi sluchově postižené řadíme nejen Mezi sluchově postižené řadíme nejen skutečně postižené, ale majitele počítačů bez skutečně postižené, ale majitele počítačů bez reproduktorů nebo uživatele s dočasně reproduktorů nebo uživatele s dočasně zhoršenou možností slyšet.zhoršenou možností slyšet.

► Je třeba vždy u každé audio a multimediální Je třeba vždy u každé audio a multimediální složky uživateli nabídnout textovou složky uživateli nabídnout textovou alternativu.alternativu.

Page 17: Přístupnost webových stránek

Pohybově postiženíPohybově postižení

►Základní problém: nemožnost používat Základní problém: nemožnost používat myšmyš

► Jediným způsobem, jak web ovládat, je Jediným způsobem, jak web ovládat, je často jen klávesnice.často jen klávesnice.

► I v rámci skupiny pohybově postižených je I v rámci skupiny pohybově postižených je skupina s „dočasnou“ nemožností ovládat skupina s „dočasnou“ nemožností ovládat horní končetiny (úrazy apod.)horní končetiny (úrazy apod.)

►Klávesnice tedy musí stránky Klávesnice tedy musí stránky plnohodnotně ovládat.plnohodnotně ovládat.

Page 18: Přístupnost webových stránek

Uživatelé se zobrazovacími Uživatelé se zobrazovacími potížemipotížemi► Jsou to de facto:Jsou to de facto:

Uživatelé alternativních prohlížečů Majitelé jiných zobrazovacích zařízení

►Není to vždy otázkou volbyNení to vždy otázkou volby► Škála zobrazovacích zařízení radikálně rosteŠkála zobrazovacích zařízení radikálně roste► V rámci těchto zařízení nejde o to, aby se V rámci těchto zařízení nejde o to, aby se

web zobrazoval zcela stejně, ale aby byl web zobrazoval zcela stejně, ale aby byl použitelný a funkčnípoužitelný a funkční

Page 19: Přístupnost webových stránek

Uživatelé s poruchami učení a Uživatelé s poruchami učení a soustředěnísoustředění► Takových uživatelů je velmi mnoho, ačkoliv se na Takových uživatelů je velmi mnoho, ačkoliv se na

ně v souvislosti s přístupností často zapomínáně v souvislosti s přístupností často zapomíná► Konkrétních projevů velmi mnoho, nejčastější Konkrétních projevů velmi mnoho, nejčastější

např. dyslexie či klasické poruchy soustředěnínapř. dyslexie či klasické poruchy soustředění► Jejich potřeby: přehledné, strukturované a Jejich potřeby: přehledné, strukturované a

jednoduše pochopitelné webové stránky se jednoduše pochopitelné webové stránky se strukturovaným obsahem, přehlednou navigací. strukturovaným obsahem, přehlednou navigací. Písmo spíše větší, krátké odstavce, hodně Písmo spíše větší, krátké odstavce, hodně nadpisů, více vizuálních "zarážek" pro oči, více nadpisů, více vizuálních "zarážek" pro oči, více obrázkových symbolů místo slov apod. obrázkových symbolů místo slov apod.

Page 20: Přístupnost webových stránek

RobotiRoboti

► Jde především o roboty vyhledávačůJde především o roboty vyhledávačů► Robot nevidí barvy, neslyší zvuk, nerozpozná Robot nevidí barvy, neslyší zvuk, nerozpozná

obsah obrázků, neumí používat JavaScript ani obsah obrázků, neumí používat JavaScript ani Flash. Jádro je tedy v textu a odkazech. Flash. Jádro je tedy v textu a odkazech.

► Je třeba nabídnout co nejlepší obsah, co Je třeba nabídnout co nejlepší obsah, co nejlépe označkovaný strukturálními značkami nejlépe označkovaný strukturálními značkami (nadpisy, odstavce, seznamy, zdůraznění (nadpisy, odstavce, seznamy, zdůraznění apod.) a vždy se u toho spolehnout na čistý apod.) a vždy se u toho spolehnout na čistý text. text.

Page 21: Přístupnost webových stránek

OstatníOstatní

►Lidé s omezenou schopností Lidé s omezenou schopností porozumět danému jazyku (cizinci, porozumět danému jazyku (cizinci, emigranti apod.)emigranti apod.)

►Všichni ostatní, pro které přístupný Všichni ostatní, pro které přístupný web zlepší jejich použitelnostweb zlepší jejich použitelnost

Page 22: Přístupnost webových stránek

Legislativa v oblasti Legislativa v oblasti přístupnostipřístupnosti

Page 23: Přístupnost webových stránek

Legislativa v oblasti přístupnostiLegislativa v oblasti přístupnosti

► Základním důvodem pro legislativuZákladním důvodem pro legislativu Snížit možnost diskriminace. Najít pro neziskové organizace podobný efekt

jako je pro komerční subjekty zisk.► Různé země mají různé právní normy Různé země mají různé právní normy

upravující přístupnost:upravující přístupnost: Obecné právní normy upravují diskriminaci jako

takovou (např. UK, Německo, Portugalsko) Specializované právní normy na přístupnost

webových stránek (např. USA, ČR)

Page 24: Přístupnost webových stránek

Legislativa v oblasti přístupnosti Legislativa v oblasti přístupnosti II.II.►ČR: Zákon č. 365/2000 Sb. o ISVSČR: Zákon č. 365/2000 Sb. o ISVS

Zatím v projednávání Platné pro subjekty státní správy a

samosprávy Povinnost přístupného webu pod hrozbou

sankce 1 milión Kč Konkrétní pravidla řeší prováděcí předpis (do

doby schválení novely doporučení, poté vyhláška)

Page 25: Přístupnost webových stránek

Legislativa v oblasti přístupnosti Legislativa v oblasti přístupnosti III.III.► US Section 508US Section 508

Americký zákon upravující přístupnost webových stránek Účinný na subjekty financované z veřejných zdrojů Vychází z pravidel WCAG, ale přináší svou vlastní

interpretaci pravidel Navazuje na obecný zákon „Americans with Disabilites Act

(ADA)► Disability Discrimination Act (DDA)Disability Discrimination Act (DDA)

Britský zákon obecně upravující diskriminaci Pamatuje i na šíření informací skrze Internet Dopadá na firmy poskytující zboží a služby koncovým

klientům, zaměstnavatele, vzdělávací instituce apod.

Page 26: Přístupnost webových stránek

Konkrétní pravidla Konkrétní pravidla přístupnostipřístupnosti

Page 27: Přístupnost webových stránek

Důležité poznámky ke jednotlivým Důležité poznámky ke jednotlivým zásadám a metodikámzásadám a metodikám

►Zásady vycházejí z toho:Zásady vycházejí z toho: Jak úzce je interpretována přístupnost Jak hendikepovaní aktuálně používají

počítač Jaké schopnosti mají aktuálně internetové

prohlížeče a pomocné technologie

►Zásady jsou tedy dobově podmíněné a Zásady jsou tedy dobově podmíněné a s vývojem zastarávajís vývojem zastarávají

Page 28: Přístupnost webových stránek

Nejznámější metodiky pro tvorbu Nejznámější metodiky pro tvorbu přístupného webupřístupného webu► Zákon o ISVS Zákon o ISVS – nejužší pravidla přístupnosti pro – nejužší pravidla přístupnosti pro

zdravotně postižené, tzv. „minimum přístupnosti“zdravotně postižené, tzv. „minimum přístupnosti“►Blind Friendly WebBlind Friendly Web – přístupnost pro zrakově – přístupnost pro zrakově

postiženípostižení►WCAGWCAG – obecná přístupnost s akcentem na – obecná přístupnost s akcentem na

zdravotně postiženézdravotně postižené►Dogma 4WDogma 4W – překryv přístupnosti a použitelnosti – překryv přístupnosti a použitelnosti► Section 508Section 508 – obecná přístupnost vycházející z – obecná přístupnost vycházející z

WCAGWCAG

Page 29: Přístupnost webových stránek

ČR: Zákonná pravidla ČR: Zákonná pravidla přístupnostipřístupnosti

Zákon č. 365/2000 Sb., Zákon č. 365/2000 Sb., o informačních systémech veřejné o informačních systémech veřejné

zprávyzprávy

Page 30: Přístupnost webových stránek

A. Obsah stránek je A. Obsah stránek je dostupný a čitelnýdostupný a čitelný

Page 31: Přístupnost webových stránek

Obsah stránky je dostupný a čitelný Obsah stránky je dostupný a čitelný I.I.

► A.1A.1 Každý netextový prvek nesoucí Každý netextový prvek nesoucí významové sdělení má svou textovou významové sdělení má svou textovou alternativu.alternativu.

► A.2A.2 Informace sdělované Informace sdělované prostřednictvím skriptů, objektů, prostřednictvím skriptů, objektů, appletů, kaskádových stylů, obrázků a appletů, kaskádových stylů, obrázků a jiných doplňků na straně klienta jsou jiných doplňků na straně klienta jsou dostupné i bez kteréhokoli z těchto dostupné i bez kteréhokoli z těchto doplňků.doplňků.

Page 32: Přístupnost webových stránek

Obsah stránky je dostupný a čitelný Obsah stránky je dostupný a čitelný II.II.

► A.3A.3 Informace sdělované barvou jsou Informace sdělované barvou jsou dostupné i bez barevného rozlišení.dostupné i bez barevného rozlišení.

► A.4A.4 Barvy popředí a pozadí jsou Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není dostatečně kontrastní. Na pozadí není vzorek, který snižuje čitelnost.vzorek, který snižuje čitelnost.

Page 33: Přístupnost webových stránek

Obsah stránky je dostupný a čitelný Obsah stránky je dostupný a čitelný III.III.

► A.5A.5 Předpisy určující velikost písma Předpisy určující velikost písma nepoužívají absolutní jednotky nepoužívají absolutní jednotky

► A.6A.6 Předpisy určující typ písma Předpisy určující typ písma obsahují obecnou rodinu písem.obsahují obecnou rodinu písem.

Page 34: Přístupnost webových stránek

B. Práci se stránkou řídí B. Práci se stránkou řídí uživateluživatel

Page 35: Přístupnost webových stránek

Práci se stránkou řídí uživatel I.Práci se stránkou řídí uživatel I.

► B.1B.1 Obsah stránky se mění, jen když Obsah stránky se mění, jen když uživatel aktivuje nějaký prvek.uživatel aktivuje nějaký prvek.

► B.2B.2 Stránka bez přímého příkazu Stránka bez přímého příkazu uživatele nemanipuluje uživatelským uživatele nemanipuluje uživatelským prostředím. prostředím.

Page 36: Přístupnost webových stránek

Práci se stránkou řídí uživatel II.Práci se stránkou řídí uživatel II.

► B.3B.3 Nová okna se otevírají jen Nová okna se otevírají jen v odůvodněných případech a uživatel v odůvodněných případech a uživatel je na to předem upozorněn.je na to předem upozorněn.

► B.4B.4 Na stránce nic nebliká rychleji Na stránce nic nebliká rychleji než jednou za sekundu než jednou za sekundu

Page 37: Přístupnost webových stránek

Práci se stránkou řídí uživatel III.Práci se stránkou řídí uživatel III.

► B.5B.5 Stránka nebrání uživateli Stránka nebrání uživateli posouvat obsahem rámů.posouvat obsahem rámů.

► B.6B.6 Obsah ani kód stránky Obsah ani kód stránky nepředpokládá ani nevyžaduje nepředpokládá ani nevyžaduje konkrétní způsob použití ani konkrétní způsob použití ani konkrétní výstupní či ovládací konkrétní výstupní či ovládací zařízení.zařízení.

Page 38: Přístupnost webových stránek

C. Informace jsou C. Informace jsou srozumitelné a srozumitelné a přehlednépřehledné

Page 39: Přístupnost webových stránek

Informace jsou srozumitelné Informace jsou srozumitelné a přehledné I.a přehledné I.

►C.1C.1 Stránky sdělují informace Stránky sdělují informace jednoduchým jazykem a srozumitelnou jednoduchým jazykem a srozumitelnou formou. formou.

►C.2C.2 Úvodní strana jasně popisuje smysl Úvodní strana jasně popisuje smysl a účel webu. Název webu či jeho a účel webu. Název webu či jeho provozovatele je zřetelný. provozovatele je zřetelný.

Page 40: Přístupnost webových stránek

Informace jsou srozumitelné Informace jsou srozumitelné a přehledné II.a přehledné II.

► C.3C.3 Stránka i jednotlivé obsahové Stránka i jednotlivé obsahové prvky uvádějí své hlavní sdělení na prvky uvádějí své hlavní sdělení na svém začátku.svém začátku.

► C.4C.4 Rozsáhlé obsahové bloky jsou Rozsáhlé obsahové bloky jsou rozděleny do menších, výstižně rozděleny do menších, výstižně nadepsaných celků.nadepsaných celků.

Page 41: Přístupnost webových stránek

Informace jsou srozumitelné Informace jsou srozumitelné a přehledné III.a přehledné III.

► C.5C.5 Informace zveřejňované na Informace zveřejňované na základě zákona jsou dostupné jako základě zákona jsou dostupné jako textový obsah WWW stránky.textový obsah WWW stránky.

► C.6C.6 Na samostatné stránce je uveden Na samostatné stránce je uveden kontakt na technického správce a kontakt na technického správce a prohlášení jasně vymezující míru prohlášení jasně vymezující míru přístupnosti webu a jeho částí. Na tuto přístupnosti webu a jeho částí. Na tuto stránku odkazuje každá stránka webu.stránku odkazuje každá stránka webu.

Page 42: Přístupnost webových stránek

D. Ovládání webu je D. Ovládání webu je jasné a pochopitelnéjasné a pochopitelné

Page 43: Přístupnost webových stránek

Ovládání webu je jasné Ovládání webu je jasné a pochopitelné I.a pochopitelné I.

► D.1D.1 Každá stránka má smysluplný Každá stránka má smysluplný název, vystihující její obsah. název, vystihující její obsah.

► D.2D.2 Navigační a obsahové informace Navigační a obsahové informace jsou na stránce zřetelně odděleny.jsou na stránce zřetelně odděleny.

Page 44: Přístupnost webových stránek

Ovládání webu je jasné Ovládání webu je jasné a pochopitelné II.a pochopitelné II.

►D.3D.3 Navigace je srozumitelná a je Navigace je srozumitelná a je konzistentní na všech stránkách. konzistentní na všech stránkách.

►D.4D.4 Každá stránka (kromě úvodní Každá stránka (kromě úvodní strany) obsahuje odkaz na vyšší strany) obsahuje odkaz na vyšší úroveň v hierarchii webu a odkaz na úroveň v hierarchii webu a odkaz na úvodní stranu. úvodní stranu.

Page 45: Přístupnost webových stránek

Ovládání webu je jasné Ovládání webu je jasné a pochopitelné III.a pochopitelné III.

► D.5D.5 Všechny stránky rozsáhlejšího Všechny stránky rozsáhlejšího webu obsahují odkaz na přehlednou webu obsahují odkaz na přehlednou mapu webu.mapu webu.

► D.6D.6 Obsah ani kód stránky Obsah ani kód stránky nepředpokládá, že uživatel již nepředpokládá, že uživatel již navštívil jinou stránku. navštívil jinou stránku.

Page 46: Přístupnost webových stránek

Ovládání webu je jasné Ovládání webu je jasné a pochopitelné IV.a pochopitelné IV.

►D.7D.7 Každý formulářový prvek má Každý formulářový prvek má přiřazen výstižný nadpis. přiřazen výstižný nadpis.

►D.8D.8 Každý rám má vhodné jméno či Každý rám má vhodné jméno či popis vyjadřující jeho smysl popis vyjadřující jeho smysl a funkčnost. a funkčnost.

Page 47: Přístupnost webových stránek

E. Odkazy jsou zřetelné E. Odkazy jsou zřetelné a návodnéa návodné

Page 48: Přístupnost webových stránek

Odkazy jsou zřetelné a návodné Odkazy jsou zřetelné a návodné I.I.► E.1E.1 Označení každého odkazu Označení každého odkazu

výstižně popisuje jeho cíl i bez výstižně popisuje jeho cíl i bez okolního kontextu. okolního kontextu.

► E.2E.2 Stejně označené odkazy mají Stejně označené odkazy mají stejný cíl stejný cíl

► E.3E.3 Odkazy jsou odlišeny od ostatního Odkazy jsou odlišeny od ostatního textu, a to nikoli pouze barvou.textu, a to nikoli pouze barvou.

Page 49: Přístupnost webových stránek

Odkazy jsou zřetelné a návodné Odkazy jsou zřetelné a návodné II.II.► E.4E.4 Obrázková mapa na straně serveru je použita Obrázková mapa na straně serveru je použita

jen v případě, že nebylo možné pomocí jen v případě, že nebylo možné pomocí dostupného geometrického tvaru definovat oblasti dostupného geometrického tvaru definovat oblasti v obrázkové mapě. V ostatních případech je v obrázkové mapě. V ostatních případech je použita obrázková mapa na straně klienta. použita obrázková mapa na straně klienta. Obrázková mapa na straně serveru je vždy Obrázková mapa na straně serveru je vždy doprovázena alternativními textovými odkazy.doprovázena alternativními textovými odkazy.

► E.5E.5 Uživatel je předem jasně upozorněn, když Uživatel je předem jasně upozorněn, když odkaz vede na obsah jiného typu, než je WWW odkaz vede na obsah jiného typu, než je WWW stránka. Takový odkaz je doplněn sdělením o typu stránka. Takový odkaz je doplněn sdělením o typu a velikosti cílového souboru.a velikosti cílového souboru.

Page 50: Přístupnost webových stránek

F. Kód je technicky F. Kód je technicky způsobilý a způsobilý a strukturovanýstrukturovaný

Page 51: Přístupnost webových stránek

Kód je technicky způsobilý a Kód je technicky způsobilý a strukturovaný I.strukturovaný I.

► F.1F.1 Kód stránek odpovídá nějaké Kód stránek odpovídá nějaké zveřejněné finální specifikaci jazyka zveřejněné finální specifikaci jazyka HTML či XHTML. Neobsahuje HTML či XHTML. Neobsahuje syntaktické chyby, které je správce syntaktické chyby, které je správce stránek schopen odstranit. stránek schopen odstranit.

► F.2F.2 V metaznačkách je uvedena V metaznačkách je uvedena použitá znaková sada dokumentu použitá znaková sada dokumentu

Page 52: Přístupnost webových stránek

Kód je technicky způsobilý a Kód je technicky způsobilý a strukturovaný II.strukturovaný II.

► F.3F.3 Prvky tvořící nadpisy a seznamy Prvky tvořící nadpisy a seznamy jsou korektně vyznačeny ve jsou korektně vyznačeny ve zdrojovém kódu. Prvky, které netvoří zdrojovém kódu. Prvky, které netvoří nadpisy či seznamy, naopak ve nadpisy či seznamy, naopak ve zdrojovém kódu takto vyznačeny zdrojovém kódu takto vyznačeny nejsou. nejsou.

► F.4F.4 Pro popis vzhledu stránky jsou Pro popis vzhledu stránky jsou upřednostněny stylové předpisy.upřednostněny stylové předpisy.

Page 53: Přístupnost webových stránek

Kód je technicky způsobilý a Kód je technicky způsobilý a strukturovaný III.strukturovaný III.

► F.5F.5 Je-li tabulka použita pro rozvržení Je-li tabulka použita pro rozvržení obsahu stránky, neobsahuje záhlaví obsahu stránky, neobsahuje záhlaví řádků ani sloupců. Všechny tabulky řádků ani sloupců. Všechny tabulky zobrazující tabulková data naopak zobrazující tabulková data naopak záhlaví řádků a/nebo sloupců obsahují. záhlaví řádků a/nebo sloupců obsahují.

► F.6F.6 Všechny tabulky dávají smysl Všechny tabulky dávají smysl čtené po řádcích zleva doprava.čtené po řádcích zleva doprava.

Page 54: Přístupnost webových stránek

Web Content Web Content Accessibility Guidelines Accessibility Guidelines (WCAG)(WCAG)

Page 55: Přístupnost webových stránek

WCAG – základní informaceWCAG – základní informace

► Nejznámější a nejuznávanější metodikaNejznámější a nejuznávanější metodika► Aktuální verze WCAG 1.0 (připravuje se WCAG 2.0)Aktuální verze WCAG 1.0 (připravuje se WCAG 2.0)► Tvůrce je konsorcium W3C, konkrétně její pracovní Tvůrce je konsorcium W3C, konkrétně její pracovní

skupina WAI (Web Accessibility Initiative)skupina WAI (Web Accessibility Initiative)► WCAG 1.0 vytvořen v polovině 90. letWCAG 1.0 vytvořen v polovině 90. let► Zdrojem pro ostatní metodikyZdrojem pro ostatní metodiky► Velmi dobře postihuje problematiku zdravotně Velmi dobře postihuje problematiku zdravotně

postiženýchpostižených► Mezery má na poli použitelnosti pro skupiny s Mezery má na poli použitelnosti pro skupiny s

poruchami učení a soustředění apod.poruchami učení a soustředění apod.

Page 56: Přístupnost webových stránek

WCAG - strukturaWCAG - struktura

► WCAG tvořena 14 pravidly (tzv. guidelines), v rámci nichž je WCAG tvořena 14 pravidly (tzv. guidelines), v rámci nichž je uvedena řada kontrolních bodů (tzv. checkpoints).uvedena řada kontrolních bodů (tzv. checkpoints).

► Kontrolní body jsou rozděleny podle priority:Kontrolní body jsou rozděleny podle priority: Priorita 1: Web musí splňovat dané pravidlo, jinak se stává

nepřístupným pro hendikepované uživatele. Priorita 2: Web by měl splňovat danou zásadu, jinak je obtížně

přístupný pro některé skupiny hendikepovaných uživatelů. Priorita 3: Web by mohl splňovat danou zásadu, protože tak

ulehčí přístup hendikepovaným uživatelům.► Soulad webu (tzv. compliance level) s danými pravidly je Soulad webu (tzv. compliance level) s danými pravidly je

vyjádřen počtem písmen „A“vyjádřen počtem písmen „A“ „A“ – web splňuje všechny kontrolní body s prioritou 1 „AA“ – web splňuje všechny kontrolní body s prioritou 1 a 2 „AAA“ – web splňuje všechny kontrolní body s prioritou 1, 2 a 3

Page 57: Přístupnost webových stránek

Vybrané zásady z WCAG I.Vybrané zásady z WCAG I.

► 3.7 Označte citace, nepoužívejte značky pro 3.7 Označte citace, nepoužívejte značky pro citace pro vizuální efekty, jako je odsazenícitace pro vizuální efekty, jako je odsazení Priorita 2 Co je významovou citací, musí být citací i ve

zdrojovém kódu (značky „Q“ a „BLOCKQUOTE“). Pro ostatní prvky se tyto značky používat nesmí.

► 4.2 Specifikujte význam každé zkratky při 4.2 Specifikujte význam každé zkratky při jejím prvním výskytu jejím prvním výskytu Priorita 3 značky „ABBR“ a „ACRONYM“

Page 58: Přístupnost webových stránek

Vybrané zásady z WCAG II.Vybrané zásady z WCAG II.

►4.1 Jasně označte změny v jazyce v textu 4.1 Jasně označte změny v jazyce v textu dokumentu i textových alternativách dokumentu i textových alternativách jiných prvkůjiných prvků Priorita 1 Atributy „LANG“, a/nebo „XML:LANG“

►4.3 Identifikujte primární jazyk 4.3 Identifikujte primární jazyk dokumentudokumentu Priorita 3 Značka „LANG“ u prvku „HTML“

Page 59: Přístupnost webových stránek

Vybrané zásady z WCAG III.Vybrané zásady z WCAG III.

► 5.2 V datových tabulkách označte sdružené 5.2 V datových tabulkách označte sdružené řádky či sloupceřádky či sloupce Priorita 1, jde o sdružující značky „THEAD“, „TBODY“,

„TFOOT“, „COLGROUP“ a vazební atributy „axis“, „scope“ a „headers“

► 5.5 V tabulkách uvádějte stručný přehled5.5 V tabulkách uvádějte stručný přehled Priorita 3, Jde o atribut „SUMMARY“ ve značce „TABLE“

Page 60: Přístupnost webových stránek

Vybrané zásady z WCAG IV.Vybrané zásady z WCAG IV.

►9.4 Vytvořte logický sled při používání 9.4 Vytvořte logický sled při používání tabulátoru (odkazy, položky formulářů tabulátoru (odkazy, položky formulářů atp.)atp.) Priorita 3 Jde o atribut „TABINDEX“

►9.5 Pro důležité odkazy, položky formulářů 9.5 Pro důležité odkazy, položky formulářů a jejich skupiny vytvořte klávesové zkratkya jejich skupiny vytvořte klávesové zkratky Priorita 3 Jde o atribut „ACCESSKEY“

Page 61: Přístupnost webových stránek

Testování přístupnostiTestování přístupnosti

Page 62: Přístupnost webových stránek

Testování přístupnostiTestování přístupnosti

► Ruční kontrolaRuční kontrola Není nutné znát pravidla, kontrolují se jen

výsledky Není spolehlivé

► Automatická kontrolaAutomatická kontrola On-line nástroje pokrývají jen automaticky

zkontrolovatelné prvky Předpoklad následné ruční kontroly

► Profesionální kontrolaProfesionální kontrola Finanční náročně, ale jediné zcela spolehlivé

Page 63: Přístupnost webových stránek

Ruční kontrolaRuční kontrola

1.1. Použití on-line testu přístupnostiPoužití on-line testu přístupnosti2.2. On-line validace syntaxe kódu (HTML, XML, CSS)On-line validace syntaxe kódu (HTML, XML, CSS)3.3. Použití textové prohlížeče (Lynx, Links)Použití textové prohlížeče (Lynx, Links)4.4. Použití grafického prohlížeče s:Použití grafického prohlížeče s:

1. Funkční grafikou i zvuky2. Nefunkční grafikou3. Nefunkčními zvuky4. Bez použití myši5. Nefunkčními framy, skripty, CSS, applety

5.5. Použití různých prohlížečů (nových i starých)Použití různých prohlížečů (nových i starých)6.6. Použití hlasové čtečky, softwarové lupyPoužití hlasové čtečky, softwarové lupy7.7. Použití gramatické kontroly textuPoužití gramatické kontroly textu8.8. Kontrola jednoduchosti textuKontrola jednoduchosti textu9.9. Kontrola přístupnosti hendikepovanými lidmiKontrola přístupnosti hendikepovanými lidmi

Page 64: Přístupnost webových stránek

Ruční kontrola - tipyRuční kontrola - tipy

► Použijte toolbary pro ovládání nastavení Použijte toolbary pro ovládání nastavení prohlížečeprohlížeče MSIE – „Accessibility toolbar“ Mozilla – „Webdevelopment toolbar“ Viz http://pristupnost.nawebu.cz/nastroje/

► Pro audit čitelnosti anglického textu použijte Pro audit čitelnosti anglického textu použijte známé metodikyznámé metodiky Gunning Fog Index Flesch Reading Ease Flesch-Kincaid grade level http://www.juicystudio.com/fog/

Page 65: Přístupnost webových stránek

Automatická kontrolaAutomatická kontrola

►Různé on-line nástroje:Různé on-line nástroje: Cynthia Says Wave Bobby

►http://pristupnost.nawebu.cz/nastroje/http://pristupnost.nawebu.cz/nastroje/►Není třeba znát pravidla, ale je nutná Není třeba znát pravidla, ale je nutná

následná ruční kontrolanásledná ruční kontrola

Page 66: Přístupnost webových stránek

KONECKONEC