Povídání o přístupnosti a WCAG 2.0 na srpnovém UX Monday v Praze.

1. Přístupnost
prakticky
2.0
Mgr. Lukáš Marvan

2. AVG Confidential2
• Kdopak to mluví? – Stručné představení.
• Proč přístupnost? – Jakou máme motivaci.
• Web Content Accessibility Guidelines (WCAG) 2.0
• Rychlé tipy pro lepší přístupnost.
• Závěr
• Rady a otázky
• Zdroje
• Dotazy
• Pivo
Váš program na pondělní večer

3. AVG Confidential
Mgr. Lukáš Marvan / @BoBMarvan
• Před tím, než jsem začal pracovat v AVG Technologies,
tak jsem 10 let vyráběl a vymýšlel weby v Seznam.cz.
• Přístupnosti se věnuji od roku 2006.
• O přístupnosti mě školil ještě David Špinar ;)
• Byl jsem součástí týmu který autorizoval překlad
Web Content Accessibility Guidelines 2.0
Kdopak to mluví?

4. Proč přístupnost?
Naše / vaše motivace

5. AVG Confidential
Kdo může být považován za „postiženou“ osobou?
• Nevidomí a zrakově postižení (např. barvoslepí) lidé.
• Tělesně postižení lidé.
• Neslyšící nebo jinak sluchově postižení lidé.
• Lidé s kognitivními poruchami.
• Lidé mluvící jiným mateřským jazykem.
• Vyhledávácí roboti.
• Různá alternativní uživatelská rozhraní.
Různé typy „postižení“

6. AVG Confidential
Motivační obrazová příloha # 1

7. AVG Confidential
Motivační obrazová příloha # 2

8. AVG Confidential
Motivační obrazová příloha # 3

9. AVG Confidential
protože lékařské záznamy jsou důvěrné,
ale existuje odhad, že se jedná až o
I kdyby to bylo jen 5%,
tak se to týká
8 500 000
uživatelů AVG.
Nevíme, kolik postižených lidí žije na Zemi,
30 %

10. AVG Confidential
2 příklady: odečítač obrazovky & braillský řádek
Asistivní technologie

11. AVG Confidential
To už je
sakra hodně.
Výzkumná studie od Microsoftu dokazuje,
že 57 % dospělých uživatelů počítačů může
mít prospěch z přístupných technologií.
57 %
Zdroj: Microsoft.com

12. AVG Confidential
Opening Doors to IT
• http://www.pravidla-pristupnosti.cz/
• www.section508.gov
Nezapomínejme na zákony

13. AVG Confidential
“Je to hluboce
správná věc.”
Ve skutečnosti existuje ještě jeden ohromný
důvod, proč se věnovat přístupnosti:

14. AVG Confidential
Kdykoliv přemýšlíte o přístupnosti,
připomeňte si následující fakta:
• Nevidomý uživatel je schopen získat ze stránky pouze informace v
textové podobě.
• Nevidomý uživatel vnímá informace, které jsou na stránce,
lineárně - chybí mu globální pohled.
• Nevidomý uživatel obsluhuje osobní počítač a veškeré programy
pouze z klávesnice.
• Slabozraký uživatel vzhledem k použití softwarové lupy,
může vidět v jednu chvíli pouze malou část stránky.
Mějte prosím na paměti

15. Web Content Accessibility
Guidelines (WCAG) 2.0
Světový standard od roku 2008

16. AVG Confidential
“Méně striktních pravidel,
více základních principů.”
Web Content Accessibility Guidelines (WCAG) 2.0
Web Content Accessibility Guidelines 2.0

17. AVG Confidential
Princip – pravidlo – kritérium – technika.
• Každý princip je dále členěn na několik pravidel (celkem je jich 12).
• Každé pravidlo má několik kritérií, které mají opět přiřazeny priority
(A, AA, AAA) a jejich ne/splnění lze ověřit.
• K pravidlům a kritériím jsou přiřazeny techniky.
WCAG 2.0 – struktura metodiky

18. AVG Confidential18
Čtyři základní principy
1. Vnímatelnost.
2. Ovladatelnost.
3. Srozumitelnost.
4. Robustnost.
Web Content Accessibility Guidelines 2.0

19. AVG Confidential
• Textové alternativy
• Nadpisy a jejich alternativy
• Kustomizovatelný obsah
• Dostatečný kontrast
WCAG 2.0 - Vnímatelnost

20. AVG Confidential
• Přístupnost z klávesnice.
• Dostatek času na přečtení a práci s obsahem stránky.
• Pozor na záchvaty.
• Navigace a snadné nalezení obsahu.
WCAG 2.0 - Ovladatelnost

21. AVG Confidential
• Čitelné a srozumitelné texty.
• Obsah se zobrazuje a funguje tak, jak uživatel předpokládá.
• Pomozte uživatelům vyvarovat se chyb a opravit je.
WCAG 2.0 - Srozumitelnost

22. AVG Confidential
• Maximální kompatibilita se stávajícími i budoucími technologiemi,
včetně asistivních technologií.
WCAG 2.0 - Robustnost

23. Příklady dopadů na grafické
uživatelské rozhraní
Rychlé tipy pro lepší přístupnost

24. AVG Confidential
Účel každého odkazu může být určen pouze z textu samotného.
Nové ceníky naleznete zde.
vs.
Zde naleznete nové ceníky.
• Účel každého odkazu může být určen pouze z textového označení nebo
z textového označení v kombinaci s jeho programově určeným
kontextem. Výjimku tvoří případ, kdy je účel odkazu nejednoznačný
pro všechny uživatele. (Úroveň A)
2.4.4 Účel odkazu (v kontextu)
✘
✔

25. AVG Confidential
Barva není používána jako jediný vizuální prostředek,
sloužící k poskytnutí určité informace.
Toto je link uprostřed delšího textu.
vs.
Toto je link uprostřed delšího textu.
• Barva není používána jako jediný vizuální prostředek, sloužící k
poskytnutí určité informace, k indikování určité akce, k vyjádření
požadavku na odezvu či k odlišení určitého vizuálního prvku.
(Úroveň A)
1.4.1 Používání barev
✘
✔

26. AVG Confidential
Text či text ve formě obrázku má vůči svému pozadí kontrast
minimálně 4,5:1.
Nástroj: Color Contrast Analyzer for Chrome
• Výjimku tvoří následující případy (Úroveň AA):
• Texty psané velkým fontem: Texty psané velkým fontem či texty tohoto
typu prezentované ve formě obrázku mají kontrast minimálně 3:1.
• Texty, které se náhodou staly součástí prezentace a nejsou pro ni
relevantní: text nebo text v obrázku, které jsou součástí neaktivního prvku
uživatelského rozhraní, texty sloužící čistě dekorativním účelům, texty, které
nejsou viditelné žádnému uživateli nebo texty, které jsou součástí obrázku s
nímž významově nesouvisí, nemusí splňovat žádné požadavky týkající se
kontrastu.
• Logotypy: Text, který je součástí loga nebo názvu firmy či produktu,
nepodléhá žádným požadavkům na minimální kontrast.
1.4.3 Minimální kontrast

27. AVG Confidential
• Webové stránky
neobsahují žádné prvky,
blikající více jak třikrát
za sekundu nebo je toto
blikání pod prahem
stanoveným obecně pro
blikání a pod prahem
stanoveným pro červené
blikání. (Úroveň A)
2.3.1 Tři záblesky nebo podprahové blikání
✘

28. AVG Confidential
+ Absolutní velikost a relativní pozice
prvků rozhraní
min 7.5 mm

29. Dopady na zdrojový kód
Rychlé tipy pro lepší přístupnost

30. AVG Confidential
Opatřete každý netextový obsah textovými alternativami, které je
možné podle potřeby převést do jiných formátů jako například
zvětšené písmo, bodové písmo, fonetický přepis či zjednodušený
jazyk.
<a href="http://www.avg.com">
<img src="logo.png" alt=“AVG.com"/>
</a>
• Každý netextový obsah, který je uživateli prezentován, má svou
textovou alternativu, sloužící stejnému účelu… (Úroveň A)
• Jestliže netextovým obsahem je ovládací prvek či prvek reagující na
vstup uživatele, pak má tento prvek název popisující jeho účel.
1.1 Netextový obsah
✔

31. AVG Confidential
Semantická struktura dokumentu.
<h1>Používejte nadpisy správně</h1>
• Informace, strukturu a vzájemné vztahy obsažené v prezentaci lze
programově určit nebo jsou dostupné ve formě textu. (Úroveň A)
1.3.1 Informace a vzájemné vztahy
✔

32. AVG Confidential
Jestliže uživatel provede změnu v nastavení určité položky
uživatelského rozhraní, nevyvolá to automaticky změnu kontextu…
<input onclick="this.form.submit();" id="relevance"
name="order" value="relevance" type="radio"/>
• Jestliže uživatel provede změnu v nastavení určité položky
uživatelského rozhraní, nevyvolá to automaticky změnu kontextu nebo
je na změnu předem upozorněn. (Úroveň A)
3.2.2 Při akci uživatele
✘

33. AVG Confidential
<title>Jméno stránky - Jméno webu</title>
• Každá webová stránka má titulek, vystihující její téma či účel.
(Úroveň A)
2.4.2 Stránky mají titulek
✔

34. AVG Confidential
body { font-size: 13px; }
vs.
body { font-size: 89%; }
• S výjimkou titulků a textů ve formě obrázků může být text zvětšen až
o 200% bez pomoci asistivních technologií, aniž dojde ke ztrátě
obsahu či porušení funkčnosti. (Úroveň AA)
1.4.4 Změna velikosti textu
✘
✔

35. AVG Confidential
např. “Přeskočit na obsah”
.hidden { position:absolute; left:-1000px; top:-1000px;
width:1px; height:1px; overflow:hidden; }
<!–- hidden link -->
<a href="#content" accesskey="0" class="hidden">přeskočit
na obsah</a>
<!-- anchor -->
<a name="content"></a>
• Uživatel má k dispozici mechanismus, umožňující mu přeskakovat
bloky informací, které se opakovaně objevují na více stránkách
prezentace. (Úroveň A)
2.4.1 Přeskoč bloky
✔

36. AVG Confidential
např. ve formulářích.
<input id="cr" name="mod" value="f" type="radio"/>
<label for="cr" class=“hidden">ČR</label>
• Nadpisy a popisky odpovídají svému účelu nebo tématu. (Úroveň AA)
2.4.6 Nadpisy a popisky
✔

37. Závěr

38. AVG Confidential
o čem jsme si tu dnes povídali…
• Proč přístupnost? – Jakou máme motivaci.
• Web Content Accessibility Guidelines (WCAG) 2.0
• Rychlé tipy pro lepší přístupnost.
• Závěr
• + Nastudujte si další Zdroje
Shrnutí

39. AVG Confidential
které bych vám chtěl na závěr dát…
1. Se zavedením postupů zlepšujících
přístupnost neotálejte!
Jejich zpětná implementace je mnohem
náročnější ve srovnání s tím, jak snadné je
jejich použití od startu projektu.
2. Důležité jsou kvalitní testovací nástroje.
Dvě dobré rady

40. AVG Confidential
které by si měl každý z vás nyní položit…
1. Co je špatně na vašem webu?
2. Co uděláte pro zlepšení přístupnosti
vašeho webu?
Dvě kruciální otázky

41. AVG Confidential
„Práce na lepší
přístupnosti webu
nikdy nekončí.“
Uvědomte si

42. Čekám na vaše otázky
a/nebo
jdeme na pivo?!
Mgr. Lukáš Marvan | UX Designer | T +420 725 695 148 E lukas.marvan@avg.com

43. AVG Confidential
Kde se dozvíte mnohem více o přístupnosti.
• Web Content Accessibility Guidelines (WCAG) 2.0 (CZ)
• Easy Checks - A First Review of Web Accessibility
• WebAIM's WCAG 2.0 Checklist (CZ)
• Web accessibility tutorials
• Accessible Rich Internet Applications (WAI-ARIA) 1.0
• Section508.gov
• Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
• Don’t Make Me Think, Revisited (chapter 12. Accessibility and You)
Zdroje