Tvorba přístupného webu

1,339
-1

Published on

Přednáška o přístupnosti pro KISK FF MU, čtvrtek 22. 10. 2009.

Published in: Design, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,339
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Tvorba přístupného webu

  1. 1. Radek Pavlíček, říjen 2009 “ The Web is not a barrier to people with disabilities, it is the solution . Paul R. Bohman, WebAIM
  2. 2. Co je to přístupný web? <ul><li>Přístupný web </li></ul><ul><ul><li>respektuje maximum svých uživatelů; </li></ul></ul><ul><ul><li>neklade svým uživatelům žádné překážky; </li></ul></ul><ul><ul><li>lépe se používá i běžným uživatelům; </li></ul></ul><ul><ul><li>lépe se udržuje a aktualizuje. </li></ul></ul><ul><li>Přístupnost je velmi úzce provázána i s dalšími oblastmi tvorby webových stránek (použitelnost, informační architektura, SEO). </li></ul>
  3. 3. Definice přístupnosti I <ul><li>Přístupná webová stránka je použitelná pro každého uživatele Internetu, a sice nezávisle na jeho postižení, schopnostech, znalostech, zkušenostech či zobrazovacích možnostech. </li></ul>Lze tuto definici vůbec naplnit?
  4. 4. Definice přístupnosti II <ul><li>Za přístupný web lze dnes považovat takový web, který bude návštěvník s těžkým zdravotním postižením schopen i přes svůj zdravotní handicap, za pomoci prostředků, které má k dispozici, a způsobem, který mu vyhovuje, efektivně používat a dosáhnout svého cíle. </li></ul>Lépe odpovídá současné situaci v oblasti přístupnosti (jen o málokteré stránce lze dnes prohlásit, že je naprosto nepřístupná).
  5. 5. Definice přístupnosti III <ul><li>Web vykazuje zásadní nedostatky v přístupnosti a klade handicapovaným uživatelům velké překážky. </li></ul><ul><li>Při definici přístupnosti je třeba brát v potaz </li></ul><ul><ul><li>čas, </li></ul></ul><ul><ul><li>rozsah, </li></ul></ul><ul><ul><li>situaci na poli asistivních technologií a prohlížečů, </li></ul></ul><ul><ul><li>cílovou skupinu, její zvyklosti a preference. </li></ul></ul>?
  6. 6. Proč se zabývat přístupností? <ul><li>? </li></ul>
  7. 7. Člověk <ul><li>Usnadnit práci s webem lidem s handicapem i bez něj. </li></ul>
  8. 8. Zisk <ul><li>Čím více návštěvníků, tím větší kupní síla. Úspora nákladů na webovou prezentaci. </li></ul><ul><li>Úspora na HR – zájemce si informaci zjistí na webu, nemusí k vám volat. </li></ul>
  9. 9. PR, posilování značky <ul><li>Social responsibility </li></ul><ul><li>Pomáhání je v současnosti v kurzu, tak proč to, že děláme něco pro handicapované, nedat vědět všem. </li></ul><ul><li>Lepší mediální obraz v očích veřejnosti. </li></ul><ul><li>Lepší vnímání společnosti veřejností. </li></ul>
  10. 10. Lepší viditelnost ve vyhledávačích <ul><li>Řada úprav kvůli přístupnosti může pomoci posunout váš web při hledání konkrétních frází na vyšší pozice ve výsledcích vyhledávání. </li></ul>
  11. 11. Trest <ul><li>Vyhnutí se soudům nebo kritice za nepřístupnost. </li></ul>
  12. 12. Komu všemu pomohu I <ul><li>Zrakové postižení </li></ul><ul><li>(slepota, slabozrakost, barvoslepost) </li></ul><ul><li>Tělesné postižení </li></ul><ul><li>(nemožnost používat myš, pomalé reakce, omezená jemná </li></ul><ul><li>motorika) </li></ul><ul><li>Sluchové postižení </li></ul><ul><li>(hluchota) </li></ul><ul><li>Kognitivní poruchy </li></ul><ul><li>(poruchy učení a soustředění, neschopnost pamatovat si či soustředit se na velké množství textu) </li></ul><ul><li>Kombinované postižení </li></ul>
  13. 13. Komu všemu pomohu II <ul><li>Senioři. </li></ul><ul><li>Technické handicapy. </li></ul><ul><li>Dočasně zhoršené pracovní podmínky. </li></ul>Počet znevýhodněných uživatelů se pohybuje mezi 20 až 30% (záleží na tom, koho všeho řadíme mezi znevýhodněné uživatele).
  14. 14. Asistivní technologie I. <ul><li>Zahrnují asistivní, adaptivní a rehabilitační prostředky a také proces používaný při jejich výběru a používání. </li></ul><ul><li>Speciální software </li></ul><ul><ul><li>hlasová syntéza (WT Voice, HLAS, RS SOLO) </li></ul></ul><ul><ul><li>screen reader pro nevidomé </li></ul></ul><ul><ul><li>softwarová lupa pro slabozraké </li></ul></ul><ul><li>Speciální hardware </li></ul><ul><ul><li>braillský řádek, ozvučený mobilní telefon či PDA </li></ul></ul>
  15. 15. Asistivní technologie II. <ul><li>Velké či jinak přizpůsobené klávesnice ( www.petit-os.cz/klavesnice.htm ) </li></ul><ul><li>Software na hlasové ovládání PC ( www.fugasoft.cz ) </li></ul><ul><li>Tyčinky, trackbally, atp. </li></ul>
  16. 16. Co vše má vliv na přístupnost? #1 <ul><li>Zdravotní postižení </li></ul><ul><ul><li>jiné požadavky má nevidomý, slabozraký, sluchově postižený, tělesně postižený... </li></ul></ul><ul><li>Technické zpracování (~ zda vyhovuje pravidlům některé metodiky) </li></ul><ul><ul><li>nepodceňovat, ale ani nepřeceňovat. </li></ul></ul><ul><li>Zkušenosti konkrétního uživatele s prací s webem </li></ul><ul><ul><li>čím větší zkušenosti, tím lepší orientace i na méně přístupném webu, </li></ul></ul><ul><ul><li>zkušení uživatelé mají ale zpravidla vyšší nároky na přístupnost. </li></ul></ul>
  17. 17. Co vše má vliv na přístupnost? #2 <ul><li>Zkušenosti konkrétního uživatele s prací s asistivní technologií (AT) </li></ul><ul><ul><li>naučit se dobře ovládat AT by měla být povinnost zrakově postiženého uživatele, </li></ul></ul><ul><ul><li>čím lepší znalosti, tím lépe může uživatel využívat možností stránky -> vyšší efektivita práce, snazší přístup k informacím, </li></ul></ul><ul><ul><li>malé či nedostatečné znalosti -> „nesmyslné“ požadavky na přístupnost. </li></ul></ul>
  18. 18. Co vše má vliv na přístupnost? #3 <ul><li>Použitá asistivní technologie, její konfigurace a verze </li></ul><ul><ul><li>jinak „vidí“ web uživatel JAWS, jinak uživatel Halu, jinak uživatel ZoomTextu či Supernovy. </li></ul></ul><ul><li>Použitý prohlížeč a jeho doplňky </li></ul><ul><li>Preference a zvyklosti konkrétního uživatele </li></ul>
  19. 19. Co potřebují nevidomí <ul><li>Vhodné strukturování obsahu pomocí nadpisů a seznamů. </li></ul><ul><li>Přístupnost webu z klávesnice. </li></ul><ul><li>Vhodnou textovou alternativu k vizuálním prvkům. </li></ul><ul><li>Důležité informace na začátku konkrétního prvku (stránky, nadpisu, odkazu, formuláře, atp.). </li></ul>
  20. 20. Co potřebují slabozrací <ul><li>Nepoužívat text ve formě obrázků. </li></ul><ul><li>Možnost zvětšovat obsah stránky. </li></ul><ul><li>Dostatečně kontrastní barvy. </li></ul><ul><li>Možnost použití jiného barevného schématu. </li></ul><ul><li>Umístění klíčových informací či funkcionalit na obvyklá místa stránky. </li></ul><ul><li>Zvýraznění položky, která má focus . </li></ul>
  21. 21. Co potřebují sluchově postižení <ul><li>Jednoduchý jazyk, srozumitelně podávané informace. </li></ul><ul><li>Titulky či jinou textovou alternativu pro audio a video. </li></ul><ul><li>Překlad do znakové řeči u důležitých multimedií. </li></ul>
  22. 22. Co potřebují tělesně postižení <ul><li>Přístupnost obsahu z klávesnice. </li></ul><ul><li>Zvýraznění položky, která má focus . </li></ul><ul><li>Viditelné odkazy pro přechod na různé části stránky. </li></ul><ul><li>Prvky, na něž lze kliknout, se nepohybují. </li></ul><ul><li>Dostatečně velké oblasti pro kliknutí. </li></ul><ul><li>Vhodně pojmenované prvky stránky ( rozpoznávání hlasu ). </li></ul>
  23. 23. Co potřebují lidé s kognitivními poruchami <ul><li>Konzistentní design. </li></ul><ul><li>Mapa webu. </li></ul><ul><li>Text psaný sans-serif fontem se zarovnáním vlevo. </li></ul><ul><li>Výstižné a návodné chybové hlášky. </li></ul><ul><li>Možnost použití jiného barevného schématu. </li></ul>
  24. 24. Proč se zabývat asistivními technologiemi (AT)? <ul><li>Pouhé splnění pravidel některé z metodik nemusí být pro reálnou přístupnost dostačující. </li></ul><ul><li>K českým pravidlům chybí dokumenty s popisem technik a postupů -> odladění konkrétního řešení pomocí AT a dialogem se ZP uživateli je ideální způsob zajištění reálné přístupnosti. </li></ul>
  25. 25. Musím umět ovládat AT? <ul><li>Nutné to není. </li></ul><ul><ul><li>Netriviální obsluha pro běžného uživatele </li></ul></ul><ul><ul><li>Nenasimulujete způsob práce a vnímání webu uživatelem s postižením </li></ul></ul><ul><ul><li>Vysoká pořizovací cena (řádově desítky tisíc Kč), demoverze by se dle licenčních podmínek pro testování oficiálně používat neměly. </li></ul></ul><ul><ul><li>Ideálním řešením je spolupráce s někým, kdo má potřebné znalosti, zkušenosti a odpovídající zázemí. </li></ul></ul>
  26. 26. Musím tedy umět ovládat AT? <ul><li>Je ale dobré vědět, co vše (a jak) umí screen readery či sw lupy zpřístupnit a podle toho stránky tvořit. </li></ul><ul><li>Ve finále je to totiž konkrétní handicapovaný uživatel s konkrétním sw a hw vybavením, kdo bude se stránkou muset za ztížených podmínek pracovat – ne úředník z ministerstva, autor vyhlášky, webu atp. </li></ul>
  27. 27. Mýty kolem bezbariérového webu <ul><li>Vytvoření textové verze stránek je dostačující. </li></ul><ul><li>Vytvořit přístupný web je komplikované a nákladné. </li></ul><ul><li>Přístupnost a atraktivní web design se vylučují. Přístupnost potlačuje kreativitu. </li></ul><ul><li>Návštěvníci webových stránek nemají s přístupností problémy. </li></ul><ul><li>Nevidomí uživatelé nebo uživatelé s jiným typem postižení nepoužívají Internet. </li></ul>
  28. 28. Metodiky přístupnosti <ul><li>Nejznámější metodiky </li></ul><ul><ul><li>WCAG 1.0 a 2.0 </li></ul></ul><ul><ul><li>Blind Friendly Web </li></ul></ul><ul><ul><li>Dogma W4 </li></ul></ul><ul><ul><li>Section 508 </li></ul></ul><ul><ul><li>Pravidla MI z roku 2004 </li></ul></ul><ul><ul><li>Pravidla tvorby přístupného webu z roku 2008 </li></ul></ul>
  29. 29. Metodiky přístupnosti <ul><li>IDEÁLY přístupného webu </li></ul><ul><li>To, že web (plně) nevyhovuje některé metodice, ještě neznamená, že není přístupný, a naopak. </li></ul><ul><li>V mnoha případech také neexistuje jediné správné řešení . </li></ul><ul><li>Výzkum mezi uživateli screenreaderů -> typický uživatel neexistuje. </li></ul>
  30. 30. Co ovlivňuje kvalitu metodiky <ul><li>Datum vydání. </li></ul><ul><li>Čí problémy řeší (méně někdy může být více). </li></ul><ul><li>Soulad s aktuální situací na poli asistivních technologií. </li></ul><ul><li>Konkrétnost požadavků. </li></ul><ul><li>Existence dokumentu s technikami pro řešení konkrétních případů. </li></ul>
  31. 31. WCAG 2.0 <ul><li>Vydán v prosinci 2008. </li></ul><ul><li>Progresivní přístup k věci. Nestanovuje jasnou mez, co je přístupné a co nikoliv, důležitý je aktuální stav prohlížečů a asistivních technologií. </li></ul><ul><li>Pravidla odpovídají aktuálním trendům , řada pravidel z WCAG 1.0 už je dnes naprosto neaktuálních. </li></ul><ul><li>Pravidla jsou flexibilní, přizpůsobivá a nadčasová . </li></ul><ul><li>Měřitelnější výsledky . </li></ul><ul><li>Nezávislost na technologii . </li></ul><ul><li>Orientace na uživatele. </li></ul><ul><li>Základní věci z hlediska přístupnosti se nemění . </li></ul>
  32. 32. Testování přístupnosti <ul><li>ruční kontrola; </li></ul><ul><li>automatická kontrola; </li></ul><ul><li>audit odborníka; </li></ul><ul><li>uživatelský test provedený handicapovanými uživateli. </li></ul>
  33. 33. Kdo může provést test webu? odborník na přístupnost handicapovaný zkušený uživatel X autor webu Každý z nich může přístupnost toho samého webu vyhodnotit různě.
  34. 34. Handicapovaný zkušený uživatel <ul><li>otestuje web na základě svých praktických zkušeností; </li></ul><ul><li>otestuje web pomocí speciálního software a/nebo hardware; </li></ul><ul><li>přidaná hodnota ve formě použitelnosti webu pro handicapované návštěvníky; </li></ul><ul><li>nemusí však postřehnout všechny chyby z hlediska přístupnosti; </li></ul>
  35. 35. Odborník na přístupnost <ul><li>spolehlivě prověří web podle některé z metodik přístupnosti a případně i vlastních praktických zkušeností; </li></ul><ul><li>služby v oblasti přístupnosti v současnosti nabízí hodně subjektů, ne každý musí mít odpovídající znalosti; </li></ul><ul><li>někteří „odborníci“ často hodnotí pouze na základě teoretických znalostí, nemusí mít či nemají praktické zkušenosti s cílovou skupinou; </li></ul>
  36. 36. Autor webu <ul><li>zná svůj web; </li></ul><ul><li>často trpí „ profesionální slepotou“ (potencionální chyby nemusí vidět); </li></ul><ul><li>stává se také, že pravidla přístupnosti špatně interpretuje. Web, vytvořený podle těchto špatně interpretovaných pravidel pak považuje za přístupný, i když tomu tak ve skutečnosti není; </li></ul>
  37. 37. Nástroje pro testování přístupnosti <ul><li>toolbary </li></ul><ul><ul><li>Acce s sibility Toolbar - www.visionaustralia.org.au/ais/toolbar/ </li></ul></ul><ul><ul><li>Web Developer Extension www.czilla.cz/doplnky/rozsireni/web-developer-toolbar/ </li></ul></ul><ul><li>on-line validátory </li></ul><ul><ul><li>Cynthia Says ( www.cynthiasays.com ) </li></ul></ul><ul><ul><li>WAVE ( wave.webaim.org ) </li></ul></ul><ul><li>asistivní technologie </li></ul>
  38. 38. Další zdroje informací <ul><li>www.blindfriendy.cz </li></ul><ul><li>http://zdrojak.root.cz/pristupnost </li></ul><ul><li>http://poslepu.cz </li></ul><ul><li>www.blindfriendy.cz/wcag20 </li></ul><ul><li>www.pravidla-pristupnosti.cz </li></ul><ul><li>www.pravidla-pristupnosti.cz/att/publikace.pdf </li></ul>
  39. 39. PRAKTICKÁ ČÁST - čemu věnovat pozornost v obecné rovině? <ul><li>Nadpisy </li></ul><ul><li>Seznamy, odstavce </li></ul><ul><li>Odkazy </li></ul><ul><li>Grafika (CAPTCHA) </li></ul><ul><li>Barvy </li></ul><ul><li>Tabulky </li></ul><ul><li>Formuláře </li></ul><ul><li>Přístupnost ovládacích prvků webu z klávesnice </li></ul>
  40. 40. Sémantika je základ <ul><li>Správné strukturování stránky výrazně zlepšuje kvalitu poskytovaných informací a efektivitu práce se stránkou. </li></ul><ul><li>POUŽÍVEJTE HTML značky v souladu s jejich určením – screen readery jsou s každou novou verzí dokonalejší a řešení, která byla dříve považovány na vhodné, mohou dnes komplikovat práci. </li></ul><ul><li>Více viz http://poslepu.blogspot.com/2008/02/screen-readery-semantika.html </li></ul>
  41. 41. Nadpisy <ul><li>Z hlediska nevidomých uživatelů je naprosto nezbytné vhodně strukturovat obsah stránek pomocí značek pro nadpisy a dodržovat důležitost a hierarchii nadpisů . </li></ul><ul><li>Hlavní obsah stránky je vhodné vyznačit pomocí nadpisu h1. </li></ul><ul><li>Pro vyznačení nadpisů je nutné používat značky <h1>, .., <h6>, ne vlastní styly či jen značky pro velké/tučné písmo, atp. </li></ul>
  42. 42. Nadpisy - skryté <ul><li>Používáme pro onadpisování těch částí webu (hlavní/ pomocná navigace, atd.), u kterých není z nějakého důvodu možné/ vhodné použít viditelné nadpisy. </li></ul><ul><li>Vhodná technika pro skrývání </li></ul><ul><ul><li>.skryj {position: absolute; top: auto; left: -10000px; height:1px; font-size:1px; overflow: hidden;} </li></ul></ul><ul><ul><li><h2 class=„skryj“>Hlavní navigace</h2> </li></ul></ul><ul><ul><li>http://www.webaccessibility.info/lab/displaytest.html </li></ul></ul><ul><li>Dnes již řeší landmarky z WAI-ARIA </li></ul>
  43. 43. Seznamy <ul><li>Ty části stránek, které jsou ze své podstaty seznamem, je důležité jako položky seznamů vyznačovat (položky navigací, výčty prvků, ...) </li></ul><ul><li>Implementace značky: <ul>, <ol>, <li>, <dl>, <dt>, <dd> </li></ul>
  44. 44. Odstavce <ul><li>Text je vhodné členit do odstavců, které jsou vyznačeny značkou <p>. </li></ul><ul><li>Text odstavců je psán (pokud to charakter sdělení nevylučuje) principem obrácené pyramidy. </li></ul><ul><li>Mezi odstavci jsou dostatečné mezery. </li></ul>
  45. 45. Odkazy <ul><li>Odkazy jsou základ hypertextu . </li></ul><ul><li>Odkazy musí být přístupné a ovladatelné z klávesnice . </li></ul><ul><li>Chyba – odkaz, který nikam nevede </li></ul><ul><li><a href=&quot;#&quot; onmouseover=&quot;dropdownmenu()&quot;>Produkty</a> </li></ul>
  46. 46. Označení odkazu <ul><li>Označení odkazu by mělo dávat smysl i bez okolního kontextu. </li></ul><ul><li>Nevhodné </li></ul><ul><ul><li>Klikněte zde </li></ul></ul><ul><ul><li>Zde </li></ul></ul><ul><ul><li>Více </li></ul></ul><ul><ul><li>Info </li></ul></ul><ul><li>Označení odkazu by mělo být krátké a výstižné. </li></ul><ul><li>Označení odkazu nezačíná nevýznamovým znakem. </li></ul>Jsou situace, kdy nelze jinak, ale pokud je to možné, je vhodné se tomuto způsobu označení odkazů vyvarovat.
  47. 47. Vzhled odkazu <ul><li>Podtrhávat (v hlavním obsahu stránky). </li></ul><ul><li>hover, focus, active </li></ul><ul><li>Příklad: </li></ul><ul><ul><ul><ul><ul><li>a:hover, </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>a:focus, </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>a:active </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>{ b ackground-color:#ffff ff ; c olor:# ff0000 ;} </li></ul></ul></ul></ul></ul><ul><li>Lze použít i vlastnost outline. </li></ul>
  48. 48. Informování o cíli odkazu <ul><li>Ideál – o cíli odkazu informují prohlížeče. </li></ul><ul><li>Skutečnost – tyto informace (a to ještě ne všechny) sdělují pouze screenreadery. </li></ul><ul><li>Příklady: </li></ul><ul><ul><li>odkaz do této stránky, </li></ul></ul><ul><ul><li>odkaz vedoucí mimo web, </li></ul></ul><ul><ul><li>non-HTML obsah, </li></ul></ul><ul><ul><li>odkaz otevírající nové okno prohlížeče, </li></ul></ul><ul><ul><li>jiný dokument v rámci webu, </li></ul></ul><ul><ul><li>poštovní odkaz. </li></ul></ul><ul><ul><li>navštívený odkaz. </li></ul></ul>Musí řešit autor webu.
  49. 49. Odkaz na non-HTML obsah <ul><li>Označení takového odkazu musí obsahovat informaci o typu a velikosti cílového souboru. </li></ul><ul><li>Tuto informaci není vhodné dávat do title (screen-readery neinterpretují) nebo prezentovat formou ikonky, skrytou na pozadí pomocí CSS. </li></ul>
  50. 50. Další typy odkazů <ul><li>Odkazy otevírající nová okna prohlížeče . </li></ul><ul><li>Odkazy vedoucí mimo web . </li></ul><ul><li>Ikonka na pozadí odkazu, skrytá pomocí CSS, nestačí. </li></ul><ul><li>Řešení: </li></ul><ul><li>http://poslepu.blogspot.com/2008/03/externi-odkazy-pristupnost.html </li></ul>
  51. 51. Pomocné navigační menu <ul><li>Na začátek každé stránky je vhodné umístit skryté pomocné navigační menu (odkazy na důležité části stránek – hlavní obsah, navigace, ...). </li></ul><ul><li>Maximálně tři odkazy pro přesun na důležité části. </li></ul><ul><li>.skryj { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } </li></ul><ul><li>Další způsob implementace http://pristupnost.nawebu.cz/weblog/blogpost.php?post=94 </li></ul>
  52. 52. Grafické objekty na stránkách I <ul><li>Grafika není z hlediska přístupnosti špatná. </li></ul><ul><li>Grafika zvyšuje přístupnost – ilustrace, ikony, animace, atp. </li></ul><ul><li>Kromě nevidomých, kteří ji až tak neocení, je prospěšná prakticky všem návštěvníkům. </li></ul>
  53. 53. Grafické objekty na stránkách II <ul><li>Mají tři hlavní účely: </li></ul><ul><li>nesou významovou informaci; </li></ul><ul><li>dekorativní funkci (doplnění sdělované informace bez toho, aniž by přinášely něco nového); </li></ul><ul><li>slouží jako odkazy. </li></ul>
  54. 54. Grafické objekty na stránkách III <ul><li>Nesoucí významovou informaci </li></ul><ul><li>Logo </li></ul><ul><li>Fotografie </li></ul><ul><li>Graf </li></ul><ul><li>Obrázek jako odkaz </li></ul><ul><li>CAPTCHA </li></ul>
  55. 55. Grafické objekty na stránkách IV <ul><li>Nesoucí významovou informaci </li></ul><ul><li>Samostatný obrázek <img src=„“ alt=„relevantní popis obrázku“ /> </li></ul><ul><li>Obrázek s popiskem mimo alt <p><img src=„“ alt=„deskriptivní popis obrázku“ />relevantní popis obrázku</p> </li></ul>
  56. 56. Grafické objekty na stránkách V <ul><li>Dekorativní </li></ul><ul><li>odrážky, čáry, zaoblené rohy, ilustrační fotografie, ... </li></ul><ul><li>Implementace </li></ul><ul><li>v kódu </li></ul><ul><li><img src=„...“ alt=„“ /> </li></ul><ul><li>skrytí na pozadí pomocí CSS </li></ul>
  57. 57. Grafické objekty na stránkách VI <ul><li>Obrázky jako odkazy. </li></ul><ul><li><a href=„“><img src=„“ alt=„ popis cíle odkazu “ /></a> </li></ul><ul><li>Pokud za obrázkem následuje odkaz, vedoucí na stejné místo, je vhodné buď </li></ul><ul><ul><li><a href=„“><img src=„“ alt=„“ /> Text odkazu</a> </li></ul></ul><ul><ul><li>obrázek schovat na pozadí odkazu. </li></ul></ul>
  58. 58. Alternativní popisek u obrázku <ul><li>Učitel na základní škole, vysvětluje rozdíl mezi malbou, kresbou a rytinou. </li></ul><ul><li>Rodinný příslušník tvoří rodokmen. </li></ul><ul><li>Profesor na vysoké škole vysvětluje rozdíl mezi různými typy maleb. </li></ul><ul><li>Historik umění vytváří katalog malířů portrétů. </li></ul>
  59. 59. Alternativní popisek ke grafu
  60. 60. BARVY A KONTRAST I <ul><li>Dostatečný vzájemný kontrast barev (CCA). </li></ul><ul><li>Pozor na vzorky na pozadí -> kontrast může být dostatečný, ale text nemusí být čitelný. </li></ul><ul><li>Nezávislost na nastavení barevného schématu. </li></ul><ul><li>Nezávislost na vnímání barev. </li></ul>
  61. 61. Colour Contrast Analyzer <ul><li>Pro česká pravidla přístupnosti je rozhodující výsledek označený jako &quot;AA&quot;. Pokud se tedy pro Vaši barevnou kombinaci objeví &quot;Vyhovuje (AA)&quot;, je kontrast v pořádku. Pokud se u výsledku objeví zároveň i &quot;Vyhovuje (AAA)&quot;, znamená to, že kontrast je mimořádně dobrý. </li></ul><ul><li>Jako &quot;Algoritmus&quot; je třeba zvolit &quot;Světelnost&quot;. Algoritmus rozdílu barvy a jasu je určen pro starší verze pravidel přístupnosti (např. WCAG 1.0 či původní Pravidla MI ČR). </li></ul>
  62. 62. Běžný uživatel Barvoslepý uživatel
  63. 63.
  64. 64. Nezávislost na vnímání barev IIb
  65. 65.
  66. 66. Barvy a kontrast II <ul><li>Požadavky na dostatečný kontrast se týkají i textové informace, prezentované graficky -> kde to lze, je lepší se tomuto způsobu řešení vyhnout -> horší čitelnost textu při jeho zvětšení. </li></ul>
  67. 67. Písmo <ul><li>Dostatečná výchozí velikost písma. </li></ul><ul><li>Písmo lze zvětšovat i zmenšovat pomocí prostředků prohlížeče. </li></ul><ul><li>Lepší je sans-serif. </li></ul>
  68. 68. Konzistentní navigace <ul><li>Navigace musí být konzistentní a srozumitelná napříč celým webem. </li></ul><ul><li>Navigační mechanismy musí být umístěny stále na stejných (ideálně i obvyklých) místech. </li></ul><ul><li>Navigace musí být přístupná. </li></ul>
  69. 69. Konzistentní navigace <ul><li>Na každé stránce webu obsahuje 5 prvků, které vždy potřebujete mít po ruce </li></ul><ul><ul><li>logo, </li></ul></ul><ul><ul><li>odkaz na titulní stránku, </li></ul></ul><ul><ul><li>sekce, </li></ul></ul><ul><ul><li>vyhledávání, </li></ul></ul><ul><ul><li>pomůcky. </li></ul></ul><ul><li>Výjimkami mohou být titulní stránka a formuláře. </li></ul>
  70. 70. Navigace – kufrový test <ul><li>O jaký server se jedná? (Logo serveru) </li></ul><ul><li>Na jaké jsem stránce? (Název stránky) </li></ul><ul><li>Jaké jsou hlavní sekce tohoto serveru? (Sekce) </li></ul><ul><li>Jaké mám na dané úrovni možnosti? (Lokální navigace) </li></ul><ul><li>Kde se nacházím v hierarchii serveru? (Drobečková navigace) </li></ul><ul><li>Jakým způsobem mohu vyhledávat? </li></ul>
  71. 71. Ovladatelnost webu z klávesnice <ul><li>Důležitá pro velkou skupinu handicapovaných osob (nevidomí, slabozrací, tělesně postižení, ...). </li></ul><ul><li>Všechny ovládací prvky stránky (odkazy, formulářové prvky, ...) musí být dostupné a ovladatelné z klávesnice. </li></ul><ul><li>Dostatečně zvýrazněný prvek, který má focus. </li></ul><ul><li>Klávesové zkratky??? </li></ul>
  72. 72. DALŠÍ TECHNOLOGIE <ul><li>CSS </li></ul><ul><li>Javascript </li></ul><ul><li>Cookies </li></ul><ul><li>Flash </li></ul><ul><li>ActiveX </li></ul><ul><li>Není dobrá a špatná technologie. </li></ul><ul><li>Použití konkrétní technologie nemusí ještě nutně způsobit problém s přístupností, technologii je třeba použít tak, aby si s ní přístupové prostředky na straně klienta poradily. </li></ul>
  73. 73. FORMULÁŘE I <ul><li>Dbát na správné definování vazeb mezi prvky a popisky pomocí značky label a atributů for a id </li></ul><ul><li>Vhodné seskupování prvků pomocí fieldset a legend </li></ul><ul><li>Implementace www.plavacek.net/formulare </li></ul>
  74. 74. TABULKY I <ul><li>Tabulky používat v souladu s určením (křížově závislé informace) </li></ul><ul><ul><li>do každé buňky dávat pouze informace, které spolu logicky souvisí; </li></ul></ul><ul><ul><li>tabulka musí dávat smysl čtena po řádcích; </li></ul></ul><ul><ul><li>th, id, headers, summary </li></ul></ul><ul><li>příklad správného použití www.idos.cz/blind </li></ul><ul><li>Tabulky použité pro layout (nepoužívat) </li></ul>
  75. 75.
  76. 76. A to je vše ;-) <ul><li>Děkuji za pozornost. </li></ul><ul><li>Kontakt: </li></ul><ul><li>Radek Pavlíček </li></ul><ul><li>[email_address] </li></ul><ul><li>www.centrumpronevidome.cz/pavlicek </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×