Autorizovaný

překlad WCAG 2.0 Web Content Accessibility

Guidelines 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. Úvod

Autorizovaný 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řekladu

Autorizovaný 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/from1

0/comparison/

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

• Ostatní (svým způsobem) odpovídají

pravidlům WCAG 1.0.

WCAG 2.0

Co 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říklady

Autorizovaný 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řístupnosti

vašeho webu?

Děkujeme za pozornost…

• Radek Pavlíček

@radlicek

• Roman Kabelka

@cjneti

• Lukáš Marvan

@bobmarvan