Archiv rubriky: Návody

Asistivní technologie pro zrakově postižené z dílny Microsoftu – Lupa, Předčítání, Seeing AI…

Společnost Microsoft se v poslední době stále více angažuje na poli přístupnosti a asistivních technologií. Pod vedením současného výkonného ředitele Satya Nadelly věnuje přístupnosti pro uživatele se specifickými potřebami věnuje mnohem větší pozornost, než tomu bývalo dříve. Za Nadellovým zájmem o tuto oblast stojí jeho osobní životní zkušenost. Nedávno o tom publikoval na blogu Microsoftu o přístupnosti velmi osobní příspěvek s názvem Satya Nadella, Microsoft CEO: “The moment that forever changed our lives.”, v němž vysvětluje důvody, které jej k tomuto rozhodnutí vedly.

Tento přístup mám za krok správným směrem, protože podporuje rozšíření asistivních technologií i k uživatelům, kteří profesionální či finančně nákladná řešení s ohledem na své potřeby nepotřebují, nebo si je z finančních důvodů nemohli či nemohou dovolit. Microsoft tímto přístupem otevírá svůj software mnohem nejširšímu počtu uživatelů, než tomu bylo doposud.

Ještě před několika málo lety totiž vedla jediná cesta ke zpřístupnění prostředí operačního systému Windows přes aplikace třetích stran. A to i v případě, kdy takové řešení bylo s ohledem na potřeby uživatele oním pověstným kanónem na vrabce – nicméně jiná možnost tehdy nebyla a uživatelé byli vzhledem k pořizovací ceně zcela závislí na pomoci státu. Dnes je situace jiná a aktuální verze operačního systému Windows 10 obsahuje nemálo funkcí, které mohou uživatelé pro zpřístupnění obsahu a aplikací použít, aniž by si museli pořizovat nákladná řešení.

Uživatelé, kteří s ohledem na své potřeby pro zpřístupnění operačního systému Windows a aplikací nepotřebují profesionální řešení typu JAWS nebo ZoomText, mohou dnes snadno a bez dalších vícenákladů využívat možnosti, které jim Microsoft nabízí jako součást operačního systému Windows 10. A že se tak děje, mohu potvrdit z vlastní zkušenosti, kdy nemálo uživatelů, kteří dříve ke zvětšování informací na obrazovce používali některé z placených řešení, si dnes naprosto bez problémů vystačí s Lupou od Microsoftu.

Poodobně je tomu i u konkurenčních produktů od společností Google a Apple, ale o těch si něco řekneme někdy příště 🙂

Microsoft Accessibility

Řešení tu jsou, důležitá je osvěta a vzdělávání

Řešení v podobě přístupných technologií (ať už placených, či zdarma) tedy dnes máme k dispozici a jsou uživatelům dostupná v rozsahu, jako tomu dosud nikdy nebylo. Možnost, že přijdu do běžného obchodu, koupím si počítač nebo mobilní telefon, spustím na něm odečítač obrazovky nebo zvětšovací program, který je nedílnou součástí jeho operačního systému, je věc, která ještě před několika lety nebyla možná.

Problém, na který ale opakovaně narážím je ten, že uživatelé v dnešní, informacemi přehlcené době, často vůbec netuší, že bezplatná (či finančně dostupná) řešení jsou od nich vzdálena doslova několik stisků kláves a že není třeba se vždy spoléhat na podporu Úřadu práce ČR jako na primární zdroj, přes který je nutné počítač, tablet či mobilní telefon pořizovat.

Díky tomu, že jsou tyto funkcionality nedílnou součástí operačního systému, jsou samozřejmě dostupné všem, kdo je potřebují. Tedy nejen uživatelům s těžkým postižením zraku, ale každému, kdo si potřebuje informace ma obrazovce občas zvětšit nebo si je nechat přečíst umělým hlasem.

Jaké možnosti zpřístupnění dnes Microsoft uživatelům Windows 10 nabízí? Pojďme si alespoň ty stěžejní z nich krátce představit.

Předčítání (Narrator)

Předčítání (Narrator) nabízí uživatelům možnost využívat hlasový nebo hmatový výstup. V kombinaci s integrovaným českým hlasem můžeme začít Předčítání naplno využívat a bez nutnosti instalace odečítače nebo syntetizéru pracovat na jakémkoli počítači s Windows 10 (to může být výhoda zejména ve firemním prostředí, kde je často z bezpečnostních důvodů instalace aplikace třetích stran uživateli zakázána).

Pro spuštění Předčítání stiskneme klávesovou zkratku Windows + Ctrl + Enter Systém k nám začne promlouvat srozumitelným českým hlasem Microsoft Jakub a my jej můžeme začít používat i bez zrakové kontroly.

Pro ukončení předčítání opět stiskneme klávesovou zkratku Windows + Control + Enter.

Další informace k programu Předčítání

Getting started with Narrator in Windows 10 – Microsoft Support

Lupa

Lupa umožňuje zvětšení části obrazovky. Je možné ji spustit v celoobrazovkovém módu, jako samostatné okno, nebo jako čočku, která sleduje ukazatel myši na obrazovce. Lupu lze odkudkoli – včetně přihlašovací obrazovky Windows – zapnout klávesami Windows + NUM PLUS. Oproti profesionálním zvětšovacím programům, které se zpravidla poměrně dlouho spouštějí, je spuštění Lupy téměř okamžité. Lupu můžeme kdykoli vypnout stiskem kláves Windows + Escape. Pro změnu úrovně zvětšení můžeme použít klávesy Windows + NUM PLUS a Windows + NUM MÍNUS. Úroveň zvětšení lze také měnit kolečkem myši při současně stisknutých klávesách Ctrl + Alt (případně pravý Alt).

Další informace k programu Lupa

Předčitání i Lupu lze používat současně a využít tak výhod, které přináší zvětšení informací zobrazených na displeji v kombinaci s hlasovým výstupem.

Usnadnění přístupu – další možnosti

Kromě dvou výše popsaných klíčových nástrojů nabízí Microsoft uživatelům Windows 10 i řadu dalších nastavení, které jim mohou usnadnit používání

Čemu dalšímu se Microsoft na poli přístupnosti věnuje?

Kromě zpřístupňování operačního systému Windows 10 je Microsoft aktivní i v dalších oblastech. Ať už jsou to aplikace Seeing AI a Hearing AI, postavené na umělé inteligenci, Microsoft Soundscape – navigační aplikace, která sděluje informace o okolí prostřednictvím binaurálních 3D zvuků, či canetroller – haptický ovladač pro virtuální realitu.

Další informace

Seeing AI app from Microsoft

Ale o těch tady na POSLEPU zase až někdy příště 🙂 Bližší informace o dalších aktivitách Microsoftu v oblasti přístupnosti najdete ve skvělém přehledovém článku Microsoft Accessibility Features.

Jsou weby kandidátů na post prezidenta republiky bezbariérové?

Volba prezidenta republiky vrcholí. A ačkoliv si nedělám iluze o tom, že by (ne)přístupnost webu některého z kandidátů byla pro někoho natolik zásadní skutečností, že by se rozhodoval jen podle ní (nebo podle ní změnil na poslední chvíli názor), přišlo mi zajímavé podívat se, jak si stojí weby Miloše Zemana a Jiřího Drahoše z pohledu přístupnosti. Protože míru jejich (ne)přístupnosti vnímám jako jeden z ukazatelů toho, jak se staví k potřebám lidí s nějakým handicapem.

Z časových i pragmatických důvodů jsem se zaměřil na zkontrolování následujících stěžejních oblastí na webech www.zemanznovu.cz a www.jiridrahos.cz:

  1. Přístupnost a ovladatelnost z klávesnice.
  2. Dostatečné strukturování obsahu pomocí nadpisů a oblastí stránek.
  3. Dostatečný barevný kontrast a čitelnost.
  4. Smysluplné alternativní textové popisky u grafických prvků, které nesou významovou informaci.
  5. Přístupná multimédia.

Weby jsem neprocházel celé, primárně jsem se zaměřil na to, zda je přístupnost řešena koncepčně: tedy zda (a do jaké míry) byla přístupnost brána v potaz jako součást vývoje webu, a jaké přístupnostní prvky weby po technické stránce obsahují. Nestrhával jsem tedy body za drobné chyby či opomenutí (chybějící titulky u jednoho videa atp.), ale za koncepční nezvládnutí testované oblasti.

A jak to dopadlo?

Přístupnost a ovladatelnost z klávesnice

Celá řada uživatelů nemá možnost pracovat s webem pomocí myši či dotykovým ovládáním. Proto je třeba, aby byl web plně přístupný a ovladatelný z klávesnice. To znamená, že uživatel se musí být schopen z klávesnice dostat na každý prvek, který může získat focus, a musí jej být schopen z klávesnice ovládat.

V této oblasti jsou na tom oba weby +/- stejně. Ovládání z klávesnice sice není nijak optimalizováno – chybí přeskakovací odkazy či zvýraznění právě aktivního prvku – současně ale platí, že weby neobsahují žádné „pasti na klávesy“ a jsou tedy z klávesnice plnohodnotně ovladatelné.

Za tuto „disciplínu“ tedy dávám po jednom bodu oběma hodnoceným webům.

Průběžné skóre: Drahoš 1 : 0 Zeman

Dostatečné strukturování obsahu pomocí nadpisů a oblastí stránek

Správné strukturování obsahu prostřednictvím nadpisů a oblastí webové stránky pomáhá uživatelům v porozumění tomu, jak je obsah stránky rozvržen, a umožňuje jim také rychle se přesunout právě na tu část stránky, kterou potřebují.

Web Jiřího Drahoše lze považovat za uspokojivě strukturovaný jak pomocí oblastí, tak nadpisů. Oblasti stránky jsou definovány pro všechny stěžejní oblasti (včetně hlavní o). Nadpisová osnova pak vhodně doplňuje definované oblasti stránky a je i vhodně definována její hierarchie.

Oblasti stránky na webu Jiřího Drahoše

Nadpisová osnova na webu Jiřího Drahoše

Oproti tomu web Miloše Zemana v této oblasti zcela selhává – oblasti stránky jsou definovány jen dvě (hlavní navigace a další obsah), což nelze považovat ani za dostačující, ani za systémové řešení. Nadpisů je použito také poskrovnu, navíc jsou jako nadpisy vyznačeny texty, které ze své podstaty nadpisem v pravém slova smyslu nejsou.

Oblasti stránky na webu Miloše Zemana

Nadpisová osnova na webu Miloše Zemana

V této disciplíně tedy jednoznačně vítězí Jiří Drahoš a získává 2 body (jeden za oblasti stránky, jeden za nadpisy).

Průběžné skóre: Drahoš 3 : 1 Zeman

Dostatečný barevný kontrast a čitelnost

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é. Důležité je také zvolit čitelný font, definovat dostatečnou výchozí velikost písma a umožnit jeho zvětšování pomocí prostředků prohlížeče.

Ani jeden z hodnocených webů neobsahuje závažnou překážku stran kontrastu či čitelnosti, za tuto disciplínu tedy dávám po jednom bodu jak webu Jiřího Drahoše, tak webu Miloše Zemana.

Průběžné skóre: Drahoš 4 : 2 Zeman

Smysluplné alternativní textové popisky u grafických prvků, které nesou významovou informaci

Grafické prvky jsou dnes důležitou součástí každého webu, a proto je potřeba, abychom se při jejich používání vyvarovali chyb, které by mohly zamezit získání takto publikované informace handicapovanými uživateli. Celá řada uživatelů není schopna vizuálně vnímat grafické prvky, které jsou umístěny na webových stránkách. Veškeré grafické prvky na stránkách, které nesou informaci, a/nebo slouží jako odkazy, musí mít proto definovánu relevantní textovou alternativu.

Na webu Jiřího Drahoše jsou textové alternativy poměrně důsledně definovány, na webu Miloše Zemana textové alternativy u grafických prvků chybí.

Chybějící textové alternativy u grafických prvků na webu Miloše Zemana

Průběžné skóre: Drahoš 5 : 2 Zeman

Přístupná multimédia

Dosud jsme se zabývali spíše technikami, které umožňují či usnadňují přístup k textovému či grafickému obsahu. V tomto bodě se podíváme na to, jak jsou na tom stran přístupnosti videa. Stěžejním požadavkem na jejich přístupnost je videozáznamy otitulkovat.

Videozáznamů na webu Miloše Zemana moc není, a ty, které tam jsou, bohužel titulky opatřeny nejsou. Oproti tomu prakticky všechny videozáznamy na webu Jiřího Drahoše otitulkovány jsou a s jejich obsahem se tak mohou seznámit všichni ti, kteří nejsou z nějakého důvodu schopni informace získat z audiostopy.

Webu Jiřího Drahoše tedy dávám 1 bod za důsledné a koncepční titulkování videozáznamů.

Průběžné skóre: Drahoš 6 : 2 Zeman

Vítěz

Vítězem se stává web Jiřího Drahoše, který zabodoval ve všech hodnocených oblastech a neobsahuje žádné závažné bariéry.

Celkové skóre: Drahoš 6 : 2 Zeman

Tip na závěr

Chcete si otestovat přístupnost vlastního webu a nevíte, jak na to? Postupujte dle návodu v článku Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu a zjistíte, že to není nic složitého.

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

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.