Tvorba přístupného webu
Upcoming SlideShare
Loading in...5
×
 

Tvorba přístupného webu

on

  • 1,632 views

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

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

Statistics

Views

Total Views
1,632
Views on SlideShare
1,630
Embed Views
2

Actions

Likes
2
Downloads
9
Comments
1

2 Embeds 2

https://twitter.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tvorba přístupného webu Tvorba přístupného webu Presentation Transcript

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