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
Top Related