Přístupnost webových stránek

Prezentace na téma: "Přístupnost webových stránek"— Transkript prezentace:

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

2 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) Testování přístupnosti webu

3 Co je to „přístupnost“ V angličtině „accessibility“ 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 stránek (jako další se uvádějí např. použitelnost, dobrá informační architektura či SEO)

4 Proč je přístupnost tak důležitá?
Existují dva základní důvody (premisy): 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. Každý takto "specifický" uživatel má většinou i "specifické" potřeby, které není schopen překročit či obejít.

5 Kdo tedy má „specifické“ potřeby?
Uživatele se „specifickými“ potřebami budeme nazývat „hendikepovaným“. „Hendikepovaný uživatel“ je v našem kontextu 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á.

6 Základní kameny přístupnosti
Základním smyslem snahy o přístupný web je tedy: Pochopit, jací uživatelé s různými hendikepy používají Internet. Pochopit, jaké jsou jejich specifické potřeby, které nemohou obejít Tyto specifické potřeby naplnit.

7 Základní důvody pro přístupnost
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 webu Přístupný web je zároveň „robot-friendly“ Vyhledavače majitelé stránek milují, ale často jim indexaci pěkně znepříjemňují

8 Základní důvody pro přístupnost II.
Posilování značky Diskriminace je vnímána negativně Přístupnost buduje renomé Ú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ákonnost Nepřístupné weby jsou v mnoha zemích za hranicí zákona.

9 Hendikepovaní uživatelé

10 Základní skupiny hendikepovaných
Hendikepované uživatele Internetu můžeme rozdělit do následujících skupin: Zrakově postižení Sluchově postižení Pohybově postižení Uživatele se zobrazovacími problémy Uživatelé s poruchami učení a soustředění Roboti Ostatní

11 Zrakově postižení Považováni často za jedinou skupinu hendikepovaných
Nepřístupný web na ně dopadá nejvíce Nejsou největší skupinou Zrakově postižené můžeme opět rozdělit do několika skupin Zcela nevidomí a jinak těžce zrakově postižení Slabozrací Barvoslepí Uživatelé s dočasně zhoršenou schopností vidět

12 Zcela nevidomí a jinak těžce zdravotně postižení
Menší část, ale s největším negativním dopadem nepřístupných stránek Internet je pro ně často jedinou možností jak „překonat“ své postižení Pro prezentaci obsahu používají hlasové čtečky a braillský řádek Jejich základní potřebou je možnost spolehnout se na textovou informaci – obsah musí být vhodně strukturován, grafické a multimediální prvky musejí mít textové alternativy, musí být použitelná navigace.

13 Slabozrací Jen omezená možnost používat zrak
Potřebují manipulovat s textem, hlavně jej zvětšovat Text musí být čitelný i při velkém zvětšení, a to i vůči svému okolí (problém s obrázky, výškou řádků apod.)

14 Barvoslepí Forem sníženého barevného citu je celá řada
Tito uživatelé mají často problém rozeznávat některé barvy od sebe. Je třeba dodržovat správný kontrast barev a u prezentace důležitého obsahu se na barvy raději nespoléhat.

15 Uživatelé s dočasně zhoršenou možností vidět
Jde o aktuální světelné a zobrazovací možností Např. osvětlení místnosti, přímé slunce v monitoru, nekvalitní monitor apod. Opět je třeba dbát na kontrast, možnost zvětšení obsahu, správnou strukturu dokumentu apod.

16 Sluchově postižení Zatím není takový problém, protože audio složek na webu příliš není. Mezi sluchově postižené řadíme nejen skutečně postižené, ale majitele počítačů bez reproduktorů nebo uživatele s dočasně zhoršenou možností slyšet. Je třeba vždy u každé audio a multimediální složky uživateli nabídnout textovou alternativu.

17 Pohybově postižení Základní problém: nemožnost používat myš
Jediným způsobem, jak web ovládat, je často jen klávesnice. I v rámci skupiny pohybově postižených je skupina s „dočasnou“ nemožností ovládat horní končetiny (úrazy apod.) Klávesnice tedy musí stránky plnohodnotně ovládat.

18 Uživatelé se zobrazovacími potížemi
Jsou to de facto: Uživatelé alternativních prohlížečů Majitelé jiných zobrazovacích zařízení Není to vždy otázkou volby Škála zobrazovacích zařízení radikálně roste V rámci těchto zařízení nejde o to, aby se web zobrazoval zcela stejně, ale aby byl použitelný a funkční

19 Uživatelé s poruchami učení a soustředění
Takových uživatelů je velmi mnoho, ačkoliv se na ně v souvislosti s přístupností často zapomíná Konkrétních projevů velmi mnoho, nejčastější např. dyslexie či klasické poruchy soustředění Jejich potřeby: přehledné, strukturované a jednoduše pochopitelné webové stránky se strukturovaným obsahem, přehlednou navigací. Písmo spíše větší, krátké odstavce, hodně nadpisů, více vizuálních "zarážek" pro oči, více obrázkových symbolů místo slov apod.

20 Roboti Jde především o roboty vyhledávačů
Robot nevidí barvy, neslyší zvuk, nerozpozná obsah obrázků, neumí používat JavaScript ani Flash. Jádro je tedy v textu a odkazech. Je třeba nabídnout co nejlepší obsah, co nejlépe označkovaný strukturálními značkami (nadpisy, odstavce, seznamy, zdůraznění apod.) a vždy se u toho spolehnout na čistý text.

21 Ostatní Lidé s omezenou schopností porozumět danému jazyku (cizinci, emigranti apod.) Všichni ostatní, pro které přístupný web zlepší jejich použitelnost

22 Legislativa v oblasti přístupnosti

23 Legislativa v oblasti přístupnosti
Zá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 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)

24 Legislativa v oblasti přístupnosti II.
Č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)

25 Legislativa v oblasti přístupnosti III.
US 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) 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.

26 Konkrétní pravidla přístupnosti

27 Důležité poznámky ke jednotlivým zásadám a metodikám
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 s vývojem zastarávají

28 Nejznámější metodiky pro tvorbu přístupného webu
Zákon o ISVS – nejužší pravidla přístupnosti pro zdravotně postižené, tzv. „minimum přístupnosti“ Blind Friendly Web – přístupnost pro zrakově postižení WCAG – obecná přístupnost s akcentem na zdravotně postižené Dogma 4W – překryv přístupnosti a použitelnosti Section 508 – obecná přístupnost vycházející z WCAG

29 ČR: Zákonná pravidla přístupnosti
Zákon č. 365/2000 Sb., o informačních systémech veřejné zprávy

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

31 Obsah stránky je dostupný a čitelný I.
A.1 Každý netextový prvek nesoucí významové sdělení má svou textovou alternativu. A.2 Informace sdělované prostřednictvím skriptů, objektů, appletů, kaskádových stylů, obrázků a jiných doplňků na straně klienta jsou dostupné i bez kteréhokoli z těchto doplňků.

32 Obsah stránky je dostupný a čitelný II.
A.3 Informace sdělované barvou jsou dostupné i bez barevného rozlišení. A.4 Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není vzorek, který snižuje čitelnost.

33 Obsah stránky je dostupný a čitelný III.
A.5 Předpisy určující velikost písma nepoužívají absolutní jednotky A.6 Předpisy určující typ písma obsahují obecnou rodinu písem.

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

35 Práci se stránkou řídí uživatel I.
B.1 Obsah stránky se mění, jen když uživatel aktivuje nějaký prvek. B.2 Stránka bez přímého příkazu uživatele nemanipuluje uživatelským prostředím.

36 Práci se stránkou řídí uživatel II.
B.3 Nová okna se otevírají jen v odůvodněných případech a uživatel je na to předem upozorněn. B.4 Na stránce nic nebliká rychleji než jednou za sekundu

37 Práci se stránkou řídí uživatel III.
B.5 Stránka nebrání uživateli posouvat obsahem rámů. B.6 Obsah ani kód stránky nepředpokládá ani nevyžaduje konkrétní způsob použití ani konkrétní výstupní či ovládací zařízení.

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

39 Informace jsou srozumitelné a přehledné I.
C.1 Stránky sdělují informace jednoduchým jazykem a srozumitelnou formou. C.2 Úvodní strana jasně popisuje smysl a účel webu. Název webu či jeho provozovatele je zřetelný.

40 Informace jsou srozumitelné a přehledné II.
C.3 Stránka i jednotlivé obsahové prvky uvádějí své hlavní sdělení na svém začátku. C.4 Rozsáhlé obsahové bloky jsou rozděleny do menších, výstižně nadepsaných celků.

41 Informace jsou srozumitelné a přehledné III.
C.5 Informace zveřejňované na základě zákona jsou dostupné jako textový obsah WWW stránky. C.6 Na samostatné stránce je uveden kontakt na technického správce a prohlášení jasně vymezující míru přístupnosti webu a jeho částí. Na tuto stránku odkazuje každá stránka webu.

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

43 Ovládání webu je jasné a pochopitelné I.
D.1 Každá stránka má smysluplný název, vystihující její obsah. D.2 Navigační a obsahové informace jsou na stránce zřetelně odděleny.

44 Ovládání webu je jasné a pochopitelné II.
D.3 Navigace je srozumitelná a je konzistentní na všech stránkách. D.4 Každá stránka (kromě úvodní strany) obsahuje odkaz na vyšší úroveň v hierarchii webu a odkaz na úvodní stranu.

45 Ovládání webu je jasné a pochopitelné III.
D.5 Všechny stránky rozsáhlejšího webu obsahují odkaz na přehlednou mapu webu. D.6 Obsah ani kód stránky nepředpokládá, že uživatel již navštívil jinou stránku.

46 Ovládání webu je jasné a pochopitelné IV.
D.7 Každý formulářový prvek má přiřazen výstižný nadpis. D.8 Každý rám má vhodné jméno či popis vyjadřující jeho smysl a funkčnost.

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

48 Odkazy jsou zřetelné a návodné I.
E.1 Označení každého odkazu výstižně popisuje jeho cíl i bez okolního kontextu. E.2 Stejně označené odkazy mají stejný cíl E.3 Odkazy jsou odlišeny od ostatního textu, a to nikoli pouze barvou.

49 Odkazy jsou zřetelné a návodné II.
E.4 Obrázková mapa na straně serveru je použita jen v případě, že nebylo možné pomocí dostupného geometrického tvaru definovat oblasti v obrázkové mapě. V ostatních případech je použita obrázková mapa na straně klienta. Obrázková mapa na straně serveru je vždy doprovázena alternativními textovými odkazy. E.5 Uživatel je předem jasně upozorněn, když odkaz vede na obsah jiného typu, než je WWW stránka. Takový odkaz je doplněn sdělením o typu a velikosti cílového souboru.

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

51 Kód je technicky způsobilý a strukturovaný I.
F.1 Kód stránek odpovídá nějaké zveřejněné finální specifikaci jazyka HTML či XHTML. Neobsahuje syntaktické chyby, které je správce stránek schopen odstranit. F.2 V metaznačkách je uvedena použitá znaková sada dokumentu

52 Kód je technicky způsobilý a strukturovaný II.
F.3 Prvky tvořící nadpisy a seznamy jsou korektně vyznačeny ve zdrojovém kódu. Prvky, které netvoří nadpisy či seznamy, naopak ve zdrojovém kódu takto vyznačeny nejsou. F.4 Pro popis vzhledu stránky jsou upřednostněny stylové předpisy.

53 Kód je technicky způsobilý a strukturovaný III.
F.5 Je-li tabulka použita pro rozvržení obsahu stránky, neobsahuje záhlaví řádků ani sloupců. Všechny tabulky zobrazující tabulková data naopak záhlaví řádků a/nebo sloupců obsahují. F.6 Všechny tabulky dávají smysl čtené po řádcích zleva doprava.

54 Web Content Accessibility Guidelines (WCAG)

55 WCAG – základní informace
Nejznámější a nejuznávanější metodika Aktuální verze WCAG 1.0 (připravuje se WCAG 2.0) Tvůrce je konsorcium W3C, konkrétně její pracovní skupina WAI (Web Accessibility Initiative) WCAG 1.0 vytvořen v polovině 90. let Zdrojem pro ostatní metodiky Velmi dobře postihuje problematiku zdravotně postižených Mezery má na poli použitelnosti pro skupiny s poruchami učení a soustředění apod.

56 WCAG - struktura WCAG tvořena 14 pravidly (tzv. guidelines), v rámci nichž je uvedena řada kontrolních bodů (tzv. checkpoints). 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 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

57 Vybrané zásady z WCAG I. 3.7 Označte citace, nepoužívejte značky pro 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 jejím prvním výskytu Priorita 3 značky „ABBR“ a „ACRONYM“

58 Vybrané zásady z WCAG II.
4.1 Jasně označte změny v jazyce v textu dokumentu i textových alternativách jiných prvků Priorita 1 Atributy „LANG“, a/nebo „XML:LANG“ 4.3 Identifikujte primární jazyk dokumentu Priorita 3 Značka „LANG“ u prvku „HTML“

59 Vybrané zásady z WCAG III.
5.2 V datových tabulkách označte sdružené řá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řehled Priorita 3, Jde o atribut „SUMMARY“ ve značce „TABLE“

60 Vybrané zásady z WCAG IV.
9.4 Vytvořte logický sled při používání tabulátoru (odkazy, položky formulářů atp.) Priorita 3 Jde o atribut „TABINDEX“ 9.5 Pro důležité odkazy, položky formulářů a jejich skupiny vytvořte klávesové zkratky Jde o atribut „ACCESSKEY“

61 Testování přístupnosti

62 Testování přístupnosti
Ruční kontrola Není nutné znát pravidla, kontrolují se jen výsledky Není spolehlivé Automatická kontrola On-line nástroje pokrývají jen automaticky zkontrolovatelné prvky Předpoklad následné ruční kontroly Profesionální kontrola Finanční náročně, ale jediné zcela spolehlivé

63 Ruční kontrola Použití on-line testu přístupnosti
On-line validace syntaxe kódu (HTML, XML, CSS) Použití textové prohlížeče (Lynx, Links) Použití grafického prohlížeče s: Funkční grafikou i zvuky Nefunkční grafikou Nefunkčními zvuky Bez použití myši Nefunkčními framy, skripty, CSS, applety Použití různých prohlížečů (nových i starých) Použití hlasové čtečky, softwarové lupy Použití gramatické kontroly textu Kontrola jednoduchosti textu Kontrola přístupnosti hendikepovanými lidmi

64 Ruční kontrola - tipy Použijte toolbary pro ovládání nastavení prohlížeče MSIE – „Accessibility toolbar“ Mozilla – „Webdevelopment toolbar“ Viz Pro audit čitelnosti anglického textu použijte známé metodiky Gunning Fog Index Flesch Reading Ease Flesch-Kincaid grade level

65 Automatická kontrola Různé on-line nástroje:
Cynthia Says Wave Bobby Není třeba znát pravidla, ale je nutná následná ruční kontrola

66 KONEC