Přístupnost webů knihoven příklady dobré a špatné praxe. Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web



Podobné dokumenty
Testování přístupnosti v soutěži Zlatý erb Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web

Aktuální trendy v přístupnosti

Metodické doporučení ke zlepšení technické přístupnosti IS/STAG

Přístupnost webových stránek- projekt Blind Friendly Web

INSPO Karel Břinda centrum TEREZA, FJFI ČVUT v Praze. Lukáš Marvan Seznam.cz, a.s.

WCAG 2.0 prakticky aneb Jak zlepšit přístupnost webových stránek

Webová grafika, struktura webu a navigace, použitelnost a přístupnost

Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Návrh webové prezentace. Internetové publikování

Studie webů automobilek

Tvoříme PŘÍSTUPNÉ STRÁNKY. webové. Připraveno s ohledem na novelu Zákona č. 365/2000 Sb., o informačních systémech veřejné správy.

Celostátní kolo Česká republika. Celostátní kolo , Hradec Králové. Sponzoři. Setkání finalistů. Jan Savický, Sdružení Zlatý erb

ISSS/LORIS/V4DIS 2009 Registrační formulář a informace o konferenčním příspěvku

ZPRÁVA O HODNOCENÍ PŘÍSTUPNOSTI WEBOVÉ PREZENTACE MĚSTA XXXXXXXX

Nejčastější mýty a omyly v oblasti přístupnosti

Testování uživatelského rozhraní internetové stránky společnosti České dráhy (cd.cz) A4B39TUR A2 Kateřina Cízlová

Techniky a nástroje pro optimalizaci webových stránek

Výsledky testování katalogu Evergreen

Připravovaná legislativa pro přístupnost informací a dokumentů. Michal Rada Ministerstvo vnitra

WEB KNIHOVNY JAKO NÁSTROJ K PROPAGACI SLUŽEB A INFORMACÍ ING. PAVEL CIMBÁLNÍK

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

WEB TOP Weby o rok starší Dana Bérová

Child selektory. Adjacent sibling selektory. Pseudoelementy. Atributové selektory. Tabulky. Obtékané elementy. »!!!

Testování aplikace pro správu hesel KeePassX

Dobré UX jako nejlepší marketingový nástroj mobilních aplikací. Vladimír Korbel

Základní práce v souborovém manažeru

Vítejte na Zemi... multimediální ročenka životního prostředí

Existuje celá řada volně dostupných nástrojů, které jsou pro účel projektu vhodné, např.

MODERNÍ WEB SNADNO A RYCHLE

WCAG 2.1 CS nová pravidla. Dodatek ke WCAG 2.0. Pracovní, orientační překlad.

Tvorba obsahu (Copywriting)

KNIHOVNICKÁ DÍLNA 2014 WEBY ČESKÝCH KNIHOVEN. Ing. Pavel Cimbálník

Integrovaný informační portál MPSV a ČSSZ. Rostislav Čevela, Libuše Čeledová

================================================================================ =====

Helpdesk Univerzity Pardubice Návod pro uživatele

Navigace na webových stránkách

Nová verze mojepco pro mobily

Vzduchotechnické jednotky. Systemair Access. Snadný přístup k pokročilým technologiím

Město Studénka Městský úřad Studénka

Testování mobilní navigace NACESTY

Vzdělávací obsah vyučovacího předmětu

Mobilní zpravodajská aplikace idnes. A7B39PDA - Principy tvorby mobilních aplikací

Podpora výuky tvorby bezbariérového webu

14. května 2012, Brno

Návrh uživatelských rozhraní NOV-WEB. Jakub Bartoš, Pavel Dvořák, Jakub Motyčka, Kamil Procházka

Nabídka na vytvoření nových webových stránek. Vypracoval: Zbyšek Nádeník

Zpráva z nástroje "Metodika metaevaluačních kritérií" Školy Škola čar a kouzel v Bradavicích, Bradavice

Informace k e-learningu

Moderní techniky vývoje webových aplikací

Příloha: SEO analýza webové stránky

Naše Město Web design

Program. Aktualizace fakultního webu. Hlavní změny. Jednotná navigace. Školení správců webových stránek

Kontrola přístupnosti www stránek

Internetový obchod Mironet

Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5

TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ

Analýza webových stránek metodikou WebRating

Webové stránky knihoven. Porada profesionálních knihoven , Knihovna města Ostravy

Návrh uživatelského rozhraní webové aplikace

Nástrojová lišta v editačním poli

Produkty a přehled služeb

Název: Design webu Anotace:

20 let Bibliowebu. Jak na tom jsme? Ing. Jan Kaňka Krajská knihovna Františka Bartoše ve Zlíně

Testování webové stránky Alza.cz

Karel Punčoch Jan Sequens. Moderní trendy webdesignu

CS Jednotná v rozmanitosti CS A8-0188/352. Pozměňovací návrh. Thomas Händel za Výbor pro zaměstnanost a sociální věci

Semestrální práce TUR A3

Webové stránky. 1. Publikování na internetu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

ArcGIS Online Subscription

Czech Nature Photo Návod

Testování aplikace Facebook Messenger pro Windows Phone 8.1

Přístupnost. aby WWW stránky mohla zobrazovat co nejš irš í paleta programů a zařízení myslet na speciální požadavky

Internetové služby isenzor

VNÍMÁNÍ A UŽÍVÁNÍ ARCHITEKTONICKÉHO PROSTORU OSOBAMI S HANDICAPEM

Pro správné zobrazení mapové aplikace je potřeba mít nainstalovaný zásuvný modul Flash Adobe Player.

Testování webového rozhraní obchodu Czech Computer Semestrální práce z předmětu Testování uživatelského rozhraní (A7B39TUR)

Odpadové hospodářství v ORP Ústí nad Labem

Testování uživatelského rozhraní kalkulačky CASIO fx-991es PLUS A4B39TUR 2014/2015 Jiří Pauer

DOSTUPNÝ. SNADNÝ. ONLINE NÁVOD JE TO JEDNODUCHÉ, ZAČNĚTE UŽ DNES!

Administrační rozhraní Drupalu

Údržbové prostředí Rebeca44

Základy WWW publikování

Řekni, co jíš, a Máša ti řekne, co jsi za člověka

Projekt SEPIe - Datový sklad a analytická nadstavba MIS - manažerský informační systém pro vedoucí zaměstnance resortu MV (konference)

INSTALACE SOFTWARE A AKTIVACE PRODUKTU NÁVOD

KIV/PIA 2012 Ing. Jan Tichava

Prezentace navrhované struktury internetových stránek

Webová aplikace rezervační systém. Semestrální úloha předmětu A7B38TUR Testování uživateských rozhraní

Jak vkládat dokumenty do redakčního systému tak, aby byly přístupné

Prezentace projektu do systému vzdělávání zaměstnanců a spolupracovníků knihoven

CESTA K PŘÍSTUPNÉMU INFORMAČNÍMU SYSTÉMU V NEZISKOVÉ ORGANIZACI OZP AKADEMIE Z. Ú.

Podrobný návod pro administraci zákaznických účtů na portálu Czechiatour.eu

Testování operačního systému Windows Phone 8

Projekt Ředitel MOODLE PŘÍRUČKA

Testování uživatelského rozhraní mobilního telefonu HTC Hero (Semestrální projekt pro předmět A7B36TUR)

METODIKA KATEGORIZACE PŘÍSTUPNOSTI OBJEKTŮ

5P PODOB PRÁCE MĚSTSKÉHO ARCHITEKTA ZA ROK

PŘES BARIÉRY. Muzeum a návštěvníci se speciálními potřebami 2013 Návštěvníci s pohybovým postižením. 1. října 2013, ČMH Ing.

Pro koho děláme web. Adam Fendrych, Dobrý web

Manuál korporátní identity Anna Čaníková

Transkript:

Přístupnost webů knihoven příklady dobré a špatné praxe Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web

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 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á).

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šel, musí být schopen zvládnout udělat v nějakém rozumném čase.

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.

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ím, kteří mají problémy s chůzi a používají například hůl nebo berle.

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) otestovat. Naše testování je mixem heuristického (tzn. testování podle vybraných pravidel přístupnosti) a uživatelského testování.

Uživatelské testování Heuristické testování

Poplatek Nenalezeno Nalezeno Nalezeno Nenalezeno

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.

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 NA VĚ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 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.

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-pristupnestrukturovat-web-pomoci.html

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í.

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í).

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 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š.

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.

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ší 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.

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 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.

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ý.

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)

JDE TO! 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.