Autorizovaný překlad WCAG 2.0

1,404 views

Published on

Slidy z workshopu pořádaného Seznamem u příležitosti WebExpo 2011. Přednášeli a přístupnost předváděli: Radek Pavlíček, Roman Kabelka a Lukáš Marvan.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,404
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Radek se přístupnosti aktivně věnuje od roku 2000  pod hlavičkou projektu Blind Friendly Web . Je autorem metodiky Blind Friendly Web a spoluautor českých pravidel přístupnosti pro weby veřejné správy . O přístupnosti také píše na svém blogu POSLEPU. Roman se problematice přístupnosti věnuje profesionálně 4 roky pod hlavičkou projektu  Blind Friendly Web . Jeho zkušenosti s implementací užitné přístupnosti na webových stránkách sahají ovšem již do doby více jak před deseti lety, kdy se setkával s častými bariérami v přístupnosti a zkoumal možnosti jejich řešení. Kromě toho se věnuje lektorské činnosti zaměřené na zácvik s náročnými kompenzačními pomůckami pro nevidomé na bázi PC ve společnosti  TyfloCentrum Brno .
  • Autorizovaný překlad WCAG 2.0

    1. 1. Autorizovanýpřeklad WCAG 2.0Web Content AccessibilityGuidelines 2.0
    2. 2. Přednášet budou • Radek Pavlíček @radlicek • Roman Kabelka @cjneti • Lukáš Marvan @bobmarvan
    3. 3. 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ů
    4. 4. Autorizovaný překlad WCAG 2.01. Úvod
    5. 5. Proč autorizovaný překlad?• Protože má váhu.• Protože je univerzální.• Přístupný i pro ty, kteří umí „jen“ česky.
    6. 6. 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.
    7. 7. Autorizovaný překlad WCAG 2.02. Představení překladu
    8. 8. Kdo se na něm podílí?• ČRHO • MVČR• FI MUNI v Brně • Pecka Design• Martin Hassman • Seznam.cz• Helpnet.cz • Petr Staníček• Google ČR • Teiresias • QCM, s.r.o.
    9. 9. Co mu předcházelo a na conavazuje?
    10. 10. 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)
    11. 11. Principy nebopravidla?
    12. 12. 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í.
    13. 13. 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í.
    14. 14. Guideline• Direktiva.• Směrnice.• Návod.• Vodítko.• Doporučený postup.
    15. 15. 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.
    16. 16. WCAG 2.0 – struktura metodiky• Princip – pravidlo – kritérium – technika• 4 principy – Vnímatelnost. – Ovladatelnost. – Srozumitelnost. – Robustnost.
    17. 17. 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é.
    18. 18. WCAG 2.0 v rychlosti - vnímatelnost• Textové alternativy.• Titulky a alternativy.• přizpůsobitelný obsah.• Dostatečný kontrast.
    19. 19. 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.
    20. 20. 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.
    21. 21. WCAG 2.0 v rychlosti - robustnost• Maximální kompatibilita se stávajícími i budoucími technologiemi, včetně asistivních technologií.
    22. 22. 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.
    23. 23. WCAG 2.0Co je nového?
    24. 24. Progresivní přístup k věci.
    25. 25. Soulad s aktuálními trendy.
    26. 26. Flexibilita, přizpůsobivost anadčasovost.
    27. 27. Měřitelnější výsledky.
    28. 28. Nezávislost na technologii.
    29. 29. Orientace na uživatele.
    30. 30. Základy jsou pořád stejné.
    31. 31. 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).
    32. 32. 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.
    33. 33. 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
    34. 34. Autorizovaný překlad WCAG 2.03. Praktické příklady
    35. 35. Problematické prvky• Alternativy• Titulky• Nadpisy• Seznamy• Nevhodné použití Javascriptu• Nedostatečný kontrast barev• Malé výchozí písmo• Tabulky• Formuláře
    36. 36. 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/
    37. 37. 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/
    38. 38. 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/
    39. 39. 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/
    40. 40. 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/
    41. 41. 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.
    42. 42. 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/
    43. 43. 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
    44. 44. 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/
    45. 45. 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/
    46. 46. Kruciální otázky:• Co je špatně na vašem webu?• Co uděláte pro zlepšení přístupnosti vašeho webu?
    47. 47. Děkujeme za pozornost… • Radek Pavlíček @radlicek • Roman Kabelka @cjneti • Lukáš Marvan @bobmarvan

    ×