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.
Přístupnost webů knihoven – příklady
dobré a špatné praxe
Radek PAVLÍČEK,TyfloCentrum Brno, o. p. s., projekt Blind Friend...
Máte rádi CAPTCHA?
Líbila by se vám takto
prezentovaná stránka
vaší knihovny?
Pokud jste na obě
otázky odpověděli ne,
pak si prohlížíte
správnou prezentaci 
Co je to přístupnost?
Za přístupný web lze dnes považovat
takový web, který bude návštěvník
schopen
 i přes své specifické potřeby,
 za pomoci...
PĚT PILÍŘŮ
PŘÍSTUPNOSTI
Dostupnost
Ovladatelnost
Srozumitelnost
Orientace
Čas
Na přístupný web se musí být
uživatel schopen dostat, musí
jej být schopen ovládat, musí
mu rozumět a to, proč na web
přiš...
Dostupnost: uživatel se k informacím musí
být schopen dostat,
Ovladatelnost: pokud už k nim dostane, musí
je být schopen o...
PŘÍSTUPNOST JE
DŮLEŽITÁ PRO
UŽIVATELE
Nejen pro ty se
zdravotním
postižením.
Záběr přístupnosti je
dnes mnohem širší,
než se může na první
pohled zdát.
Například v této bezbariérové
tramvaji se lépe cestuje nejen
vozíčkářům, ale třeba i
maminkám s kočárky nebo
těm cestující...
V soutěži Biblioweb už
řadu let testujeme weby
knihoven na přístupnost.
Čím je pro nás tato soutěž
charakteristická?
Hodně webů
Málo času
Weby různé úrovně
Do soutěže se každoročně hlásí
několik desítek webů různé
úrovně, které musíme v relativně
krátké době (přibližně 3 týdny)...
Uživatelské
testování
Heuristické
testování
Nalezeno
Nenalezeno
Poplatek
Nalezeno
Nenalezeno
Uživatelské testování odhalí bariéry i
oblastech, kde zpravidla
provozovatelé webů žádný problém
neočekávají. Stává se pra...
DRTIVÁVĚTŠINA
KNIHOVEN SVÉ WEBY PO
STRÁNCE PŘÍSTUPNOSTI
NEVYLEPŠUJE 
DŮVODY
CHYBĚJÍCÍ
ODBORNÉ
ZNALOSTI
FINANCE
CORPORATE IDENTITY,
MANAŽERSKÉ
ROZHODNUTÍ
NEZÁJEM
JINÝ POHLED NAVĚC
Ke zlepšení přístupnosti není
hned třeba předělávat celý
web – často i malá úprava
může přístupnost webu
výrazně zlepšit.
STRUKTUROVÁNÍ
OBSAHU
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...
Dobře vytvořenou strukturu nadpisů si můžeme pro
jednoduchost přirovnat k obsahu knihy – podobně,
jako z obsahu získáme př...
Pokud na webu žádné nadpisy
na úrovní kódu vyznačeny
nejsou, uživatel screen readeru
nemá prakticky žádnou
možnost, jak se...
Pochopení struktury stránky
pomáhá i vhodná hierarchie
nadpisů.V případě, kdy jsou
všechny nadpisy vyznačeny
jako nadpisy ...
Následující dva příklady ukazují
vhodné řešení strukturování
obsahu stránky pomocí
nadpisů.
OVLADATELNOST
Z KLÁVESNICE
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 ...
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 preze...
FORMULÁŘE
Tématika správného zpřístupnění formulářů by
vydala na samostatnou prezentaci, proto se
omezím jen na tři nejdůležitější i...
RESPONZIVNÍ/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...
Obecně samozřejmě automaticky neplatí, že
responsivní = přístupný, ale například Mobile
first přístup zajistí minimálně to...
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
Pokud se vám prezentace líbila, podívejte se na ni „naživo“ na
https://you...
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
Upcoming SlideShare
Loading in …5
×

Přístupnost webů knihoven - příklady dobré a špatné praxe

1,161 views

Published on

I knihovnám může přístupnost přinést celou řadu výhod - snížit provozní náklady, zvýšit počet návštěvníků či zlepšit pozitivní nahlížení veřejnosti na knihovnu jako takovou. Seznámím vás s tím, jak testujeme přístupnost v soutěži Biblioweb, na jaké problémy na webech knihoven nejčastěji narážíme, a jak je možné tyto bariéry odstranit. Dozvíte se, jak i malou změnou na webové stránce lze výrazně zlepšit její přístupnost a získat tak výhody, které přístupnost přináší.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Přístupnost webů knihoven - příklady dobré a špatné praxe

  1. 1. Přístupnost webů knihoven – příklady dobré a špatné praxe Radek PAVLÍČEK,TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web
  2. 2. Máte rádi CAPTCHA?
  3. 3. Líbila by se vám takto prezentovaná stránka vaší knihovny?
  4. 4. Pokud jste na obě otázky odpověděli ne, pak si prohlížíte správnou prezentaci 
  5. 5. Co je to přístupnost?
  6. 6. Za přístupný web lze dnes považovat takový web, který bude návštěvník schopen  i přes své specifické potřeby,  za pomoci prostředků, které má k dispozici,  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á).
  7. 7. PĚT PILÍŘŮ PŘÍSTUPNOSTI
  8. 8. Dostupnost
  9. 9. Ovladatelnost
  10. 10. Srozumitelnost
  11. 11. Orientace
  12. 12. Čas
  13. 13. Na přístupný web se musí být uživatel schopen dostat, musí jej být schopen ovládat, musí mu rozumět a to, proč na web přišel, musí být schopen zvládnout udělat v nějakém rozumném čase.
  14. 14. Dostupnost: uživatel se k informacím musí být schopen dostat, Ovladatelnost: pokud už k nim dostane, musí je být schopen ovládat (příkladem mohou být formulářové prvky), Srozumitelnost: musí rozumět tomu, co se po něm chce, Orientace: musí být schopen se dostat tam, kam potřebuje (například na další stránku), Čas: a toto všechno musí zvládnout v rozumném čase.
  15. 15. PŘÍSTUPNOST JE DŮLEŽITÁ PRO UŽIVATELE
  16. 16. Nejen pro ty se zdravotním postižením.
  17. 17. Záběr přístupnosti je dnes mnohem širší, než se může na první pohled zdát.
  18. 18. Například v této bezbariérové tramvaji se lépe cestuje nejen vozíčkářům, ale třeba i maminkám s kočárky nebo těm cestujícím, kteří mají problémy s chůzi a používají například hůl nebo berle.
  19. 19. V soutěži Biblioweb už řadu let testujeme weby knihoven na přístupnost. Čím je pro nás tato soutěž charakteristická?
  20. 20. Hodně webů
  21. 21. Málo času
  22. 22. Weby různé úrovně
  23. 23. Do soutěže se každoročně hlásí několik desítek webů různé úrovně, které musíme v relativně krátké době (přibližně 3 týdny) otestovat. Naše testování je mixem heuristického (tzn. testování podle vybraných pravidel přístupnosti) a uživatelského testování.
  24. 24. Uživatelské testování Heuristické testování
  25. 25. Nalezeno Nenalezeno Poplatek Nalezeno Nenalezeno
  26. 26. Uživatelské testování odhalí bariéry i oblastech, kde zpravidla provozovatelé webů žádný problém neočekávají. Stává se pravidlem, že na přibližně čtvrtině soutěžní webů nejsou testeři schopni najít tak zásadní informaci, jako je výše čtenářského poplatku pro daný rok.
  27. 27. DRTIVÁVĚTŠINA KNIHOVEN SVÉ WEBY PO STRÁNCE PŘÍSTUPNOSTI NEVYLEPŠUJE 
  28. 28. DŮVODY
  29. 29. CHYBĚJÍCÍ ODBORNÉ ZNALOSTI
  30. 30. FINANCE
  31. 31. CORPORATE IDENTITY, MANAŽERSKÉ ROZHODNUTÍ
  32. 32. NEZÁJEM
  33. 33. JINÝ POHLED NAVĚC
  34. 34. Ke zlepšení přístupnosti není hned třeba předělávat celý web – často i malá úprava může přístupnost webu výrazně zlepšit.
  35. 35. STRUKTUROVÁNÍ OBSAHU
  36. 36. 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.
  37. 37. 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
  38. 38. Pokud na webu žádné nadpisy na úrovní kódu vyznačeny nejsou, uživatel screen readeru nemá prakticky žádnou možnost, jak se s obsahem webu efektivně seznámit a rychle se přesouvat na ty části stránky, které jej zajímají.
  39. 39. Pochopení struktury stránky pomáhá i vhodná hierarchie nadpisů.V případě, kdy jsou všechny nadpisy vyznačeny jako nadpisy třetí úrovně, nemá uživatel šanci poznat, který z nadpisů má vyšší prioritu (a zde ani třeba to, na kterém webu se nachází).
  40. 40. Následující dva příklady ukazují vhodné řešení strukturování obsahu stránky pomocí nadpisů.
  41. 41. OVLADATELNOST Z KLÁVESNICE
  42. 42. 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š.
  43. 43. TEXTOVÉ ALTERNATIVY GRAFICKÝCH PRVKŮ
  44. 44. 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.
  45. 45. FORMULÁŘE
  46. 46. Tématika správného zpřístupnění formulářů by vydala na samostatnou 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.
  47. 47. RESPONZIVNÍ/MOBILNÍ VERZE WEBU
  48. 48. 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.
  49. 49. 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ý.
  50. 50. KDE ZÍSKAT POTŘEBNÉ ZNALOSTI
  51. 51. DOPORUČENÍ NA ZÁVĚR
  52. 52. Přístupnost jako součást zadávací dokumentace
  53. 53. Přístupnost jako nedílná součást vývoje webu
  54. 54. Vyberte si dodavatele, který přístupnost „umí“
  55. 55. Pohlídejte si přístupnost uživatelsky vkládaného obsahu
  56. 56. Testujte přístupnost (nebo si ji nechte otestovat)
  57. 57. JDETO! Radek PAVLÍČEK pavlicek@blindfriendly.cz Pokud se vám prezentace líbila, podívejte se na ni „naživo“ na https://youtu.be/iFTH8X5Qpq4.

×