přístupnost prakticky 2.0

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

Upload: bob-marvan

Post on 30-Nov-2014

698 views

Category:

Internet


0 download

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

Přístupnost prakticky

2.0Mgr. Lukáš Marvan

Page 2: Přístupnost prakticky 2.0

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

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

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

Page 5: Přístupnost prakticky 2.0

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

AVG Confidential

Motivační obrazová příloha # 1

Page 7: Přístupnost prakticky 2.0

AVG Confidential

Motivační obrazová příloha # 2

Page 8: Přístupnost prakticky 2.0

AVG Confidential

Motivační obrazová příloha # 3

Page 9: Přístupnost prakticky 2.0

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

AVG Confidential

2 příklady: odečítač obrazovky & braillský řádek

Asistivní technologie

Page 11: Přístupnost prakticky 2.0

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

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

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

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

Web Content AccessibilityGuidelines (WCAG) 2.0Světový standard od roku 2008

Page 16: Přístupnost prakticky 2.0

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

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

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

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

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

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

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

Příklady dopadů na grafické uživatelské rozhraní

Rychlé tipy pro lepší přístupnost

Page 24: Přístupnost prakticky 2.0

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

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

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

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

AVG Confidential

+ Absolutní velikost a relativní poziceprvků rozhraní

min 7.5 mm

Page 29: Přístupnost prakticky 2.0

Dopady na zdrojový kódRychlé tipy pro lepší přístupnost

Page 30: Přístupnost prakticky 2.0

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

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

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

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

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

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

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

Závěr

Page 38: Přístupnost prakticky 2.0

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

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

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

AVG Confidential

„Práce na lepší

přístupnosti webu

nikdy nekončí.“

Uvědomte si

Page 42: Přístupnost prakticky 2.0

Č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

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