přístupnost prakticky 2.0
DESCRIPTION
Povídání o přístupnosti a WCAG 2.0 na srpnovém UX Monday v Praze.TRANSCRIPT
![Page 1: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/1.jpg)
Přístupnost prakticky
2.0Mgr. Lukáš Marvan
![Page 2: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/2.jpg)
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
![Page 3: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/3.jpg)
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řekladWeb Content Accessibility Guidelines 2.0
Kdopak to mluví?
![Page 4: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/4.jpg)
Proč přístupnost?Naše / vaše motivace
![Page 5: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/5.jpg)
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í“
![Page 6: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/6.jpg)
AVG Confidential
Motivační obrazová příloha # 1
![Page 7: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/7.jpg)
AVG Confidential
Motivační obrazová příloha # 2
![Page 8: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/8.jpg)
AVG Confidential
Motivační obrazová příloha # 3
![Page 9: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/9.jpg)
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 000uživatelů AVG.
Nevíme, kolik postižených lidí žije na Zemi,
30 %
![Page 10: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/10.jpg)
AVG Confidential
2 příklady: odečítač obrazovky & braillský řádek
Asistivní technologie
![Page 11: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/11.jpg)
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
![Page 12: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/12.jpg)
AVG Confidential
Opening Doors to IT
• http://www.pravidla-pristupnosti.cz/• www.section508.gov
Nezapomínejme na zákony
![Page 13: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/13.jpg)
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:
![Page 14: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/14.jpg)
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é programypouze 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
![Page 15: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/15.jpg)
Web Content AccessibilityGuidelines (WCAG) 2.0Světový standard od roku 2008
![Page 16: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/16.jpg)
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
![Page 17: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/17.jpg)
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
![Page 18: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/18.jpg)
AVG Confidential18
Čtyři základní principy
1. Vnímatelnost.
2. Ovladatelnost.
3. Srozumitelnost.
4. Robustnost.
Web Content Accessibility Guidelines 2.0
![Page 19: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/19.jpg)
AVG Confidential
• Textové alternativy
• Nadpisy a jejich alternativy
• Kustomizovatelný obsah
• Dostatečný kontrast
WCAG 2.0 - Vnímatelnost
![Page 20: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/20.jpg)
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
![Page 21: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/21.jpg)
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
![Page 22: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/22.jpg)
AVG Confidential
• Maximální kompatibilita se stávajícími i budoucími technologiemi,
včetně asistivních technologií.
WCAG 2.0 - Robustnost
![Page 23: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/23.jpg)
Příklady dopadů na grafické uživatelské rozhraní
Rychlé tipy pro lepší přístupnost
![Page 24: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/24.jpg)
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)
✘✔
![Page 25: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/25.jpg)
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
✘✔
![Page 26: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/26.jpg)
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
![Page 27: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/27.jpg)
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í
✘
![Page 28: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/28.jpg)
AVG Confidential
+ Absolutní velikost a relativní poziceprvků rozhraní
min 7.5 mm
![Page 29: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/29.jpg)
Dopady na zdrojový kódRychlé tipy pro lepší přístupnost
![Page 30: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/30.jpg)
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
✔
![Page 31: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/31.jpg)
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
✔
![Page 32: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/32.jpg)
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
✘
![Page 33: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/33.jpg)
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
✔
![Page 34: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/34.jpg)
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
✘✔
![Page 35: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/35.jpg)
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čitna 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
✔
![Page 36: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/36.jpg)
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
✔
![Page 37: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/37.jpg)
Závěr
![Page 38: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/38.jpg)
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í
![Page 39: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/39.jpg)
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
![Page 40: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/40.jpg)
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
![Page 41: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/41.jpg)
AVG Confidential
„Práce na lepší
přístupnosti webu
nikdy nekončí.“
Uvědomte si
![Page 42: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/42.jpg)
Čekám na vaše otázkya/nebo
jdeme na pivo?!
Mgr. Lukáš Marvan | UX Designer | T +420 725 695 148 E [email protected]
![Page 43: Přístupnost prakticky 2.0](https://reader031.vdocuments.net/reader031/viewer/2022013011/547a420eb4af9f86288b46ac/html5/thumbnails/43.jpg)
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