Radek Pavlíček: Přístupný web

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).

Definice přístupnosti I
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.
Lze tuto definici vůbec naplnit?

Definice přístupnosti II
Za 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á).

Definice přístupnosti III
Web 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.
?

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

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

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.

PR, posilování značky
Social responsibility
Pomá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í.

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í.

Trest
Vyhnutí se soudům nebo kritice za nepřístupnost.

Komu všemu pomohu I
Zrakové 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í

Komu všemu pomohu II
Senioř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).

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í software
hlasová syntéza (WT Voice, HLAS, RS SOLO)
screen reader pro nevidomé
softwarová lupa pro slabozraké
Speciální hardware
braillský řádek, ozvučený mobilní telefon či PDA

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.

Co vše má vliv na přístupnost? #1
Zdravotní 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.

Zkuš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.

Použitá asistivní technologie, její konfigurace a verze
jinak „vidí“ web uživatel JAWS, jinak uživatel Halu, jinak uživatel ZoomTextu či Supernovy.
Použitý prohlížeč a jeho doplňky
Preference a zvyklosti konkrétního uživatele

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.).

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 .

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í.

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 ).

Co potřebují lidé s kognitivními poruchami
Konzistentní 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.

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.

Musím umět ovládat AT?
Nutné to není.
Netriviální obsluha pro běžného uživatele
Nenasimulujete způsob práce a vnímání webu uživatelem s postižením
Vysoká 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í.

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.

Mýty kolem bezbariérového webu
Vytvoř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.

Metodiky přístupnosti
Nejznámější metodiky
WCAG 1.0 a 2.0
Blind Friendly Web
Dogma W4
Section 508
Pravidla MI z roku 2004
Pravidla tvorby přístupného webu z roku 2008

Metodiky přístupnosti
IDEÁLY přístupného webu
To, ž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.

Co ovlivňuje kvalitu metodiky
Datum 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ů.

WCAG 2.0
Vydá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í .

Testování přístupnosti
ruční kontrola;
automatická kontrola;
audit odborníka;
uživatelský test provedený handicapovanými uživateli.

Kdo může provést test webu? odborník na přístupnost handicapovaný zkušený uživatel X autor webu Každý z nich může přístupnost toho samého webu vyhodnotit různě.

Handicapovaný zkušený uživatel
otestuje 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;

Odborník na přístupnost
spolehlivě 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;

Autor webu
zná 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í;

Nástroje pro testování přístupnosti
toolbary
Acce s sibility 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

Další zdroje informací
www.blindfriendy.cz
http://zdrojak.root.cz/pristupnost
http://poslepu.cz
www.blindfriendy.cz/wcag20
www.pravidla-pristupnosti.cz
www.pravidla-pristupnosti.cz/att/publikace.pdf

PRAKTICKÁ ČÁST - čemu věnovat pozornost v obecné rovině?
Nadpisy
Seznamy, odstavce
Odkazy
Grafika (CAPTCHA)
Barvy
Tabulky
Formuláře
Přístupnost ovládacích prvků webu z klávesnice

Sémantika je základ
Sprá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

Nadpisy
Z 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.

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.html
Dnes již řeší landmarky z WAI-ARIA

Seznamy
Ty čá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ů, ...)
Implementace značky: <ul>, <ol>, <li>, <dl>, <dt>, <dd>

Odstavce
Text 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.

Odkazy
Odkazy 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>

Označení odkazu
Označení odkazu by mělo dávat smysl i bez okolního kontextu.
Nevhodné
Klikněte zde
Zde
Více
Info
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.

Vzhled odkazu
Podtrhávat (v hlavním obsahu stránky).
hover, focus, active
Příklad:
a:hover,
a:focus,
a:active
{ b ackground-color:#ffff ff ; c olor:# ff0000 ;}
Lze použít i vlastnost outline.

Informování o cíli odkazu
Ideá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.

Odkaz na non-HTML obsah
Označ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.

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

Pomocné navigační menu
Na 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

Grafické objekty na stránkách I
Grafika 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.

Grafické objekty na stránkách II
Mají 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.

Grafické objekty na stránkách III
Nesoucí významovou informaci
Logo
Fotografie
Graf
Obrázek jako odkaz
CAPTCHA

Grafické objekty na stránkách IV
Nesoucí 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>

Grafické objekty na stránkách V
Dekorativní
odrážky, čáry, zaoblené rohy, ilustrační fotografie, ...
Implementace
v kódu
<img src=„...“ alt=„“ />
skrytí na pozadí pomocí CSS

Grafické objekty na stránkách VI
Obrá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.

Alternativní popisek u obrázku
Uč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ů.

Alternativní popisek ke grafu

BARVY A KONTRAST I
Dostateč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.

Colour Contrast Analyzer
Pro č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).

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

Nezávislost na vnímání barev IIb

Barvy a kontrast II
Pož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í.

Písmo
Dostateč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.

Konzistentní navigace
Navigace 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á.

Konzistentní navigace
Na 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.

Navigace – kufrový test
O 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?

Ovladatelnost webu z klávesnice
Dů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???

DALŠÍ TECHNOLOGIE
CSS
Javascript
Cookies
Flash
ActiveX
Není 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.

FORMULÁŘE I
Dbá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

TABULKY I
Tabulky 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/blind
Tabulky použité pro layout (nepoužívat)

A to je vše ;-)
Děkuji za pozornost.
Kontakt:
Radek Pavlíček
[email_address]
www.centrumpronevidome.cz/pavlicek

Radek Pavlíček: Přístupný web

by Kabinet informačních studií a knihovnictví Brno FF MU

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 5

Statistics

Radek Pavlíček: Přístupný web Presentation Transcript

http://www.mefeedia.com	3
http://www.slideshare.net	2