Archiv rubriky: Přístupnost webu

Snídaně u Mastera: Jak na přístupný web?

Osvěty v oblasti přístupnosti webu není nikdy dost. Rád jsem proto přijal pozvání na únorovou Snídani u Mastera, na které společně s Romanem Kabelkou, webadministrátorem a nevidomým programátorem ze společnosti Master Internet, zájemcům představíme tématiku přístupnosti.

Chcete vědět, proč je přístupnost při návrhu digitálního produktu důležitá a jaké výhody přináší jeho uživatelům? Během přednášky Přístupnost jako důležitá součást digitálního designu vám prakticky ukážeme, jak přístupně navržené weby a aplikace nejen uživatelům s handicapem pomáhají při každodenních činnostech, jakými jsou například získávání informací, cestování či komunikace s přáteli.

Přednáška bude pojata nízkoprahově, tzn. bude přínosná především pro ty, kdo se zatím s tématikou přístupnosti nesetkali. Současně ale jistě platí, že prostor pro networking bude možné využít i k zodpovězením pokročilejších dotazů ať už na mě, či na Romana 🙂

Kdy a kde?

Ve středu 7. února od 9:00 v MasterDC Praha, Kodaňská 46, Praha 10.

Harmonogram akce

  • 9:00 – 9:20 přivítání a snídaně
  • 9:20 – 9:50 seznámení s přístupností
  • 9:50 – 10:10 přestávka
  • 10:10 – 10:30 novinky ze zákulisí Masteru
  • 10:30 – 11:00 networking a vzájemné představení

Pojedete na akci autem?

Místa na parkování jsou pro vás připravena na krytém dvoře budovy 4D Center. Z ulice Kodaňská pokračujte po Kavkazské, a zhruba po 200 metrech odbočte doprava k závoře s interkomem.

Nahlaste ostraze objektu, že jedete do Master Internet, a pokračujte podél zdi až na krytý dvůr. Jsou zde pro vás vyhrazena místa 6 – 10. Budeme vás očekávat v zasedací místnosti v jedenáctém patře s ohromujícím výhledem na Prahu. Pokud nás na místě nebudete moct najít, volejte Pavola Makela na čísle 773 919 300.

Registrace

Kapacita akce je omezená, v případě zájmu potvrďte prosím svou účast vyplněním registračního formuláře do konce ledna 2018.

Dress code: Business casual.

Pozvánka na akci ve formátu PDF (913 kB)

Děkujeme za zájem a těšíme se na setkání.

Přístupnost webu Českých drah s odečítači obrazovky

Nevidomí a slabozrací lidé poměrně často cestují vlakem. Jedním ze subjektů, který dbá na potřeby cestujících se zrakovou vadou, jsou i České dráhy. Ty na začátku loňského roku spustily nový e-shop, který bylo potřeba z pohledu přístupnosti trochu vyladit tak, aby jej mohli bez větších obtíží používat i cestující s těžkým zrakovým postižením.

Pro vzdělávací portál Pélion sepsal principy práce s webem Českých drah bez zrakové kontroly včetně rad a tipů Honza Balák. V případě zájmu je najdete ve dvoudílném článku Jak na nový e-shop Českých drah s odečítači obrazovky NVDA a JAWS.

První díl se věnuje volbě vohdného webového prohlížeče, některým specifikům práce s webem prostřednictvím odečítačů (našeptávače, tlačítko s podmnu…) a novým funcionalitám e-shopu: Oblíbení cestující, Věrnostní program ČD body a Moje In-Karta.

Jak na nový e-shop Českých drah s odečítači obrazovky NVDA a JAWS (1. část)

V druhém díle se pak mohou čtenáři detailněji seznámit s platebními metodami v e-shopu a v aplikaci Můj vlak a zajištěním asistence na nádraží.

Jak na nový e-shop Českých drah s odečítači obrazovky NVDA a JAWS (2. část)

Tématika přístupnosti webu Českých drah bude i na programu konference INSPO 2018, jejíž 18. ročník proběhne v sobotu 7. dubna 2018 v Kongresovém centru Praha. Bližší informace o kompletním programu včetně informací o registraci najdete v případě zájmu v článku INSPO 2018: přijďte se seznámit s novinkami v oblasti informačních a komunikačních technologií pro zdravotně postižené.

INSPO 2018: přijďte se seznámit s novinkami v oblasti informačních a komunikačních technologií pro zdravotně postižené

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu

Schopnost otestovat si, zda web, který vytvářím, neobsahuje žádné zásadní prohřešky proti pravidlům přístupnosti, by měla patřit mezi základní dovednosti každého webdesignéra. S tím, jak si takový jednoduchý audit přístupnosti webu udělat, seznamuje diváky v následujícím videu Rob Dodson. A protože mnou doporučovaný postup vypadá až na drobnosti prakticky stejně, pojďme si ukázat, jak takový jednoduchý audit provést a na co se zaměřit.

How I do an accessibility audit — A11ycasts #11

Jednoduchý audit přístupnosti pokrývá následující stěžejní oblasti

Přístupnost a ovladatelnost prvků webové stránky z klávesnice

První věc, kterou je vhodné zkontrolovat, je přístupnost a ovladatelnost prvků z klávesnice. Klávesnice je nejdostupnější nástroj pro testování přístupnosti webu, protože i přes čím dál větší zastoupení mobilních zařízení se stále jedná o primární vstupní zařízení a každý uživatel ji má po ruce.

Jak na to? Přístupnost z klávesnice velmi jednoduše otestujeme tak, že na klávesnici začneme mačkat tabulátor. Pokud jsme se tímto způsobem schopni dostat na každý prvek a máme možnost jej z klávesnice obsloužit, pak je vše v nejlepším pořádku.

Nezapomeneme také ověřit, zda

  • prvek, který při ovládání z klávesnice získá focus, je dostatečně zvýrazněn a uživatel je tak vizuálně informován o tom, na jakém prvku se právě nachází.
  • na stránce není žádný obsah mimo viditelnou oblast obrazovky, který může nedopatřením získat focus,
  • na stránce jsou k dispozici přeskakovací (skip to) odkazy.

Vyzkoušení jednoduché navigace po webu pomocí screen readeru

Znalost alespoň základní obsluhy některého ze screen readerů by dnes už měla také patřit mezi dovedosti tvůrců webů. Od webového vývojáře se samozřejmě neočekává, že bude znát všechny jejich funkce a bude schopen plnohodnotně nasimulovat práci nevidomého uživatele. Cílem je provést základní otestování, zda na uživatele screen readeru nečeká na webové stránce nějaká past, znemožňující mu práci s ní – tedy zda grafické prvky mají alternativní textové popisky, prvky, které slouží k interakci s uživatelem (tlačítka, rozbalovací seznamy…), je možné obsloužit, či zda dynamicky zobrazený obsah získá focus.

Více informací o tom, jaké kombinace screen readerů a prohlížečů (a jakým způsobem) používat, najdete v článcích

Adam na workshopu JAWS a braille

Strukturování webové stránky – nadpisy, oblasti stránky

Správné strukturování webové stránky korektně vyznačenými nadpisy a oblastmi stránek pomáhá uživatelům screen readerů v porozumění tomu, jak je webové stránka rozvržena. Umožňuje jim také efektivní práci s webem a nabízí možnost rychle se přesunout právě na tu část stránky, kterou potřebují. Dobře vytvořenou strukturu stránky si můžeme představit jako obsah knihy – podobně, jako z obsahu získáme představu o názvech kapitol a díky vazbě název kapitoly–číslo stránky se můžeme rychle v knize přesunout tam, kam potřebujeme, stejnou službu udělá uživateli screen readeru nadpisová osnova a oblasti stránky.

Další informace lze najít v článcích Jak definovat strukturu v HTML a proč jsem začal mít rád HTML5 tagy a Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod.

Otestovat strukturu je možné jak pomocí screen readeru, tak pomocí některého z mnoha rozšíření pro webové prohlížeče (nabízí se například Web Developer).

Bližší informace k testování pomocí screen readerů viz

Představu o tom, jak taková nadpisová osnova vypadá třeba zde na Poslepu.cz, si můžete udělat z následujícího screenshotu (uživatelé screen readerů si ji mohou vyvolat pomocí odpovídající funce svého screen readeru 🙂

Poslepu.cz: ukázka nadpisové osnovy

Barvy a dostatečný kontrast

U jednotlivých prvků na stránce musí být zajištěn dostatečný barevný kontrast mezi popředím a pozadím tak, aby prezentované informace byly dobře čitelné. Nástrojů pro otestování dostatečného kontrastu existuje celá řada. Ve videu je doporučováno aXe extension od Deque Systems. Jedná se o jednoduché rozšíření, pomocí nějž je možné provést automatický audit stránky a nechat se upozornit na možné problémy. Jednou z testovaných oblastí je i dostatečný kontrast použitých barev.

Dalším rozšířením, které k testování používám, je Accessibility Developer Tools. Funguje podobně jako aXe extension, kromě upozornění na nedostatečný kontrast ale nabízí i doporučení, jaké barvy použít, aby byly vzájemně dostatečně kontrastní.

Pokud Vám testování kontrastu na úrovni kódu přijde příliš komplikované, doporučuji vyzkoušet Colour Contrast Analyser, který nabízí uživatelsky přívětivější rozhraní.

Testování přístupnosti jako součást vývoje webu

Na závěr videa pak zazní doporučení, se kterým nelze než souhlasit – zahrnout průběžné testování přístupnosti jako nedílnou součást vývoje webu a tím předcházet vzniku bariér.

Závěr

Tento přehled zcela jistě není vyčerpávající a nepokrývá všechny oblasti přístupnosti. Jeho hlavní výhoda a přínos spočívá v tom, že pomocí něj lze odhalit největší překážky v přístupnosti. Po jejich odstranění se tak může z webu, který bude pro uživatele se specifickými potřebami velmi obtížně přístupný, stát web, který bude vyhovovat alespoň základním požadavkům na přístupnost.