Radek Pavlíček, říjen 2009

“The Web is not a barrier to people with disabilities, it is the solution.

Paul R. Bohman, WebAIM

Co je to přístupný web?Přístupný web

respektuje maximum svých uživatelů; neklade svým uživatelům žádné překážky; lépe se používá i běžným uživatelům; lépe se udržuje a aktualizuje.

Přístupnost je velmi úzce provázána i s dalšími oblastmi tvorby webových stránek (použitelnost, informační architektura, SEO).

2

Definice přístupnosti IPří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.

Lze tuto definici vůbec naplnit?

3

Definice přístupnosti IIZa přístupný web lze dnes považovat takový

web, který bude návštěvník s těžkým zdravotním postižením schopen i přes svůj zdravotní handicap, za pomoci prostředků, které má k dispozici, a způsobem, který mu vyhovuje, efektivně používat a dosáhnout svého cíle.Lépe odpovídá současné situaci v oblasti přístupnosti (jen o málokteré stránce lze dnes prohlásit, že je naprosto nepřístupná).

4

Definice přístupnosti IIIWeb vykazuje zásadní nedostatky v přístupnosti a

klade handicapovaným uživatelům velké překážky.Při definici přístupnosti je třeba brát v potaz

čas,rozsah,situaci na poli asistivních technologií a prohlížečů,cílovou skupinu, její zvyklosti a preference.

?

5

Proč se zabývat přístupností?

?6

ČlověkUsnadnit práci s webem lidem s handicapem i bez něj.

7

ZiskČím více návštěvníků, tím větší kupní síla. Úspora nákladů

na webovou prezentaci. Úspora na HR – zájemce si informaci zjistí na webu,

nemusí k vám volat.

8

PR, posilování značkySocial responsibilityPomáhání je v současnosti v kurzu, tak proč to, že

děláme něco pro handicapované, nedat vědět všem.

Lepší mediální obraz v očích veřejnosti.Lepší vnímání společnosti veřejností.

9

Lepší viditelnost ve vyhledávačíchŘada úprav kvůli přístupnosti může pomoci

posunout váš web při hledání konkrétních frází na vyšší pozice ve výsledcích vyhledávání.

10

TrestVyhnutí se soudům nebo kritice

za nepřístupnost.

11

Komu všemu pomohu IZrakové postižení(slepota, slabozrakost, barvoslepost)Tělesné postižení(nemožnost používat myš, pomalé reakce, omezená jemnámotorika)Sluchové postižení(hluchota)

Kognitivní poruchy(poruchy učení a soustředění, neschopnost pamatovat si či soustředit se na velké množství textu)Kombinované postižení

12

Komu všemu pomohu IISenioři.Technické handicapy.Dočasně zhoršené pracovní podmínky.

Počet znevýhodněných uživatelů se pohybuje mezi 20 až 30% (záleží na tom, koho všeho řadíme mezi znevýhodněné uživatele).

13

Asistivní technologie I.Zahrnují asistivní, adaptivní a rehabilitační

prostředky a také proces používaný při jejich výběru a používání.

Speciální softwarehlasová syntéza (WT Voice, HLAS, RS SOLO)screen reader pro nevidomésoftwarová lupa pro slabozraké

Speciální hardwarebraillský řádek, ozvučený mobilní telefon či PDA

14

Asistivní technologie II.Velké či jinak přizpůsobené klávesnice

(www.petit-os.cz/klavesnice.htm)Software na hlasové ovládání PC (www.fugasoft.cz)Tyčinky, trackbally, atp.

15

Co vše má vliv na přístupnost? #1Zdravotní postižení

jiné požadavky má nevidomý, slabozraký, sluchově postižený, tělesně postižený...

Technické zpracování (~ zda vyhovuje pravidlům některé metodiky)nepodceňovat, ale ani nepřeceňovat.

Zkušenosti konkrétního uživatele s prací s webemčím větší zkušenosti, tím lepší orientace i na méně

přístupném webu,zkušení uživatelé mají ale zpravidla vyšší nároky na

přístupnost.

16

Co vše má vliv na přístupnost? #2Zkušenosti konkrétního uživatele s prací s asistivní

technologií (AT)naučit se dobře ovládat AT by měla být povinnost

zrakově postiženého uživatele,čím lepší znalosti, tím lépe může uživatel využívat

možností stránky -> vyšší efektivita práce, snazší přístup k informacím,

malé či nedostatečné znalosti -> „nesmyslné“ požadavky na přístupnost.

17

Co vše má vliv na přístupnost? #3Použitá asistivní technologie, její konfigurace

a verzejinak „vidí“ web uživatel JAWS, jinak uživatel

Halu, jinak uživatel ZoomTextu či Supernovy.Použitý prohlížeč a jeho doplňkyPreference a zvyklosti konkrétního uživatele

18

Co potřebují nevidomíVhodné strukturování obsahu pomocí nadpisů

a seznamů.Přístupnost webu z klávesnice.Vhodnou textovou alternativu k vizuálním

prvkům.Důležité informace na začátku konkrétního

prvku (stránky, nadpisu, odkazu, formuláře, atp.).

19

Co potřebují slabozracíNepoužívat text ve formě obrázků.Možnost zvětšovat obsah stránky.Dostatečně kontrastní barvy.Možnost použití jiného barevného schématu.Umístění klíčových informací či funkcionalit na

obvyklá místa stránky.Zvýraznění položky, která má focus.

20

Co potřebují sluchově postiženíJednoduchý jazyk, srozumitelně

podávané informace.Titulky či jinou textovou alternativu

pro audio a video.Překlad do znakové řeči u důležitých

multimedií.

21

Co potřebují tělesně postiženíPřístupnost obsahu z klávesnice.Zvýraznění položky, která má focus.Viditelné odkazy pro přechod na různé části

stránky.Prvky, na něž lze kliknout, se nepohybují.Dostatečně velké oblasti pro kliknutí.Vhodně pojmenované prvky stránky

(rozpoznávání hlasu).

22

Co potřebují lidé s kognitivními poruchamiKonzistentní design.Mapa webu.Text psaný sans-serif fontem se

zarovnáním vlevo.Výstižné a návodné chybové hlášky.Možnost použití jiného barevného

schématu.23

Proč se zabývat asistivními technologiemi (AT)?Pouhé splnění pravidel některé z metodik

nemusí být pro reálnou přístupnost dostačující.

K českým pravidlům chybí dokumenty s popisem technik a postupů -> odladění konkrétního řešení pomocí AT a dialogem se ZP uživateli je ideální způsob zajištění reálné přístupnosti.

24

Musím umět ovládat AT?Nutné to není.

Netriviální obsluha pro běžného uživateleNenasimulujete způsob práce a vnímání webu

uživatelem s postiženímVysoká pořizovací cena (řádově desítky tisíc Kč),

demoverze by se dle licenčních podmínek pro testování oficiálně používat neměly.

Ideálním řešením je spolupráce s někým, kdo má potřebné znalosti, zkušenosti a odpovídající zázemí.

25

Musím tedy umět ovládat AT?Je ale dobré vědět, co vše (a jak) umí screen

readery či sw lupy zpřístupnit a podle toho stránky tvořit.

Ve finále je to totiž konkrétní handicapovaný uživatel s konkrétním sw a hw vybavením, kdo bude se stránkou muset za ztížených podmínek pracovat – ne úředník z ministerstva, autor vyhlášky, webu atp.

26

Mýty kolem bezbariérového webuVytvoření textové verze stránek je dostačující. Vytvořit přístupný web je komplikované a nákladné. Přístupnost a atraktivní web design se vylučují.

Přístupnost potlačuje kreativitu.Návštěvníci webových stránek nemají s přístupností

problémy. Nevidomí uživatelé nebo uživatelé s jiným typem

postižení nepoužívají Internet.

27

Metodiky přístupnostiNejznámější metodiky

WCAG 1.0 a 2.0Blind Friendly WebDogma W4Section 508Pravidla MI z roku 2004Pravidla tvorby přístupného webu z roku

200828

Metodiky přístupnostiIDEÁLY přístupného webuTo, že web (plně) nevyhovuje některé

metodice, ještě neznamená, že není přístupný, a naopak.

V mnoha případech také neexistuje jediné správné řešení.

Výzkum mezi uživateli screenreaderů -> typický uživatel neexistuje.

29

Co ovlivňuje kvalitu metodikyDatum vydání.Čí problémy řeší (méně někdy může být

více).Soulad s aktuální situací na poli

asistivních technologií.Konkrétnost požadavků.Existence dokumentu s technikami pro

řešení konkrétních případů.30

WCAG 2.0Vydán v prosinci 2008.Progresivní přístup k věci. Nestanovuje jasnou mez, co je

přístupné a co nikoliv, důležitý je aktuální stav prohlížečů a asistivních technologií.

Pravidla odpovídají aktuálním trendům, řada pravidel z WCAG 1.0 už je dnes naprosto neaktuálních.

Pravidla jsou flexibilní, přizpůsobivá a nadčasová.Měřitelnější výsledky.Nezávislost na technologii.Orientace na uživatele.Základní věci z hlediska přístupnosti se nemění.

31

Testování přístupnostiruční kontrola;automatická kontrola;audit odborníka;uživatelský test provedený

handicapovanými uživateli.

32

Kdo může provést test webu?

odborník na přístupnost

handicapovaný zkušený uživatel

Xautor webu

Každý z nich může přístupnost toho samého webu vyhodnotit různě.

33

Handicapovaný zkušený uživatelotestuje web na základě svých praktických

zkušeností;otestuje web pomocí speciálního software

a/nebo hardware;přidaná hodnota ve formě použitelnosti webu

pro handicapované návštěvníky;nemusí však postřehnout všechny chyby

z hlediska přístupnosti;34

Odborník na přístupnostspolehlivě prověří web podle některé z

metodik přístupnosti a případně i vlastních praktických zkušeností;

služby v oblasti přístupnosti v současnosti nabízí hodně subjektů, ne každý musí mít odpovídající znalosti;

někteří „odborníci“ často hodnotí pouze na základě teoretických znalostí, nemusí mít či nemají praktické zkušenosti s cílovou skupinou;

35

Autor webuzná svůj web;často trpí „profesionální slepotou“

(potencionální chyby nemusí vidět);stává se také, že pravidla přístupnosti špatně

interpretuje. Web, vytvořený podle těchto špatně interpretovaných pravidel pak považuje za přístupný, i když tomu tak ve skutečnosti není;

36

Nástroje pro testování přístupnostitoolbary

Accessibility Toolbar - www.visionaustralia.org.au/ais/toolbar/

Web Developer Extension www.czilla.cz/doplnky/rozsireni/web-developer-toolbar/

on-line validátory Cynthia Says (www.cynthiasays.com) WAVE (wave.webaim.org)

asistivní technologie

37

Další zdroje informací

www.blindfriendy.czhttp://zdrojak.root.cz/pristupnosthttp://poslepu.czwww.blindfriendy.cz/wcag20www.pravidla-pristupnosti.czwww.pravidla-pristupnosti.cz/att/publikace.pdf

38

PRAKTICKÁ ČÁST - čemu věnovat pozornost v obecné rovině?NadpisySeznamy, odstavceOdkazyGrafika (CAPTCHA)BarvyTabulkyFormulářePřístupnost ovládacích prvků webu z klávesnice

39

Sémantika je základSprávné strukturování stránky výrazně zlepšuje

kvalitu poskytovaných informací a efektivitu práce se stránkou.

POUŽÍVEJTE HTML značky v souladu s jejich určením – screen readery jsou s každou novou verzí dokonalejší a řešení, která byla dříve považovány na vhodné, mohou dnes komplikovat práci.

Více viz http://poslepu.blogspot.com/2008/02/screen-readery-semantika.html

40

NadpisyZ hlediska nevidomých uživatelů je naprosto

nezbytné vhodně strukturovat obsah stránek pomocí značek pro nadpisy a dodržovat důležitost a hierarchii nadpisů.

Hlavní obsah stránky je vhodné vyznačit pomocí nadpisu h1.

Pro vyznačení nadpisů je nutné používat značky <h1>, .., <h6>, ne vlastní styly či jen značky pro velké/tučné písmo, atp.

41

Nadpisy - skrytéPoužíváme pro onadpisování těch částí webu (hlavní/

pomocná navigace, atd.), u kterých není z nějakého důvodu možné/ vhodné použít viditelné nadpisy.

Vhodná technika pro skrývání

.skryj {position: absolute; top: auto; left: -10000px; height:1px; font-size:1px; overflow: hidden;}

<h2 class=„skryj“>Hlavní navigace</h2>

http://www.webaccessibility.info/lab/displaytest.htmlDnes již řeší landmarky z WAI-ARIA

42

SeznamyTy části stránek, které jsou ze své

podstaty seznamem, je důležité jako položky seznamů vyznačovat (položky navigací, výčty prvků, ...)

Implementaceznačky: <ul>, <ol>, <li>, <dl>, <dt>, <dd>

43

OdstavceText je vhodné členit do odstavců, které

jsou vyznačeny značkou <p>.Text odstavců je psán (pokud to

charakter sdělení nevylučuje) principem obrácené pyramidy.

Mezi odstavci jsou dostatečné mezery.

44

OdkazyOdkazy jsou základ hypertextu.Odkazy musí být přístupné a ovladatelné z

klávesnice.Chyba – odkaz, který nikam nevede

<a href="#" onmouseover="dropdownmenu()">Produkty</a>

45

Označení odkazuOznačení odkazu by mělo dávat smysl i bez okolního

kontextu.Nevhodné

Klikněte zdeZdeVíceInfo

Označení odkazu by mělo být krátké a výstižné.Označení odkazu nezačíná nevýznamovým znakem.

Jsou situace, kdy nelze jinak, ale pokud je to možné, je vhodné se tomuto způsobu označení odkazů vyvarovat.

46

Vzhled odkazu Podtrhávat (v hlavním obsahu stránky).hover, focus, activePříklad:

a:hover,a:focus,a:active

{background-color:#ffffff; color:#ff0000;}Lze použít i vlastnost outline.

47

Informování o cíli odkazuIdeál – o cíli odkazu informují prohlížeče.Skutečnost – tyto informace (a to ještě ne všechny)

sdělují pouze screenreadery.Příklady:

odkaz do této stránky,odkaz vedoucí mimo web,non-HTML obsah,odkaz otevírající nové okno prohlížeče,jiný dokument v rámci webu,poštovní odkaz.navštívený odkaz.

Musí řešit autor webu.

48

Odkaz na non-HTML obsahOznačení takového odkazu musí

obsahovat informaci o typu a velikosti cílového souboru.

Tuto informaci není vhodné dávat do title (screen-readery neinterpretují) nebo prezentovat formou ikonky, skrytou na pozadí pomocí CSS.

49

Další typy odkazůOdkazy otevírající nová okna prohlížeče.Odkazy vedoucí mimo web.Ikonka na pozadí odkazu, skrytá pomocí CSS,

nestačí.Řešení:http://poslepu.blogspot.com/2008/03/externi-

odkazy-pristupnost.html

50

Pomocné navigační menuNa začátek každé stránky je vhodné umístit skryté

pomocné navigační menu (odkazy na důležité části stránek – hlavní obsah, navigace, ...).

Maximálně tři odkazy pro přesun na důležité části..skryj { position:absolute; left:-10000px; top:auto;

width:1px; height:1px; overflow:hidden; } Další způsob implementace

http://pristupnost.nawebu.cz/weblog/blogpost.php?post=94

51

Grafické objekty na stránkách IGrafika není z hlediska

přístupnosti špatná.Grafika zvyšuje

přístupnost – ilustrace, ikony, animace, atp.

Kromě nevidomých, kteří ji až tak neocení, je prospěšná prakticky všem návštěvníkům.

52

Grafické objekty na stránkách IIMají tři hlavní účely:nesou významovou informaci;dekorativní funkci (doplnění sdělované

informace bez toho, aniž by přinášely něco nového);

slouží jako odkazy.

53

Grafické objekty na stránkách IIINesoucí významovou informaciLogoFotografieGrafObrázek jako odkazCAPTCHA

54

Grafické objekty na stránkách IVNesoucí významovou informaci

Samostatný obrázek<img src=„“ alt=„relevantní popis obrázku“ />

Obrázek s popiskem mimo alt<p><img src=„“ alt=„deskriptivní popis obrázku“ />relevantní popis obrázku</p>

55

Grafické objekty na stránkách VDekorativníodrážky, čáry, zaoblené rohy, ilustrační fotografie, ...

Implementacev kódu

<img src=„...“ alt=„“ />skrytí na pozadí pomocí CSS

56

Grafické objekty na stránkách VIObrázky jako odkazy.<a href=„“><img src=„“ alt=„popis cíle

odkazu“ /></a>Pokud za obrázkem následuje odkaz, vedoucí

na stejné místo, je vhodné buď<a href=„“><img src=„“ alt=„“ /> Text

odkazu</a>obrázek schovat na pozadí odkazu.

57

Alternativní popisek u obrázkuUčitel na základní škole,

vysvětluje rozdíl mezi malbou, kresbou a rytinou.

Rodinný příslušník tvoří rodokmen.

Profesor na vysoké škole vysvětluje rozdíl mezi různými typy maleb.

Historik umění vytváří katalog malířů portrétů.

58

Alternativní popisek ke grafu

0

100

200

300

400

500

600

700

2003 2004 2005 2006 2007

konzultace

klienty

hodiny

59

BARVY A KONTRAST IDostatečný vzájemný kontrast barev (CCA).Pozor na vzorky na pozadí -> kontrast může

být dostatečný, ale text nemusí být čitelný.Nezávislost na nastavení barevného

schématu.Nezávislost na vnímání barev.

60

Colour Contrast AnalyzerPro česká pravidla přístupnosti

je rozhodující výsledek označený jako "AA". Pokud se tedy pro Vaši barevnou kombinaci objeví "Vyhovuje (AA)", je kontrast v pořádku. Pokud se u výsledku objeví zároveň i "Vyhovuje (AAA)", znamená to, že kontrast je mimořádně dobrý.

Jako "Algoritmus" je třeba zvolit "Světelnost". Algoritmus rozdílu barvy a jasu je určen pro starší verze pravidel přístupnosti (např. WCAG 1.0 či původní Pravidla MI ČR).

61

Běžný uživatel Barvoslepý uživatel

62

počet účastníků

leden

únor

březen

duben

květen

63

Nezávislost na vnímání barev IIbpočet účastníků

leden

únor

březenduben

květen

leden

únor

březen

duben

květen

64

65

Barvy a kontrast IIPožadavky na dostatečný kontrast se

týkají i textové informace, prezentované graficky -> kde to lze, je lepší se tomuto způsobu řešení vyhnout -> horší čitelnost textu při jeho zvětšení.

66

PísmoDostatečná výchozí velikost

písma.Písmo lze zvětšovat i zmenšovat

pomocí prostředků prohlížeče.Lepší je sans-serif.

67

Konzistentní navigaceNavigace musí být konzistentní a

srozumitelná napříč celým webem.Navigační mechanismy musí být

umístěny stále na stejných (ideálně i obvyklých) místech.

Navigace musí být přístupná.

68

Konzistentní navigaceNa každé stránce webu obsahuje 5 prvků, které

vždy potřebujete mít po ruce logo,odkaz na titulní stránku,sekce,vyhledávání,pomůcky.

Výjimkami mohou být titulní stránka a formuláře.

69

Navigace – kufrový testO jaký server se jedná? (Logo serveru)Na jaké jsem stránce? (Název stránky)Jaké jsou hlavní sekce tohoto serveru? (Sekce)Jaké mám na dané úrovni možnosti? (Lokální

navigace)Kde se nacházím v hierarchii serveru? (Drobečková

navigace)Jakým způsobem mohu vyhledávat?

70

Ovladatelnost webu z klávesniceDůležitá pro velkou skupinu handicapovaných

osob (nevidomí, slabozrací, tělesně postižení, ...).

Všechny ovládací prvky stránky (odkazy, formulářové prvky, ...) musí být dostupné a ovladatelné z klávesnice.

Dostatečně zvýrazněný prvek, který má focus.Klávesové zkratky???

71

DALŠÍ TECHNOLOGIECSSJavascriptCookiesFlashActiveXNení dobrá a špatná technologie.Použití konkrétní technologie nemusí ještě nutně

způsobit problém s přístupností, technologii je třeba použít tak, aby si s ní přístupové prostředky na straně klienta poradily.

72

FORMULÁŘE IDbát na správné definování vazeb mezi

prvky a popisky pomocí značky label a atributů for a id

Vhodné seskupování prvků pomocí fieldset a legend

Implementace www.plavacek.net/formulare

73

TABULKY ITabulky používat v souladu s určením (křížově závislé

informace)do každé buňky dávat pouze informace, které

spolu logicky souvisí;tabulka musí dávat smysl čtena po řádcích;th, id, headers, summary

příklad správného použití www.idos.cz/blindTabulky použité pro layout (nepoužívat)

74

75

A to je vše ;-)

Děkuji za pozornost.

Kontakt:Radek Pavlíčekradek@blindfriendly.czwww.centrumpronevidome.cz/pavlicek

76