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.

ICC 2017: jaká byla mezinárodní letní škola pro studenty se zrakovým postižením v Lovani

Mezinárodní letní škola pro studenty se zrakovým postižením (ICC) je evropskou putovní akcí, jíž se Česká republika účastní pravidelně od prvního ročníku konaného v roce 1995. Jejím pořadatelem je ICC Asociace ve spolupráci se sítí expertních pracovišť a národních koordinátorů z celé Evropy. Národním koordinátorem pro Českou republiku je Středisko Teiresiás Masarykovy univerzity, na kterého se v případě zájmu o účast na ICC můžete obrace).

ICC postupně hostila většina evropských zemí (v letech 2005 a 2013 se škola odehrála v České republice) a každý rok se jej účastní přibližně 65 účastníků z 20 zemí. Během posledních dvou dekád se v souhrnu jednalo o 2 000 mladých lidí a 1 500 profesionálů, kteří je doprovázeli a vzdělávali.

Primárním cílem ICC je nabídnout mladým lidem s těžkým zrakovým postižením informace o tom, jaké možnosti jim nabízí zpřístupněné informační a komunikační technologie pro získávání informací, studium, komunikaci i pro zábavu, rozvíjet jejich sociální dovednosti a usnadnit jim přechod na vysokou školu či trh práce.

Dvacátý třetí ročník Mezinárodní letní školy pro zrakově postižené studenty (ICC 2017) proběhl od 23. července do 1. srpna 2017 v prostorách Katolické univerzity v Lovani. Pro mladé lidi s těžkým postižením zraku byl jedinečnou možností poznat své vrstevníky z jiných zemí a společně se naučit něčemu novému, pracovat na osobním rozvoji a zlepšení sociálních a komunikačních dovedností.

Mladí lidé se zrakovým postižením mají stejné potřeby komunikace, společenského života a zážitků sdílených s jedinci stejných zájmů. Nemají však srovnatelné příležitosti jako jejich vrstevníci z běžné populace.

ICC je pro mnohé z nich první příležitostí, kdy mohou „vyrazit do světa“ bez formálního doprovodu rodičů nebo učitelů a jednat sami za sebe. Je také jedinečnou možností poznat své vrstevníky z jiných zemí a společně se naučit něčemu novému, pracovat na osobním rozvoji a rozvoji sociálních a komunikačních dovedností.

Program ICC tvoří

  • odborné workshopy zaměřené na práci s asistivními a komunikačními technologiemi a rozvoj sociálních a komunikačních dovedností,
  • volnočasové aktivity, které slouží především jako relaxace a příležitost k navazování kontaktů s ostatními účastníky,
  • jednodenní celodenní hra/výlet v polovině pobytu s cílem přiblížit okolí místa, v němž se ICC koná.

Počítačové workshopy tématicky pokrývají stěžejní témata: Windows 10, Office 2016, macOS, Linux, mobilní zařízení, Google Docs, zpracování audia a videa, prohlížení webových stránek, práci s asistivními technologiemi (JAWS, ZoomText, NVDA, VoiceOver…). V rámci komunikačních workshopů se pak účastníci mohou seznámit například se základy tance, vaření, modelování z hlíny, studiem v zahraničí, či si vyzkoušet sportovní aktivity, uzpůsobené pro hráče s těžkým zrakovým postižením. Volnočasové aktivity pak zájemcům nabízejí smysluplné trávení volného času – účastníci si mohou jít zaplavat, zajezdit na koni, zahrát bowling, navštívit muzeum či zábavní park.

Videoreportáž z ICC 2017

Zpětná vazba účastníků

O účast na ICC je mezi studenty velký zájem a pro řadu z nich se jedná o nezapomenutelný zážitek. Přečtěte si, jak se na ICC v Lovani líbilo účastníkům z České republiky.

Klára Švábová

Letošní ICC 2017 v Belgii se mi opět velice líbilo. Bylo skvělé, že jsme se opět sešli v tak hojném počtu a mohli tak poznat nevidomé studenty z jiných zemí světa. K organizaci ICC jako takového absolutně nemám slov, vše bylo naprosto skvělé. Z workshopů se mi nejvíce líbil ten o tvorbě rádiového podcastu a dále ten, ve kterém jsme psali články do ICC newspaper. Moc mne potěšila volnočasová aktivita Movie night with audio description, kde bylo možno zhlédnout film s audiopopisem v anglickém jazyce. Myslím, že takto si účastníci mohli procvičit své jazykové dovednosti. Kromě workshopů a volnočasových aktivit se mi velice líbil Excursion day v Bruselu.

Závěrem bych chtěla moc poděkovat všem, kdo letošní ICC organizovali. Velký dík patří našim národním koordinátorům, jmenovitě Jitce Graclíkové a Radku Pavlíčkovi, kteří nám vždy ve všem vycházeli vstříc a my jsme si tak mohli ICC co nejvíce vychutnat. Radku a Jitko, moc Vám děkuji, že jste mi umožnili opět se zúčastnit Mezinárodní letní školy pro zrakově postižené. Toto ICC pro mne byl naprostý vrchol letošních velkých prázdnin!!

Pavlína Soušková

Letos jsem se zúčastnila svého prvního ICC v Belgii a musím přiznat, že mě tato akce velice příjemně překvapila. Před odjezdem jsem měla maličko obavy z toho, co mě bude čekat, ale hned po příjezdu se tyto obavy rozplynuly. Když se zamyslím, tak nenajdu asi ani jednu věc, která by se mi nelíbila. Ať už jde o organizaci, ubytování, workshopy, volnočasové aktivity či kolektiv, vše bylo naprosto skvělé. Z Belgie jsem si odvezla nespočet zážitků, jako například jízdu na tandemu nebo návštěvu Bruselu, ale také nových a užitečných poznatků o práci s počítačem a mobilem, možnostech studia a práce, nebo také o životě v jiných zemích. Největší přínos ale vidím v tom, že jsem si našla spoustu nových přátel jak z Česka, tak ze zahraničí a ve zlepšení jazykových a komunikačních dovedností. Chtěla bych poděkovat především našim národním koordinátorům, že mi umožnili se akce zúčastnit a pak samozřejmě všem, kteří se podíleli na tom, aby se tato akce vůbec mohla uskutečnit.

Marika Mejzlíková

O ICC jsem se dozvěděla v podstatě náhodou. Četla jsem si na internetu informace o Teiresias, díky mé podané přihlášce na MU. Po přečtení článku o ICC jsme byli s rodiči nadšení a Teiresiás kontaktovali. Když mi koordinátoři po výběrovém řízení oznámili, že s nimi mohu jet, měla jsem obrovskou radost i strach zároveň. Nikdy předtím jsem neletěla letadlem. A ještě k tomu úplně sama s cizími lidmi. Teď už vím, že strach byl naprosto zbytečný. Cesta proběhla v pořádku a se všemi účastníky jsme se rychle seznámili.

Měla jsem velké obavy z angličtiny. Myslím, že mi camp velmi pomohl s komunikačními schopnostmi. Ve většině workshopů jsem byla jediná Češka, a tak mi zkrátka nezbylo nic jiného než mluvit. Díky tomu jsem poznala spoustu skvělých lidí z různých zemí Evropy. Některá přátelství byla (a ještě pořád jsou) hodně silná.

Program byl velmi pestrý. Ve workshopech jsem se dozvěděla spoustu nových informací. O počítačích, cizích zemích, zvládání každodenních problémů slabozrakého atd. Večerní aktivity byly skvělé! Bylo to vždy příjemné odlehčení po náročném dni.

Být mezi lidmi, kteří jsou také zrakově postižení nebo dokonce nevidomí, pro mě bylo také velikým přínosem. Ve svém okolí nikoho s tímto postižením nemám. Nemůžu sdílet svoje pocity a každodenní obtíže s ostatními, kteří se potýkají se stejnými problémy. Camp mě také zbavil studu používat na veřejnosti bílou hůl. Zkušenosti druhých a setkání se s tolika lidmi se stejným problémem pro mě bylo něco úplně nového.

Neumím slovy dost dobře vyjádřit, jak veliká zkušenost to pro mě byla… Takové zážitky se nezapomínají do konce života.

Moc si vážím práce našich koordinátorů, všech organizátorů a dobrovolníků, sponzorů a mnohých dalších. Dokážu si představit, jak náročné musí být takový camp zorganizovat. Mockrát děkuji všem!

Ksenia Enilina

Letošní ICC mi dalo fakt hodně! Naučila jsem se spoustu nových a užitečných věcí z počítačové techniky, procvičila jsem si angličtinu a poznala hodně úžasných lidí. Byl to pro mě největší zážitek tohoto léta. Chtěla bych poděkovat našim národním koordinátorům a všem organizátorům za 10 nezapomenutelných dnů v Belgii. Bylo to pro mě takový přátelský svět nevidomých – většinou v životě se cítíme zvláštně mezi vidícími lidmi, ale na ICC jsme jako doma, nacházíme tam pocit bezpečí a klidu. Jsem moc ráda, že jsem se mohla stát součástí velké rodiny ICC.

Tomáš Javorský

Na ICC jsem tento rok byl poprvé a kvůli svému věku nejspíše i naposled. Nicméně musím říct, že to pro mě byla událost, na kterou nikdy nezapomenu. Událost, která mi opět pomohla s některými sociální aspekty života, stejně tak jako mi rozšířila znalosti. Především co se týká získávání informací, práce na PC, nového software a aplikací, které jsem začal ihned používat a zjednodušují mi každodenní život. Navíc jsem tam poznal úžasné lidi, kteří mají stejné problémy a potřeby jako já. Díky ICC začínám víc cestovat a zlepšovat jazyk. Byla to výjimečná událost a já bych rád poděkoval naším koordinátorům, účastníkům a Světlušce a Leontince za finanční pomoc.

Anastázie Bendová

ICC v Belgii pro mě bylo velkým přínosem. Nejen kvůli zajímavým přednáškám a workshopům, při kterých jsem se dozvěděla spoustu nového, ale především díky tomu, že jsem zde měla možnost seznámit s mnoha skvělými lidmi, ať už z Česka nebo ze zahraničí a sdílet s nimi své zkušenosti (nejen týkající se našich handicapů). Bylo zajímavé bavit se z lidmi z jiných zemí a poznávat zdejší kulturu.

Poděkování za podporu

Účast studentů z České republiky na ICC 2017 finančně podpořil Nadační fond Českého rozhlasu ze sbírky Světluška, Nadace Leontinka a Evropská unie v rámci programu Erasmus+ z prostředků projektu Empowering who sees less; through intercultural exchange and new communication technologies.

Za podporu moc děkujeme.

Fotogalerie z ICC 2017 na Flickru

ICC 2017, Leuven, Belgium, 23.7.-1.8.2017

Videopozvánka na ICC 2018 do Zadaru

Dvacátý čtvrtý ročník Mezinárodní letní školy pro zrakově postižené studenty ve věku od 16 do 21 let proběhne jako jeden desetidenní turnus od 22. do 31. července 2018 v prostorách Univerzity v Zadaru v Chorvatsku.

Kolegové z Centar UP2DATE, které je hostitelem ICC v roce 2018, shánějí podporu i prostřednictvím crowdfundingové kampaně s názvem International Camp on Communication and Computers. Pokud je Vám myšlenka ICC sympatická a chcete ji podpořit, příspěvek do kampaně je určitě vhodnou možností 🙂 Děkujeme.

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