Archiv rubriky: Návody

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.

HTML element <mark> & jeho přístupnost

Před časem jsem dostal následující dotaz:

Existuje HTML 5 tag <mark>, který nové browsery plně podporují (a myslel jsem, že i čtečky). MARK barevně zvýrazní rozdílný text. Čtečky tento tag zdá se ale naprosto ignorují a nevidomí tudíž nemají tušení, kde v textu se rozdíly nacházejí. V případě barvoslepých, kteří čtečku nepoužívají, je tu další problém. Pokud podbarvení a tudíž pouhé odlišení barvou není řešením, jaké jiné řešení je tedy vhodné?

Jak se to tedy má s jeho přístupností pro uživatele se zrakovým postižením?

HTML element <mark> slouží ke zvýraznění textu na stránce (v podporovaných prohlížečích při výchozím stylu text žlutě podbarví) a používá se nějak takto:

<p>
  Element <mark> slouží ke zvýraznění textu na stránce.
</p>

Při použití elementu mark tedy není informace odlišena barvou, ale podbarvením, a i barvoslepým uživatelům je tato informace zprostředkována. (Problém by mohl nastat ve chvíli, kdy by se na stránce používaly pro podbarvení různé barvy, ale to asi není v praxi příliš běžné.)

Pro nevidomé uživatele přicházejí v úvahu dvě možnosti, jak situaci vyřešit:

  • na straně uživatele: zapnout ve čtečce obrazovky ohlašování změn atributů písma;
  • na straně provozovatele: doplnit na začátek a konec textu vyznačeného elementem mark vhodně skrytou informaci o tom, že se jedná o zvýrazněný text (například „začátek zvýraznění“ a „konec zvýraznění“).

Koncepčním řešením by samozřejmě bylo, kdyby čtečky obrazovky (a asistivní technologie obecně) tento element braly v potaz a uživatele o podbarvení textu informovaly. To se bohužel neděje a nějaká vhodná/odpovídající role z WAI ARIA bohužel neexistuje 🙁

Shodou okolností jsem minulý týden narazil na článek Steva Faulknera, který se zabývá stejnou tématikou a potvrzuje to, co píši výše. Zájemci v něm najdou i praktickou ukázku, jak pomocí CSS a pseudo elementů :before a :after tuto situaci na stránce ošetřit a element <mark> zpřístupnit.

Short note on making your mark (more accessible)

Short note on making your mark (more accessible)

Tweaking Text Level Styles

V článku Tweaking Text Level Styles téma detailněji rozpracoval Adrian Roselli i pro elementy <del>, <ins> a <s>.

3D tisk pro zrakově postižené – přínosy a rizika, otázky i odpovědi

Listopadová Agora 2017 přinesla množství zajímavých a účastníky velmi žádaných workshopů. Jedním z nich byl i workshop Možnosti použití FFF/FDM 3D tiskáren zrakově postiženými. Jak už jeho název napovídá, jednalo se o praktické představení možností 3D tisku uživatelům s těžkým postižením zraku. Celkem se jej zúčastnilo 25 zájemců, kteří si mohli na základě získaných poznatků udělat představu o možnostech použití FFF/FDM 3D tiskáren.

Jak hodnotil workshop jeden z účastníků?

O 3D tiskárny se zajímám, rád si o tomto tématu čtu články na internetu. Bylo pro mě zajímavé poznat tuto technologii a sledovat, jak 3D tiskárna tiskne objekty. Jsem fanoušek astronomie, setkání s panem Duškem pro mě bylo proto přínosné. Bylo úžasné sledovat, jak nevidomá účastnice kurzu poprvé poznala, že planeta Jupiter je mnohem větší než naše planeta Země. Rozdíl ve velikosti planet nemohla nikdy poznat z obrázků, které mohu sledovat, neboť mám zbytky zraku. 3D tiskárna zpřístupňuje nevidomým informace, které by pro ně byly jinak těžko přístupné.

A protože o toto téma byl opravdu velký zájem, připravil Petr Dušek ze SilencePlease, lektor workshopu, pro náš vzdělávací portál Pélion dva články, shrnující probíraná témata i otázky, které mu účastníci v průběhu workshopu kladli.

V článku Možnosti použití FFF/FDM 3D tiskáren zrakově postiženými (1. část) se na úvod dočtete o tom, co v oblasti 3D tisku uživatelé se zrakovým postižením očekávají (využití ve vzdělávání, pomůcky pro zrakově postižené či návrhy 3D modelů). Na tuto pasáž navazuje detailní popis 3D tisku a seznámení s 3D tiskárnou. V závěru jsou pak čtenáři představeny různé materiály, které je možné pro 3D tisk použít.

Možnosti použití FFF/FDM 3D tiskáren zrakově postiženými – materiál pro tisk

Článek Možnosti použití FFF/FDM 3D tiskáren zrakově postiženými (2. část) je pak primárně věnován zodpovězení zajímavých a častých otázek, které účastníci kladli během workshopu. Můžete si zde přečíst například odpovědi na otázky Jaké je rozlišení 3D tisku?, Jak dlouho trvá 3D tisk? či Je možné si vytisknout třeba vlastní tvář? Přestože mezi lidmi se zrakovým postižením existuje nemalé nadšení z 3D tisku, je nutné nezaujatě upozornit na klíčové problematické oblasti 3D tiskáren a tisku z pohledu zrakově postižených. Přehled možných problematických míst obsahuje závěrečná část druhého článku.

Petrovi ještě jednou děkujeme za přípravu a vedení zajímavého workshopu i za napsání článků a věříme, že se s touto tématikou na Agoře (či jiné akci) nepotkáváme naposled.