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

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

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

Aktuální trendy v přístupnosti

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

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

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

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

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

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

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.

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

Studie webů automobilek

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

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

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

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

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

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

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

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

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

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

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

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

Optimalizace pro vyhledavače a přístupnost webu

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

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

Studie webů bank v ČR prosinec 2005

Testování mobilní navigace NACESTY

DAN EST FIN FRA IR NEM NIZ POR RAK RUM SLO SWE VB CZ 0% 0% 0% 50% 0% 0% 0% 0% 0% 0% 0% 0% 100% 0%

Testování aplikace pro správu hesel KeePassX

Helpdesk Univerzity Pardubice Návod pro uživatele

MODERNÍ WEB SNADNO A RYCHLE

Výsledky testování katalogu Evergreen

Moderní techniky vývoje webových aplikací

Naše Město Web design

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

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

MAPA PARKOVÁNÍ A BEZBARIÉROVÉHO PŘÍSTUPU IMPLEMENTOVANÁ DO MOBILNÍHO MAPOVÉHO KLIENTA SPINBOX

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

Informace k e-learningu

:16. Datum: Zpracoval: Ing. Richard Ruibar

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

T T. Think Together Petr Benda, Václav Lohr, Martin Havránek THINK TOGETHER

Projekt: Internetové stránky obce Modletice

Podpora výuky tvorby bezbariérového webu

Prezentace navrhované struktury internetových stránek

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

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

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM

Produkty a přehled služeb

Pravidla dobrého školního webu v soutěži scool web 2015

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

Navigace na webových stránkách

BENCHMARKING VENKOVA. Uživatelská příručka nástroje ehomer.cz. Verze dokumentu: 1.1

ové kampaně Byznys CRM s.r.o.

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

Pryč jsou ty doby, kdy bylo nutné kvůli každé malé úpravě webových stránek shánět odborníka, který

Moderní úřad v éře Smart Cities

Rovný přístup. Knihovna přátelská k seniorům. Praha, Zlata Houšková

PŘÍPADOVÁ STUDIE. Intranet Skupiny ČEZ. Nový intranet pro interní komunikaci 20 tisíc uživatelů

Administrační rozhraní Drupalu

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

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

Údržbové prostředí Rebeca44

DATA ARTICLE. AiP Beroun s.r.o.

Základy WWW publikování

Analýza webových stránek metodikou WebRating

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

Základní škola a Mateřská škola Mladá Boleslav, Jilemnického 1152, příspěvková organizace

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

Webová stránka. Matěj Klenka

Návod k ovládání aplikace

Redakční systémy 1. pro správu obsahu

Karel Punčoch Jan Sequens. Moderní trendy webdesignu

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

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

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

Nová verze mojepco pro mobily

Soutěž na návrh modernizace vizuální podoby internetových stránek Univerzity Jana Evangelisty Purkyně v Ústí nad Labem

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

MAPA OBCHODU A SLUŽEB IMPLEMENTOVANÁ DO MOBILNÍHO MAPOVÉHO KLIENTA SPINBOX ÚŘAD MĚSTSKÉ ČÁSTI PRAHA 2, NÁMĚSTÍ MÍRU 600/20, , PRAHA 2

Zadání grafického designu Trh poptávek

Microsoft PowerPoint 2007

Zpráva o zhotoveném plnění

Název: Design webu Anotace:

Služby Microsoft Office 365

ArcGIS Online Subscription

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

Microsoft Office Word 2003

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

Internetové služby isenzor

ZŠ a MŠ, Brno, Horníkova 1 - Školní vzdělávací program

Základní škola a Mateřská škola Mladá Boleslav, Jilemnického 1152, příspěvková organizace

Vytvoření portálu odboru strukturálních fondů Ministerstva vnitra a zajištění jeho hostingu na serveru dodavatele

Soutěž Zlatý erb krajská kola Metodika práce poroty

KIV/PIA 2012 Ing. Jan Tichava

Měření nativních mobilních aplikací v rámci NetMonitoru

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

Transkript:

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

5 4 3 2 1 0

Město Bruntál nominace na cenu za nejlepší bezbariérový web města

5 4 3 2 1 0

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

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

Příklady řešení

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

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.

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

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

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

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

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)

JDE TO! Radek PAVLÍČEK pavlicek@blindfriendly.cz