Přejít k navigační liště

Zdroják » Webdesign » Několik praktických rad, jak zpřístupnit nevidomým sledování videí na webu

Několik praktických rad, jak zpřístupnit nevidomým sledování videí na webu

Články Webdesign

Proč zpřístupňovat video službu pro nevidomé, když se stejně nemohou na video podívat? Pravdou je, že nevidomí mohou sledovat spoustu videí. Nejen různé rozhovory a soutěže, ale i seriály a filmy. A proč ne, já jsem taky jako malý poslouchal Cimrmany pouze z audionahrávek.

Nálepky:

Občas jsem něčemu neporozuměl, protože to bylo potřeba vidět, ale rozhodně jsem se tím nenechal odradit. Sledovat video se dá, i když člověk nevidí.

Nevidomí pro svou práci na počítači využívají speciální software – odečítač obrazovky (screen reader) a webovou stránku procházejí pomocí klávesnice. Stěžejní pro ně tedy je, aby všechny ovládací prvky stránky byly dostupné a ovladatelné z klávesnice a aby je odečítač obrazovky správně pochopil a přečetl.

TIP: O přístupnosti se více dozvíte z našich dalších článků se štítkem přístupnost.

Rád bych vám v tomto článku ukázal, jaké úpravy jsme na stream.cz udělali, aby byla tato služba přehlednější a použitelnější i pro uživatele se zrakovým hendikepem. Dozvíte se, v čem jsou pro nevidomé uživatele důležité a jak je lze provést. A třeba vás to bude inspirovat a zamyslíte se nad přístupností i u vašich projektů.

Načíst další

Hlavní strana stream.cz je rozdělena do kategorií a každá kategorie je zastoupena několika videi, za kterými se nachází tlačítko „Zobrazit další“. Web stream.cz je udělaný tak, že se po zmáčknutí tlačítka stránka nepřepíše celá, ale pouze se metodou AJAX do stránky donačte další obsah. Na stávající stránce tedy přibudou další videa příslušné kategorie.

Zastavme se u tlačítka „Zobrazit další“. Mluvím o tlačítku, ale když se podíváte do zdrojového kódu, zjistíte, že se jedná o odkaz. Mohlo by se zdát, že je to jedno, funkčnost bude po kliknutí myši z pohledu uživatele stejná. Navíc, když je to odkaz, vyhoví se tak i SEO, protože je tam link, kterému roboti rozumí.

Pro nevidomého to však jedno není. Tlačítka by měla odesílat formuláře, případně ovládat drobné akce jako je rozbalení popupu, otevření modálního okna, načtení dalších položek a podobně. Zato odkazy by měly směřovat na další strany. Jenže v tomto případě se stránka nezmění, pouze na ní přibudou další videa. Jednat by se tedy mělo o tlačítko. Proč je důležité si to ujasnit? Jeden ze způsobů, jak mohou nevidomí uživatelé procházet stránku, je skákání po některých konkrétních prvcích, nejčastěji po nadpisech. Pokud ale chtějí rychle najít tlačítko, s odečítačem obrazovky to mohou udělat stiskem klávesy B. Jenže když je tam místo tlačítka odkaz, odečítač ho tímto způsobem nenajde.

Jak to tedy udělat, aby se (jak říká kolega Jerry) přístupnost nažrala, ale SEO zůstalo celé? Velice jednoduše. Stačí dvě věci. K odkazu přidat role=‘button‘ a doprogramovat, aby akce nastala, i když se k ovládání použije mezerník.

Videa načtena, a co teď?

Představme si, že ovládáme stránku pomocí klávesnice. Pro procházení fokusovatelných prvků použijeme TAB, doskáčeme až na tlačítko „Načíst další“ a zmáčkneme ho. Podle očekávání se nám načtou další videa, která uvidíme na obrazovce. Pokud bychom viděli a pracovali myší, najedeme na video, které nás zaujalo a pustíme si ho. My však pracujeme z klávesnice a je pro nás důležité, kde se nachází fokus. Pokud situaci nijak neošetříme, zůstane nám fokus trčet na tlačítku „Načíst další“.

Pro ty, co vidí, nenastane žádný problém. Ale zkuste se vžít do situace člověka, který na stránku nevidí a zmáčkne toto tlačítko. Pro něho to vypadá, jako že se nic nestalo. Zmáčknul tlačítko, ale pořád stojí na tlačítku, tím pádem se mu nic neozvalo (odečítač neměl důvod reagovat) a nevidí, že se mezi tím na obrazovce něco změnilo. Místo toho, aby mačkáním klávesy TAB vesele pokračoval v procházení videí, musí napřed zjistit, co se stalo a jestli se vůbec něco stalo. Zdržuje ho to a odvádí to jeho pozornost. Když zjistí, co se stalo, bude se muset zpětným procházením (SHIFT + TAB) seznámit s tím, jaká nová videa se načetla. Navíc si bude muset pamatovat, na kterém videu byl před tím, než tlačítko zmáčkl.

Jak by to tedy mělo vypadat? Správně by se po zmáčknutí tlačítka měl fokus přesunout z tlačítka mezi poslední prohlédnuté video a první nově načtené video. To ale není všechno. Odečítač by měl nevidomému uživateli oznámit, že se něco stalo.

Jak toho docílit? Mezi poslední navštívené a první nově načtené video jsme vložili span, má absolutní pozicování a vizuálně je umístěn mimo viewport. Atribut tohoto spanu je tabindex=-1. To proto, aby nezískal fokus při procházení tabulátorem, ale aby bylo možné na něj přenést fokus pomocí JavaScriptu. Text tohoto spanu jsme zvolili „Epizody načteny, pokračujte“, ale to už je na vás, jak budete informovat. Teď už jen zbývá zařídit, aby se po zmáčknutí tlačítka fokus přenesl na tento span. To zařídí JavaScript přenesením fokusu.

Nevidomý uživatel se po zmáčknutí tlačítka dozví, že byly načteny nové epizody a v procházení videí může pokračovat klávesou TAB. Nic ho v prohlížení nerozptyluje.

ukázka vložení místa pro získání fokusu

Automaticky spuštěné video vs odečítač obrazovky

Pokud se pohybujeme na stránkách video služby, je velmi pravděpodobné, že si vybrané video budeme chtít přehrát. Spousta podobných služeb vám celý proces zrychlí a vybrané video spustí automaticky ihned po načtení stránky a bez uživatelského pokynu.

Co ale uživatel, který pracuje s odečítačem a místo videa by si chtěl třeba jen přečíst diskuzi pod videem? Navštíví stránku videa, začne se po stránce pohybovat, poslouchá odezvu odečítače a do toho mu jede zvuk videa. Podívejte se, jak taková situace vypadá v krátké videoukázce:

Asi je zřejmé, že v takové situaci se nedá rozumně pracovat.

Samozřejmě by to vyřešilo pozastavení videa. Ale i k tomu pozastavení si musíte „doskákat“. Na Streamu jsme to vyřešili tak, že po načtení stránky s videem přeneseme fokus na tlačítko pozastavit. Tím pádem k pozastavení videa stačí pouze jednou zmáčknout mezerník a je možné v klidu pracovat.

A jako bonus je hnedle vedle tlačítko pro přeskočení reklamy, takže jakmile je to možné, dá se reklama přeskočit, i když nevidíte na tlačítko „Přeskočit reklamu“.

Skryté menu pro rychlé ovládání videa.

Skryté menu se na webových stránkách používá tam, kde je vhodné a rychlé přeskočit pomocí klávesnice nějakou část obsahu a zrychlit tak přesun k obsahu, který vás zajímá. Skryté menu se většinou nachází na začátku stránky a vyvolat se dá pouze z klávesnice, a to tak, že získá fokus. Kromě rychlého přechodu na významné části stránek na Streamu toto menu umožňuje i základní ovládání videa.

Uživatel pracující z klávesnice se tak velice rychle dostane k ovládání videa, ať se na stránce nachází kdekoliv. Podívejte se na to sami ve videu:

Na stránkách stream.cz jsme úprav přístupnosti udělali ještě více. V tomto článku jsem vám ale hlavně chtěl demonstrovat, jak hodně mohou nevidomým pomoci i drobné úpravy a vcítění se do způsobu práce.

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
andrej

v mode pre nevidiacich by z dovodu setrenia prenosoveho pasma stalo za to prehravat len audio

Martin Hassman

Je to logické. Rozhodně. Ale nevím, zda by se ta práce vyplatila. Pro službu bude datový tok té menšiny uživatelů zanedbatelný (=prakticky nulový ekonomický přínos jeho snížením). Současná vylepšení webového klienta nestojí tolik, je to vlastně několik drobných zásahů s velkým dopadem (myšleno velkým pro těch pár uživatelů) = ekonomicky přijatelné řešení. Bylo by zajímavé znát, kolik by odhadem stály úpravy na serveru pro posílání pouze zvukového toku, osobně tipuji že hodně.

Jerry

Je to přesně, jak píšeš Martine. Vedle videí bychom museli ukládát i čistou audiostopu (nebo mít video a audio odděleně a michat až na klientu, což ale s sebou nese více problémů než užitku). Ekonomicky to přesně vyčíslit neumím, ale znamenalo by to stroje navíc a také lidi, co by tato řešení udržovala. Každopádně udržovat takové řešení pouze pro pár (tisíců) lidí (ve srovnání s miliony přístupů) je značně neefektivní. Přístupnost se snažíme řešit na úrovni UX, čili uživatel musí vědět, kde se právě nachází, mít možnost ovládat stránku i s pomocí speciálních zařízení (odečítač, různé hw buttony, …) a také se co nejrychleji dostat k informacím, které potřebuje.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.