Přístupnost není charita

Radek PAVLÍČEK, Blind Friendly Web

Smyslem přístupnosti je zmírňovat nebo odstraňovat bariéry na webu tak…

…aby kladl svým uživatelům co nejméně překážek a ti jej mohli bez problémů používat.

Přístupnostv 5 bodech

Dostupnost

Uživatel se musí být schopen k informacím dostat.

Ovladatelnost

Pokud už k nim dostane, musí je být schopen ovládat (příkladem mohou být formulářové prvky).

Srozumitelnost

Uživatel musí rozumět tomu, co se po něm chce.

Orientace

Uživatel se musí být schopen dostat tam, kam potřebuje.

Čas

A toto všechno musí zvládnout v rozumném čase.

Přístupnost pomáhá lidem, kteří špatně vidí…

…mají problémy se sluchem…

…s motorikou či hmatem…

…nebo nejsou schopni porozumět informacím, které prezentujete.

To, že přístupnost pomáhá uživatelům se zdravotním handicapem, je už „známá věc“.

Výhody a nevýhodyzúžení přístupnosti

Zúžení přístupnosti na určitou skupinu osob (například na nevidomé) je dobré kvůli tomu, že web můžeme co nejlépe uzpůsobit jejich potřebám.

Výhody a nevýhodyzúžení přístupnosti

Na druhou stranu toto zúžení přináší poměrně malou cílovou skupinu, kvůli které na ni někteří lidé nahlížejí jako na nezajímavou.

Rád bych Vám v této prezentaci ukázal, jak může přístupnost pomáhat opravdu každému návštěvníkovi vašeho webu.

1 Přesah přístupnosti

Podíváme se společně na 3 věci. Tou první je přesah přístupnosti a skutečnost že, požadavky celé řady uživatelů se překrývají.

2 Komerční aspektypřístupnostiPřístupnost také může pomoci zvýšit zisk nebo snížit náklady.

3 Často i drobná úpravapřináší skvělé výsledky

A v neposlední řadě na to, že i drobnou úpravou můžeme přístupnost výrazně vylepšit.

Přístupností k vyšším ziskům

Můj nevidomý kamarád Michal žije běžným životem jako kdokoliv z nás – má práci, kamarády i spoustu zálib. Jen některé věci musí dělat trochu jinak.

Jednou z nich je nakupování. Pro Michala je mnohem snazší nakoupit na přístupném e-shopu…

…než nakupovat ve velkém nákupním centru.

Michal často nakupoval na vltava.cz. Nejen pro svou potřebu, ale i dárky pro kamarády či příbuzné.

-1 zákazník,pravidelně utrácející několik tisíc korun

Až do doby, kdy vltava.cz při redesignu nemyslela na přístupnost a Michal od té doby nemohl na jejich webu nakupovat.

Letos na jaře si chtěl Michal koupit pobyt v lázních.

Ačkoliv jsem ho přesvědčoval, že na Lednici tu máme jiné, lepší weby… ;-)

…neprošlo mi to a Michal si chtěl opravdu pobyt objednat na tomto webu. To ale kvůli nepřístupně vytvořené navigaci nebylo možné.

nezakoupený pobytv hodnotě dvaceti tisíc korun

Lázně Lednice tak přišly o jednoho potencionálního zákazníka, který byl ochoten u nich utratit asi 20 000 Kč.

Pro Michala mohou být ale užitečné i jiné weby, u kterých na první pohled nemusí jejich přístupnost dávat smysl. Například Sreality.cz (které jsou na tom s přístupností docela dobře)…

…nebo nějaký e-shop s krmivem pro zvířata, na kterém by mohl kupovat krmivo pro svého kocoura.(Upozornění: obrázek je pouze ilustrační).

Zatímco Michala asi neznáte, představovat Davida Grudla jistě není nutné.

David chtěl jednou udělat velmi jednoduchou věc – koupit si přes mobil jízdenku na autobus.

Bohužel se mu to nepodařilo, protože objednávkový systém měl velké problémy s přístupností a použitelností. Vzpomněl si přitom na přednášku Romana Kabelky na Poslední sobotě.

Roman Kabelka je můj nevidomý kolega a programátor, kterého můžete znát i z WebExpa.

Roman na Poslední sobotě prakticky předváděl, jak pracujes PC, na jaké problémy naráží a jak je lze opravit.

Michal

DavidRomanTím se nám kruh uzavírá a od Michala se přes Davida a Romana dostáváme opět k Michalovi.

MichalRomanDavid

Potřeby našich třech pánů se vlastně moc neliší.

Michal = Roman

David

A protože Michal a Roman jsou nevidomí, můžeme na jejich potřeby nahlížet opravdu jako na identické.

Celou situaci nám tedy může nejlépe ilustrovat Michal David. Až ho někde uvidíte, vzpomeňte si na přístupnost ;-)

Případové studieaneb

jak konkrétněpřístupnost pomáhá

Legal & General Group PLC je britská společnost, která měla velké problémy s přístupností webu. Lidé si na nepřístupnost často stěžovali, proto jej společnost nechala zpřístupnit.

Co jim přineslozlepšení

přístupnosti?

Náklady na údržbu webu

-66 %

Návratnost investice

100 % za12 měsíců

Stížnosti nanepřístupný web

0

Sociální sítě

Sociální sítě mohou hodně pomoci, ale i hodně uškodit. A kritika se na nich zpravidla šíří rychleji, než kladné ohlasy. Proto je dobré kritice předcházet.

Pozitivnívnímání

webu/značky

Webpřístupný

i z mobilníchzařízení

Kompletní informace o případové studii Legal & General Group.

Tesco spustilo v roce 2000 svůj nový web, který se velmi obtížně používal lidem s těžkým postižením zraku.

V britském RNIB (Královský Národní Institut Nevidomých) udělali jednoduchou věc – požádali jednu nevidomou paní, aby zkusila na webu nakoupit, a pozvali IT manažera Tesca, aby ji při práci s webem pozoroval.

Po 30 minutách

0položekv košíku

35 000 liberTen byl touto skutečností tak zaskočen, že se okamžitě rozhodl web upravit. Tesco šlo cestou separátní přístupné verze, za kterou zaplatilo 35 000 liber.

Provedené změny

Alty u obrázkůPopisné texty odkazůJednosloupcový layout

Co jim přineslozlepšení

přístupnosti?

Rychlost

Je možné nakoupit 30 položek za 15 minut

Čas

Jen si připomeňme, že čas hraje v přístupnosti důležitou roli.

Zvýšení tržby

o 13 milionů liber ročně

Počet objednávek před Vánocemi na tesco.com

700 000 týdněprůměrná útrata

95 liber

Webpřístupný

i z mobilníchzařízení

Později se Tesco rozhodlo separátní přístupnou verzi zrušit a v souladu s pravidly přístupnosti upravit už primární verzi webu. Kompletní informace o případové studii Tesca.

Klávesové zkratky

Klávesové zkratky v Kalendáři Googlu umožňují jeho ovládání nejen nevidomým uživatelům, ale s jejich pomocí jej může efektivněji používat opravdu každý.

Osnovy

Osnovy ve fulltextovém vyhledávání Seznamu zlepší nejen míru prokliku, ale techniky, vedoucí k jejich vytvoření (nadpisy jako kotvy a odkazy na ně) pomohou i nevidomým či tělesně postiženým uživatelům.

Co dělatpro lepší

přístupnost

Vzít ji za svou

Pokud nezměníme vnímání přístupnosti ve své hlavě, pak nám nepomůže sebelepší metodika, nástroj ani testování.

Ideálně už od začátku projektu

Nejlepší je se věnovat přístupnosti už od začátku tvorby webu a nahlížet ji jako na její nedílnou součást. Chyby se mnohem snáze „vychytávají“ během tvorby webu, do hotového díla už se většinou nikomu moc zasahovat nechce.

Často stačí málo

Často stačí jen malá úprava webu k tomu, aby se jeho přístupnost rapidně zlepšila.

Samozřejmě jsou výjimky – pokud máte podobný web, jako je tento, tak je lepší začít od začátku ;-)

Naopak u tohoto webu, při jehož tvorbě někdo zjevně bral přístupnost v potaz, by stačilo…

…zlepšit kontrast barev v menu a zpřístupnit položky submenui z klávesnice. Což je práce, která moc času nezabere.

Takové to domácí testování.

Však víme… ;-)

Ovladatelnost z klávesnice

Vyzkoušejte si, jak se dá váš web ovládat pouze z klávesnice. Nic speciálního k tomu nepotřebujete. Stačí vám jen klávesnice ;-)

Pokud jste schopni se na všechny „focusovatelné“ prvky dostat a ovládat je pomocí klávesnice, je vše v pořádku.

Nadpisy

Čím je pro čtenáře knihy její obsah, tím je pro uživatele osnova dokumentu, vytvořená z korektně vyznačených nadpisů.

Nadpisy jsou často vyznačeny vizuálně, ale k tomu, aby s nimi dokázali pracovat třeba i nevidomí, je nutné je správně vyznačit i v kódu. Jak přístupně strukturovat webovou stránku pomocí nadpisů.

Osnova dokumentu z nadpisů může vypadat například takto.

To, jak osnova konkrétní webové stránky vypadá, zjistíte například pomocí Web Developer Toolbaru pro prohlížeč Mozilla Firefox.

Navigace

Zorientují se uživatelé na vašem webu? Dostanou se tam, kam potřebují?

Textová alternativa ke grafice

Pokud dáváte na stránky nějakou grafiku, nezapomeňte k ní přiřadit textovou alternativu.

Dostatečný barevný kontrast

Dostatečný barevný kontrast

Mějte barvy na svých webových stránkách dostatečně kontrastní.

To, zda je vzájemný kontrast barev dostatečný, zjistíte například pomocí aplikace Colour Contrast Analyser.

Zapamatujte si

Přístupnost pomáhá všem

Přístupnost pomáhá celé řadě uživatelů – nejen těm se zdravotním handicapem.

Často stačí málo

Často i drobná změna webu (doplnění nadpisů, zlepšení kontrastu či přidání popisků k formulářovým prvkům) výrazně zlepší jeho přístupnost.

Nárůst zisku

Přístupnost může pomoci vydělat peníze či snížit náklady na provoz webu.

Posilování značky

Přístupnost také může pomoci zlepšit obraz firmy v očích veřejnosti a kladné vnímání naší značky.

Máte se kam obrátit ;-)

Další informace o přístupnosti najdete na www.blindfriendly.cz, www.poslepu.cz, www.youtube.com/poslepu či www.twitter.com/radlicek. Nabídku našich služeb na www.blindfriendly.cz/sluzby

Kontaktní informace

pavlicek@blindfriendly.cz@radlicek

Photo credits• http://www.fotopedia.com/items/flickr-415742494• http://kiraturner.files.wordpress.com/2012/01/crowdscene.jpg?w=604• http://www.flickr.com/photos/wolfgangstaudt/2557507105/• http://www.flickr.com/photos/nationaalarchief/4025536029/• http://www.flickr.com/photos/cornelluniversitylibrary/3678984206/• http://www.flickr.com/photos/_sk/4042566406/sizes/o/in/photostream/• http://www.flickr.com/photos/51035702460@N01/19245594/• http://www.pooh.cz/upload/img/1000/trattoria-laura-facebook-faux-pas-2.png• http://lorenc.info/3MA381/tabulatory.htm• http://www.bibri.net/wp-content/uploads/2009/11/Ubuntu-910-obsah1.jpg• http://4.bp.blogspot.com/__1B7eTIn3jM/SoMylQ_RqWI/AAAAAAAAAAw/F8u_jtyp3IA/s400/Learn-Hiraga

na.jpg• http://www.flickr.com/photos/mmahut/3573549193/sizes/l/in/photostream/• http://birlewphotography.com/portfolio.html• http://www.flickr.com/photos/geckoam/2722456231/in/photostream• http://www.flickr.com/photos/unknowndomain/465077900/