Archiv štítku: Seznam.cz

Přístupnost a inkluzivní design na WebExpo 2017

Akce a přednášky, Přístupnost webu, Průzkumy, , , , , , , ,

Když jsem se v roce 2014 loučil v článku Jaké bylo WebExpo 2014 pohledem speakera a vystavovatele větou Za rok na WebExpu zase ahoj, tak jsem ještě netušil, že ten rok bude trvat „trochu“ déle. Po dvouleté, zdravotními obtížemi vynucené pauze, jsem se na WebExpo vydal až letos. A stejně jako na všech předchozích ročnících, kterých jsem se zúčastnil, i letos jsem nabídl do programu příspěvek, související s přístupností a inkluzivním designem.

A ani tentokrát jsem na to nebyl sám. Společně s Martinem Míchálkem ze Vzhůru dolů jsme připravili čtyřicetiminutový blok, věnovaný právě této tématice. Martinovi bych rád při této příležitosti moc poděkoval za skvělou spolupráci i za to, že se této tématice v rámci svých aktivit věnuje.

O čem to bylo?

Já svou část pojal spíše motivačně (co si budeme nalhávat, přístupnost i přes veškerou snahu a osvětu stále pro mnoho lidí není atraktivní téma) a na konkrétních příkladech velkých webů jsem se snažil ukázat, že přístupnost je pro ně aktrativní, provozovatele po finanční stránce nezruinuje a dává smysl se jí věnovat, protože přístupný web se lépe používá nejen uživatelům se zdravotním postižením.

Poděkování za spolupráci a poskytnutí informací, bez kterých by moje přednáška nemohla vzniknout, míří tvůrcům či provozovatelům následujících webů: cd.cz, irozhlas.cz, Monster.com, muni.cz, Seznam.cz a volby.cz.

Martin svou přednášku zacílil primárně na kodéry. Ukázal jim několik správně nakódovaných návrhových vzorů – strukturování stránky, tlačítka, schovávání obsahu, klávesnice či našeptávač a také to, jak přístupnost webu testovat.

Aktualizace 5. 10. 2017 – videa z WebExpo 2017 už jsou venku, najdete je pod odkazy/nadpisy níže.

Jak a proč řeší velké weby přístupnost

Anotace přednášky

Přístupnost se stále více začíná dostávat do popředí zájmu i provozovatelů a tvůrců velkých webů. Co je k tomu vede? Potřeby a zpětná vazba uživatelů? Altruismus? Připravovaná evropská legislativa? Nebo všechno dohromady? Na konkrétních příkladech (irozhlas.cz, volby.cz a některých dalších) si ukážeme, jak při zpřístupnění velkých webů postupovat, na co si dát pozor a na co naopak nezapomenout.

Komentované slajdy

Jak a proč řeší velké weby přístupnost od Radka Pavlíčka

Přístupnost v kódu: ukázky a návrhové vzory

Anotace přednášky

Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?

Komentované slajdy

WebExpo 2017 – Přístupnost v kódu: ukázky a návrhové vzory od Martina Michálka

Co nás potěšilo

Velký zájem účastníků o tuto tématiku

Pozitivní zpětná vazba

Děkujeme!

Nebyli jsme na to sami 🙂

Na WebExpo jsme nebyli jediní, kdo se tématikou přístupnosti zabýval. Ať už nechtěně – jako třeba Honza Řezáč…

…nebo cíleně – například Emanuela Damiani.

Poděkování závěrem

Kromě Martina a „mých“ respondentů si poděkování určitě zaslouží Šárka Štrossová nejen za poskytnutí prostoru v programu této tématice a Pavlína Louženská za skvělé moderování programu v Divadle ABC.

Tak zase někdy příště ahoj. A ještě jednou děkujeme za zájem 🙂

Testování přístupnosti v soutěži Mobilní aplikace roku 2015

Akce a přednášky,

Mobilní aplikace roku 2015Pokud dnes potkáme na ulici nevidomého člověka, používajícího mobilní telefon, považujeme to za stejnou samozřejmost jako to, že jde s bílou holí či vodicím psem. Nebylo tomu tak ale vždy. Samostatně ovládat mobilní telefon či jiné mobilní zařízení bylo dlouhá léta pro nevidomé uživatele tabu. Například ještě přibližně před deseti lety si nevidomí lidé mohli samostatně napsat či přečíst SMS pouze tak, že si propojili mobilní telefon s počítačem, potřebná data si stáhli do PC a pomocí screenreaderu v počítači si SMS přečetli či napsali. Což bylo zdlouhavé, nepohodlné a uživatel také nemohl reagovat na zprávu okamžitě, ale musel počkat, až se dostane k počítači.

K čemu může sloužit nevidomému uživateli mobilní zařízení?

Mobilní zařízení dnes může být pro uživatele se zdravotním postižením naprosto neocenitelným pomocníkem. Umožňuje mu samostatně vykonávat v terénu činnosti, které ještě před pár lety mohl dělat jen s pomocí jiné osoby či na stolním počítači. Jeho základní funkce – telefonování a psaní SMS zpráv – je už dnes u řady uživatelů potlačena a do popředí se dostává používání mobilního zařízení jako prostředku pro získávání informací. Nevidomý uživatel si může pomocí mobilního telefonu spravovat elektronickou poštu či svůj bankovní účet, vyhledávat informace na webu, může mu posloužit jako čtečka elektronických knih, může přes něj nakupovat, vyhledávat v jízdních řádech či získávat informace z nádražních informačních tabulí.

K tomu, aby tato skupina uživatelů mohla bezezbytku využívat možnosti, které dnešní mobily a tablety nabízí, je ale třeba, aby mobilní zařízení a aplikace v nich byly přístupné. To znamená, aby bylo možné s nimi pracovat bez zrakové kontroly pouze pomocí hlasového nebo hmatového výstupu.

Jak jsme testovali

Jsme proto velmi rádi, že se nám podařilo s organizátory soutěže Mobilní aplikace roku domluvit na tom, že letos po prvé bude v této soutěži hodnocena i přístupnost a jedné z aplikací následně udělíme speciální ocenění Nejpřístupnější aplikace.

Vlastní testování aplikací proběhlo formou expertního a uživatelského testování – tedy praktického vyzkoušení funkčnosti a ovládání aplikace na telefonu s aktivním odečítačem obrazovky. Přístupnost jsme testovali na platformách iOS (odečítač obrazovky Voice Over) a Android (odečítač obrazovky Talk Back). Hodnocená kritéria byla inspirována pravidly pro tvorbu uživatelských rozhraní, v nichž je přístupnost zmiňována, a vycházela i z principů pravidel přístupnosti WCAG 2.0 či Mobile Accessibility Guidelines od BBC.

Zvolená kritéria vypadala následovně a v obecné rovině měla následující výsledky.

1. Čitelnost obsahu

Veškerý prezentovaný obsah by měl být dostupný i s podporou odečítače.

Obsah ve většině aplikací byl plně čitelný a reprodukovatelný hlasovou syntézou. Pouze aplikace, které chtěly některé informace prezentovat interaktivnější formou, typicky úvodní představení aplikace, měly problém s čitelností tohoto obsahu. Ten byl čitelný buď jen částečně, či vůbec.

2. Identifikace prvků

Každý prvek, který nese nějakou ucelenou informaci, by měl být uživatel schopen s odečítačem identifikovat a to buď dotykem na prvku, či jeho nalezením při sekvenčním průchodu obrazovkou.

S identifikací prvků měly problém jen ty aplikace, které měly problém i s čitelností obsahu. Nečitelná oblast totiž v sobě vždy zahrnovala více prvků, které by měly být rozlišitelné s podporou odečítače.

U některých aplikací také docházelo k narušení sekvenčního průchodu obrazovkou buď z důvodu ztráty fokusu v určité situaci (ztráta aktuální pozice při průchodu), nebo z důvodu přeskakování některých položek při sekvenčním průchodu obrazovkou.

Relativně často rovněž docházelo při vyvolání menu k ponechání překrytého obsahu v dosažitelném stavu. Ten byl s odečítačem obrazovky nadále čitelný, což mohlo vést k matení uživatele, jelikož měl současně k dispozici jak položky menu (což byl žádoucí a očekávaný stav), tak vlastní obsah aplikace (což byl v dané chvíli stav nežádoucí).

3. Popis prvků

Každý prvek, pokud sám o sobě nenese nějakou textovou informaci, by měl mít svůj implicitní textový popisek.

Většina z testovaných aplikací se potýkala s problémem nepopsaných grafických tlačítek. Ty v lepším případě měly popisek vyplněn dle názvu komponenty a bylo možné odvodit jejich účel (např. „viewSearchBar“), i když to nebylo „hezky česky“. V horším případě tlačítko mělo prázdný popisek či nic neříkající název (např. „SeznamCircle“).

Typ a stav prvků (např. zaškrtnutí přepínačů) byly poskytovány aplikací ve většině případů správně, tudíž bylo s podporou odečítače zřejmé, které části obrazovky jsou aktivními ovládacími prvky.

4. Ovládání prvků

Každý prvek by měl být s podporou odečítače ovladatelný, což znamená, že by mělo být možné měnit jeho stav či jej aktivovat.

Žádná z aplikací nevykazovala chování, které by zabraňovalo ovládání jejích prvků s podporou odečítače. Pouze některé aplikace vyžadovaly u specifických prvků provést gesto pro aktivaci na několikátý pokus.

5. Struktura rozhraní

Aplikace by měly používat prvky rozhraní, které zlepšují komfort ovládání, jako jsou nadpisy či výchozí tlačítka Zpět.

Platí to zejména pro případy, kdy odečítač poskytuje gesta pro přesun po nadpisech či vyvolání tlačítka Zpět bez ohledu na aktuální pozici.

Přibližně polovina testovaných aplikací používá nadpisy či výchozí tlačítka Zpět. Některé aplikace, které tyto prvky nepoužívají, mají svou koncepci takovou, že použití těchto strukturálních prvků nemá smysl.

A jak to celé dopadlo?

Zvláštní cenu Blind Friendly za Nejpřístupnější aplikaci roku 2015 jsme udělili mobilní aplikaci, která dosáhla nejlepších výsledků v expertním a uživatelském posouzení přístupnosti. Hodnotili jsme vítězné aplikace v každé kategorii, pro kterou hlasovala veřejnost a vybírali tu aplikaci, která měla z hlediska přístupnosti nejméně chyb.

Jako nejméně problematickou a tudíž nejlepší aplikaci z hlediska přístupnosti jsme z námi testovaných aplikací vyhodnotili Seznam.cz. Na platformě iOS se nám z těch aplikací, které jsme testovali, líbily také T-Mobile a E-mail.cz, na Androidu pak Antivir a ochrana mobilu od Avastu a E-mail.cz od Seznamu.

Mobilní aplikace roku 2015 - Seznam.cz

Přesah přístupnosti

V tomto článku a při našem testování jsme se primárně soustředili na přístupnost rozhraní mobilních aplikací pro nevidomé uživatele. Pro ně je totiž přístupnost ne benefitem, ale podmínkou nutnou k tomu, aby mohli dané aplikace vůbec používat. Pokud by ale toto zúžení vyvolalo přístupnosti v některém z vývojářů dojem, že se ho přístupnost netýká, protože počet nevidomých uživatelů jeho aplikace se limitně blíží k nule, dovolím si připomenout, že přístupnost pomáhá i dalším skupinám uživatelů, profitujícím z jejích výhod. Vizte třeba UX martyrium se Student Agency.

Poděkování

Na závěr bych rád velmi poděkoval Martině Paroubkové z organizačního týmu soutěže Mobilní aplikace roku, která přijala naši nabídku na spolupráci a má velkou zásluhu na tom, že přístupnost dostala v této soutěži i při samotném vyhlašování výsledků odpovídající a důstojný prostor. Mé poděkování patří také Romanu Kabelkovi, Michalu Jelínkovi a Pavlu Ondrovi, kteří se do testování aktivně zapojili a odvedli na něm velký kus práce. Romanovi taktéž patří poděkování za pomoc při přípravě tohoto článku.

Kam dál

Chcete tvořit přístupné mobilní aplikace a nevíte, jak na to? Následující zdroje vám mohou pomoci objasnit tuto tématiku. Není se čeho obávat, principy přístupnosti jsou stále stejné a to hlavní z nich shrnují výše popsaná kritéria, podle nichž jsme testovali.

Související odkazy

Haptické mapy pro nevidomé

Oznámení, , , , ,

Protože jsou nové haptické mapy, které vznikly spoluprací společnosti Seznam.cz a středisek pro podporu vysokoškolského studie ELSA na ČVUT v Praze a Teiresiás na Masarykově univerzitě v Brně, opravdu ojedinělý počin, pojďme se na ně podívat trochu detailněji.

Produktové video o službě Haptické mapy

V čem jsou takto připravené haptické mapy unikátní?

Nevidomým lidem se vytvořením a zpřístupněním haptických map otevírá do dneška prakticky nemyslitelná možnost získat rychle mapu části libovolného území v rámci České republiky, přičemž výroba této mapy včetně veškeré přípravy podkladů trvá jen několik minut. Doposud používané postupy výroby hmatových map a plánů jsou mnohdy neúnosně časově náročné a kromě specifických znalostí vyžadují i značný podíl ruční práce. Ve všech těchto ohledech znamenají haptické mapy Seznamu zcela novou dimenzi jak pro tvůrce map, tak pro jejich uživatele.

Jak to celé funguje?

Po několikaletém úsilí (začátky prací na haptických mapách se datují do roku 2007) byla vyvinuta metoda generování hmatových map, vytvořených na na podkladě běžných vizuálních map. Vybraný mapový podklad je s respektováním zásad hmatového vnímání převeden do grafického dokumentu, který je optimalizován pro technologie využívající takzvaný mikrokapslový papír. Na jeho teplocitlivou vrstvu se předloha standardním způsobem vytiskne a ve speciálním zařízení pomocí infračervené lampy zahřeje. Tím tmavé kontury nabudou na objemu, vystoupí nad povrch papíru a vytvoří hladký, dobře hmatný reliéf.

Mikrokapslový papír nebyl jako vhodné médium zvolen náhodou. Na českém trhu je dostupných několik zařízení pro práci s tímto papírem, například typ P.I.A.F. nebo ZY Fuse, kterými běžně disponují například vysokoškolská střediska podpory studia či krajská TyfloCentra. Jiné technologie (například Termoform) buď nenabízejí jednoduchou a rychlou práci, anebo, jako je tomu v případě nejmodernějších reliéfních tiskáren, nejsou v České republice dostatečně rozšířeny.

Zy Fuse Heater

Na rozdíl od běžných map, které jsou dostupné na internetu a u kterých si můžeme aktuální výřez vybrat vždy dle potřeby, jsou nové hmatové mapy zobrazeny na jednotlivých předem definovaných listech. Důvodem k této úpravě je skutečnost, že jsou uživatelům předkládány v tištěné (hmatové) podobě a nepředpokládá se práce online. Jednotlivé listy ve formátu A4 zobrazují území o velikosti 300 x 425 m v přibližném měřítku 1: 1500. Toto zobrazení odpovídá v běžném zobrazení na portálu Mapy.cz přiblížení na úrovni 17 (viz následující obrázek).

Ukázka zobrazení stejného území na běžné a hmatové mapě

Obsah jednotlivých listů vychází ze stejné zdrojové databáze, jako běžné mapy a je zpracován stejným nástrojem – Mapnik, což přináší z hlediska provozu výhodu v tom, že aktualizace databáze map se projeví okamžitě i v nově generovaných hmatových mapách.

Použitá zdrojová databáze je vektorová a právě až přístup k vektorové databázi umožnil vytvoření hmatových map, které mohou být v praxi použitelné. Rastrová databáze, které se používala v prvních letech projektu (jiná tehdy nebyla k dispozici) se ukázala v praxi nepoužitelná a bylo od ní upuštěno v okamžiku, kdy společnost Seznam.cz získala přístup k vektorovým datům.

Obsah mapy

Z velké databáze možných zobrazovaných prvků, kterých základní databáze portálu Mapy.cz obsahuje několik set, bylo potřeba vybrat a stanovit vhodnou míru zobecnění obsahu nových map. Jako hlavní metoda byla použita metoda generalizace slučováním podobných prvků, která umožňuje obsah mapy zobrazit v čitelné a přehledné podobě pro hmatové vnímání.

Například plošné objekty tak byly sloučeny do skupin budovy, vodní plochy, zeleň a průmyslové plochy, k obdobnému sloučení pak došlo u liniových prvků a bodových objektů. Více detailů se totiž s ohledem na technologii tisku, která neumožňuje tisknout ve více vrstvách, zatím do mapy nevešlo.

Haptické mapy – plošné značky

Popis mapy

Popis mapy je kvůli možné spolupráci nevidomého a vidícího uživatele s mapou pro všechny bez ohledu na znalost Brailleova písma realizován dvojím způsobem. Primárně jsou ulice označeny zkratkami tří písmen vycházejících z názvu ulice, které jsou vypsány v Brailleově písmu v ose ulice. Zkratky jsou generovány tak, aby se v zobrazeném území neopakovaly. Tyto popisky jsou doplněny plnými názvy ulic ve světlezelené barvě (tento odstín byl vybrán s ohledem na použitou technologii tisku – tato barva nijak nereaguje na tepelnou úpravu a tudíž zůstává pouze ve vizuální podobě).

Všechny zkratky spolu s vysvětlením plných názvů jsou automaticky generovány do pomocného textového souboru, který je automaticky k dispozici s nabízenými mapami.

Generování a tisk mapy

Mapa (sada mapových listů) se zadává obdobně jako v běžné mapě, tzn. zadáním adresného bodu, zadáním ulice (zobrazuje se od středu ulice), případně přesným zadáním souřadnic středu. Po zadání středu zájmového území je uživateli nabídnut základní rozsah tisku listů (v současnosti to je 9 listů, rozsah je možné libovolně měnit o celé listy). Jednotlivé listy na sebe přesně navazují, aby bylo možné vytvářet větší mapy.

V dalším kroku uživatel stáhne archiv s jednotlivými listy (grafické soubory ve formátu PNG), seznamem použitých zkratek a dalšími doplňkovými informacemi (textový soubor TXT), případně – pokud tuto možnost uživatel zvolí – i s legendou v grafické podobě (soubor PNG).

Samotný tisk pak probíhá postupem popsaným v úvodu. Jde o poměrně rychlou metodu, při které se v první fázi běžným tiskem vytiskne na speciální mikrokapslový papír vlastní obsah mapy a po finalizaci ve speciálním zařízení s infračervenou lampou se černé prvky tisku stanou reliéfními.

Hmatové mapy - náhled obrázku v plné velikosti na Flickr.com

Výhody řešení a plány do budoucna

Popsaná metoda umožňuje díky vstřícnému přístupu společnosti Seznam ve velmi krátké době vytvořit hmatovou mapu jakéhokoli území v rámci České republiky. V současné době pouze v jednom měřítku, které nejlépe vyhovuje zobrazení především městského prostředí s důrazem na uliční síť, do budoucna ale autoři plánují rozšířit funkcionalitu o možnost zobrazení většího území (v menším měřítku), které by umožňovalo nevidomým uživatelům zobrazit polohu jednotlivých sídel a základní silniční síť v rámci ČR.

Haptické mapy mohou díky velice jednoduchému a rychlému zpracování přispět k daleko většímu užívání těchto zdrojů při výuce prostorové orientace nevidomých, rozvoji hmatového vnímání a celkovému zvýšení zájmu o mapy.

Související odkazy

Některé pasáže textu jsou se svolením autorů převzaty z příspěvku do sborníku konference INSPO 2014 INTERNETOVÉ MAPY PRO NEVIDOMÉ UŽIVATELE autorů Petra Červenky, Radka Seiferta, Karla Břindy a Aleše Vitingera.