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