Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Testování přístupnosti v soutěži Zlatý erb 2015
Radek PAVLÍČEK,TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web
PROČ PŘÍSTUPNOST
TESTUJEME?
Zákonná povinnost
(Vyhláška o přístupnosti)
Web je oficiálním
komunikačním kanálem
institucí a jako takový musí být
přístupný bez rozdílu všem
uživatelům
Lidé s handicapem musí mít
zajištěný rovnocenný
přístup
k informacím
Přístupný web se snáze
používá i běžným
návštěvníkům
JAK PŘÍSTUPNOST
TESTUJEME?
Týmová práce
Mix heuristického a
uživatelského testování
VÝSLEDKY
0
1
2
3
4
5
Město Bruntál – nominace na cenu za nejlepší
bezbariérový web města
0
1
2
3
4
5
Obec Nučice – nominace na cenu za nejlepší
bezbariérový web obce
BEST PRACTICES
měst a obcí
STRUKTUROVÁNÍ
OBSAHU
Nadpisy
Uživatelé chodí na webové stránky knihoven pro informace a
chtějí je získat co nejrychleji. Základem reálné přístu...
Nadpisy #2
Dobře vytvořenou strukturu nadpisů si můžeme pro
jednoduchost přirovnat k obsahu knihy – podobně, jako z
obsahu...
Příklady řešení
„SKIPTO“ ODKAZY
Přeskakovací odkazy
Ovladatelnost webu z klávesnice je z hlediska
přístupnosti neméně důležitá. Uživatel musí mít
možnost ...
Přeskakovací odkazy
Jednou z funkcionalit, která může práci s webem
pomocí klávesnice usnadnit, jsou tzv. přeskakovací
odk...
Příklady řešení
TEXTOVÉ ALTERNATIVY
GRAFICKÝCH PRVKŮ
Textové alternativy grafických prvků
Grafické prvky jsou dnes důležitou součástí každého
webu. Často je pomocí nich vytvoř...
Příklady řešení
FORMULÁŘE
Formuláře
Tématika správného zpřístupnění formulářů by
vydala na samostatnoou prezentaci, proto se omezím
jen na tři nejdů...
Příklady řešení
RESPONZIVNÍ/MOBILNÍ
VERZE WEBU
Responsivní/mobilní verze webu
Jednou z vhodných cest, jak vytvořit přístupný web,
může být responzivní design. Responzivn...
Responsivní/mobilní verze webu #2
Obecně samozřejmě automaticky neplatí, že
responsivní = přístupný, ale například Mobile ...
Příklady řešení
KDE ZÍSKAT
POTŘEBNÉ
ZNALOSTI
DOPORUČENÍ NA
ZÁVĚR
Přístupnost jako součást zadávací
dokumentace
Přístupnost jako nedílná součást
vývoje webu
Vyberte si dodavatele, který
přístupnost „umí“
Pohlídejte si přístupnost
uživatelsky vkládaného obsahu
Testujte přístupnost
(nebo si ji nechte otestovat)
JDETO!
Radek PAVLÍČEK
pavlicek@blindfriendly.cz
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Testování přístupnosti v soutěží Zlatý erb 2015
Upcoming SlideShare
Loading in …5
×

Testování přístupnosti v soutěží Zlatý erb 2015

450 views

Published on

Prezentace hodnocení přístupnosti v soutěži Zlatý erb 2015 na Setkání vítězů soutěží Zlatý erb CZ a Zlatý erb SK.

ISSS 2015, kongresové centrum Aldis, 13. a 14. dubna 2015.

Published in: Internet
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/XbV6n ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/XbV6n ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Testování přístupnosti v soutěží Zlatý erb 2015

  1. 1. Testování přístupnosti v soutěži Zlatý erb 2015 Radek PAVLÍČEK,TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web
  2. 2. PROČ PŘÍSTUPNOST TESTUJEME?
  3. 3. Zákonná povinnost (Vyhláška o přístupnosti)
  4. 4. Web je oficiálním komunikačním kanálem institucí a jako takový musí být přístupný bez rozdílu všem uživatelům
  5. 5. Lidé s handicapem musí mít zajištěný rovnocenný přístup k informacím
  6. 6. Přístupný web se snáze používá i běžným návštěvníkům
  7. 7. JAK PŘÍSTUPNOST TESTUJEME?
  8. 8. Týmová práce
  9. 9. Mix heuristického a uživatelského testování
  10. 10. VÝSLEDKY
  11. 11. 0 1 2 3 4 5
  12. 12. Město Bruntál – nominace na cenu za nejlepší bezbariérový web města
  13. 13. 0 1 2 3 4 5
  14. 14. Obec Nučice – nominace na cenu za nejlepší bezbariérový web obce
  15. 15. BEST PRACTICES měst a obcí
  16. 16. STRUKTUROVÁNÍ OBSAHU
  17. 17. Nadpisy Uživatelé chodí na webové stránky knihoven pro informace a chtějí je získat co nejrychleji. Základem reálné přístupnosti a použitelnosti pro uživatele se specifickými potřebami je tedy přehledná, konzistentní a kompaktní navigace v rámci stránky i webu.Té můžeme docílit různými způsoby. Jedním z nich je strukturování stránky pomocí nadpisů. Nadpisy slouží uživatelům jako důležité záchytné body pro orientaci a přesun na jednotlivé části stránky. Zatímco pro uživatele, kteří s webem pracují vizuálně, je potřeba nadpisy dostatečně odlišit od okolního textu na vizuální úrovni, pro uživatele screen readerů je potřeba nadpisy vyznačit i na úrovni HTML kódu a použít k tomu odpovídající HTML elementy.
  18. 18. Nadpisy #2 Dobře vytvořenou strukturu nadpisů si můžeme pro jednoduchost přirovnat k obsahu knihy – podobně, jako z obsahu získáme představu o názvech kapitol a můžeme se díky vazbě název kapitoly-číslo stránky rychle v knize přesunout tam, kam potřebujeme, stejnou službu udělá nevidomému uživateli dobře vytvořená struktura nadpisů. Kompletní návod, jak strukturování pomocí nadpisů udělat, najdete v článku Jak přístupně strukturovat webovou stránku pomocí nadpisů na adrese http://poslepu.blogspot.com/2010/01/jak-pristupne- strukturovat-web-pomoci.html
  19. 19. Příklady řešení
  20. 20. „SKIPTO“ ODKAZY
  21. 21. Přeskakovací odkazy Ovladatelnost webu z klávesnice je z hlediska přístupnosti neméně důležitá. Uživatel musí mít možnost se na všechny prvky na stránce, které mohou získat focus (odkazy, formulářové prvky), dostat z klávesnice a také musí mít možnost prvek z klávesnice aktivovat. Pokud ovladatelnost webu z klávesnice není možná, může mít problém se získáváním informací z webu celá řada návštěvníků - nejen nevidomí, ale třeba uživatelé s motorickým postižením horních končetin či ti, kteří nemohou z nějakého důvodu použít myš.
  22. 22. Přeskakovací odkazy Jednou z funkcionalit, která může práci s webem pomocí klávesnice usnadnit, jsou tzv. přeskakovací odkazy. Jejich smyslem je umožnit uživateli, který pracuje s webem pouze pomocí klávesnice, snadný přesun na konkrétní části stránky (typicky na navigaci či hlavní obsah). Přeskakovací odkazy nejsou přínosné jen pro nevidomé uživatele a mají přínos pro každého uživatele, který ovládá web výhradně z klávesnice.
  23. 23. Příklady řešení
  24. 24. TEXTOVÉ ALTERNATIVY GRAFICKÝCH PRVKŮ
  25. 25. Textové alternativy grafických prvků Grafické prvky jsou dnes důležitou součástí každého webu. Často je pomocí nich vytvořeno menu či jsou pomocí grafiky prezentovány jiné důležité informace. Proto je potřeba, abychom se při jejich používání vyvarovali chyb, které by mohly zamezit získání takto publikovaných informací uživatelům, kteří nejsou schopni vizuálně vnímat grafické prvky. Jednoduchá rada proto zní - veškeré grafické prvky na stránkách, které nesou informaci, musí mít definovánu relevantní textovou alternativu.
  26. 26. Příklady řešení
  27. 27. FORMULÁŘE
  28. 28. Formuláře Tématika správného zpřístupnění formulářů by vydala na samostatnoou prezentaci, proto se omezím jen na tři nejdůležitější informace. Každý formulářový prvek musí mít na úrovni kódu přiřazen svůj popisek, z nějž musí být zřejmé, o jaký prvek se jedná a co se při interakci s ním od uživatele očekává. Formulářové prvky také musí být bez obtíží přístupné a ovladatelné z klávesnice a v neposlední řadě musí být uživatelé v případě chybových stavů o nich informováni přístupnou formou.
  29. 29. Příklady řešení
  30. 30. RESPONZIVNÍ/MOBILNÍ VERZE WEBU
  31. 31. Responsivní/mobilní verze webu Jednou z vhodných cest, jak vytvořit přístupný web, může být responzivní design. Responzivní znamená, že se vzhled stránek bude přizpůsobovat zařízení, na kterém budou zobrazeny a uživateli se tak budou lépe ovládat na mobilním telefonu či tabletu. U neresponzivních webů bývá na mobilních zařízeních často problém s velikostí písma, které je ve výchozí podobě příliš malé; problém také bývá trefit prstem malé aktivní prvky webu, jako například odkazy nebo formulářové prvky; uživatel bývá zahlcen množstvím informací, atp.
  32. 32. Responsivní/mobilní verze webu #2 Obecně samozřejmě automaticky neplatí, že responsivní = přístupný, ale například Mobile first přístup zajistí minimálně to, že se autor webu zamyslí nad prioritou informací a web nebude přehlcen vším možným. Protože právě orientace ve velkém množství informací a efektivní a rychlý přístup k tomu, co uživatelé na webu potřebují a hledají, je dnes z hlediska přístupnosti naprosto klíčový.
  33. 33. Příklady řešení
  34. 34. KDE ZÍSKAT POTŘEBNÉ ZNALOSTI
  35. 35. DOPORUČENÍ NA ZÁVĚR
  36. 36. Přístupnost jako součást zadávací dokumentace
  37. 37. Přístupnost jako nedílná součást vývoje webu
  38. 38. Vyberte si dodavatele, který přístupnost „umí“
  39. 39. Pohlídejte si přístupnost uživatelsky vkládaného obsahu
  40. 40. Testujte přístupnost (nebo si ji nechte otestovat)
  41. 41. JDETO! Radek PAVLÍČEK pavlicek@blindfriendly.cz

×