Autorizovaný překlad WCAG 2.0Web Content AccessibilityGuidelines 2.0

Přednášet budou

• Radek Pavlíček@radlicek

• Roman Kabelka@cjneti

• Lukáš Marvan@bobmarvan

Program

• 9:30 – 10:00– Úvod a snídaně

• 10:15 – 11:45– Představení překladu WCAG 2.0

• 12:00 – 13:30– Praktické příklady– Vyzkoušení vlastních webů

1. ÚvodAutorizovaný překlad WCAG 2.0

Proč autorizovaný překlad?

• Protože má váhu.

• Protože je univerzální.

• Přístupný i pro ty, kteří umí „jen“ česky.

Proč jsme v Seznamu?

• Přístupnost nám není cizí!

• Seznam.cz se zpřístupňování svých služeb věnuje dlouhodobě již od roku 2005 ve spolupráci s Centrem Tereza.

• Doposud jsme používali interníPravidla přístupného Seznamu.

2. Představení překladuAutorizovaný překlad WCAG 2.0

Kdo se na něm podílí?

• ČRHO

• FI MUNI v Brně

• Martin Hassman

• Helpnet.cz

• Google ČR

• MVČR

• Pecka Design

• Seznam.cz

• Petr Staníček

• Teiresias

• QCM, s.r.o.

Co mu předcházelo a na co navazuje?

WCAG 1.0

• 5. května 1999• 14 pravidel s jednotlivými kontrolní body

• priorita (1 až 3) -> důležitost (musí, měl by, může)

Principy nebo pravidla?

Pravidla

• Didaktické formulace.

• Strach z pochybení.

• Magický počet (3, 7, 9, 10, 12).

• Nepřipouštějí výjimky.

• Zastarávají.

• Relativně snadno se ověří jejich splnění.

Principy

• Formulují problém v abstraktní rovině.

• Více možných (správných) výkladů.

• Dlouhá životnost.

• Zodpovědnost.

• Erudovanost.

• Hůře se testuje jejich splnění.

Guideline

• Direktiva.

• Směrnice.

• Návod.

• Vodítko.

• Doporučený postup.

WCAG 2.0

• Reakce na dnes již v mnoha ohledech nevyhovující WCAG 1.0.

• 25. ledna 2001 – první veřejná pracovní verze.

• Následovalo dalších 11 pracovních verzí.• Finální verze vydána 11. prosince

2008.

WCAG 2.0 – struktura metodiky

• Princip – pravidlo – kritérium – technika• 4 principy

– Vnímatelnost.– Ovladatelnost.– Srozumitelnost.– Robustnost.

WCAG 2.0 – struktura metodiky

• 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– postačující,– poradenské.

WCAG 2.0 v rychlosti - vnímatelnost

• Textové alternativy.• Titulky a alternativy.• přizpůsobitelný obsah.• Dostatečný kontrast.

WCAG 2.0 v rychlosti - ovladatelnost

• 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 v rychlosti - srozumitelnost

• Č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 v rychlosti - robustnost

• Maximální kompatibilita se stávajícími i budoucími technologiemi, včetně asistivních technologií.

WCAG 1.0 vs. WCAG 2.0

• Kompletní srovnání cca 35 normostran.

• http://www.w3.org/WAI/WCAG20/from10/comparison/

• 21 naprosto nových požadavků/kritérií.

• Ostatní (svým způsobem) odpovídají pravidlům WCAG 1.0.

WCAG 2.0Co je nového?

Progresivní přístup k věci.

Soulad s aktuálními trendy.

Flexibilita, přizpůsobivost a nadčasovost.

Měřitelnější výsledky.

Nezávislost na technologii.

Orientace na uživatele.

Základy jsou pořád stejné.

Změna pohledu na přístupnost

• Důraz na uživatele vs. Technicistní pohled na přístupnost.

• Přístupnost není černobílá.

• Jen soulad s metodikou nestačí (guideline = návod, ne dogma).

Pár rad závěrem

• Zvyky a chování uživatelů se mění.

• Mění se i asistivní technologie.

• Sledujte trendy, on-line zdroje.

• Komunikujte s uživateli.

• Používejte zdravý selský rozum.

WCAG 2.0 – další zdroje

• originální verze – www.w3.org/TR/WCAG20• český překlad – www.blindfriendly.cz/wcag20

– část dokumentu, neautorizovaný překlad

• seriál na Zdroják.cz – http://zdrojak.root.cz/serialy/wcag-2-0

• WCAG 2.0 Checklist– www.webaim.org/standards/wcag/checklist

• WCAG 2.0 Checklist – česká verze– www.blindfriendly.cz/wcag20checklist

3. Praktické příkladyAutorizovaný překlad WCAG 2.0

Problematické prvky

• Alternativy

• Titulky

• Nadpisy

• Seznamy

• Nevhodné použití Javascriptu

• Nedostatečný kontrast barev

• Malé výchozí písmo

• Tabulky

• Formuláře

Alternativy

• 1.1.1 Netextový obsah: Každý netextový obsah, který je uživateli prezentován, má svou textovou alternativu, sloužící stejnému účelu.

http://www.ibm.com/cz/cs/

Titulky

• 2.4.2 Stránky mají titulek: Každá webová stránka má titulek, vystihující její téma či účel.

http://vspj.cz/

Nadpisy

• 2.4.6 Nadpisy a popisky: Nadpisy a popisky odpovídají svému účelu nebo tématu.

• 2.4.10 Záhlaví jednotlivých částí: Záhlaví jednotlivých částí slouží k uspořádání obsahu.

http://novinky.cz/

Seznamy

• 1.3.1 Informace a vzájemné vztahy: Informace, strukturu a vzájemné vztahy obsažené v prezentaci lze programově určit nebo jsou dostupné ve formě textu.

• http://www.superkoderi.cz/

Nevhodné použití Javascriptu

• 2.1.1 Klávesnice: Všechny funkce obsahu lze obsluhovat přes rozhraní klávesnice, aniž by bylo nutné jednotlivé úhozy zvláště časovat, výjimku tvoří případ, kdy vstup dané funkce reaguje na způsob pohybu při zadávání a jeho průběh.

http://pipni.cz/

Nevhodné použití Javascriptu

• 2.1.2 Žádná past na klávesy: Jestliže je možné přesunout fokus na určitý prvek na stránce prostřednictvím klávesnice, pak je také možné pouze prostřednictvím klávesnice fokus opět z prvku přesunout pryč. Je-li k tomu zapotřebí použít jiných kláves než šipek, tabulátoru s nezměněnou funkcí či jiných kláves standardně používaných pro návrat, je uživatel poučen o způsobu, jímž lze fokus z prvku odstranit.

Nedostatečný kontrast barev

• 1.4.3 Minimální kontrast: Text či text ve formě obrázku má vůči svému pozadí kontrast minimálně 4,5:1.

http://www.apple.com/cz/ 

Malé výchozí písmo

• 1.4.4 Změna velikosti textu: 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.

http://www.skype.com/intl/en-gb/home

Tabulky

• 1.3.2 Srozumitelné pořadí: Jestliže má pořadí informací, v němž jsou prezentovány, vliv na jejich srozumitelnost, může být správné pořadí, v němž mají být informace čteny, programově určeno.

http://www.gymta.cz/

Formuláře

• 3.3.2 Popisky nebo pokyny: Je-li vyžadován vstup uživatele, má uživatel k dispozici popisky nebo pokyny.

• http://registrace.seznam.cz/

Kruciální otázky:

• Co je špatně na vašem webu?

• Co uděláte pro zlepšení přístupnostivašeho webu?

Děkujeme za pozornost…

• Radek Pavlíček@radlicek

• Roman Kabelka@cjneti

• Lukáš Marvan@bobmarvan