Asistivní technologie a jejich role v přístupu
Jak čtečky obrazovky, zástupci klávesnice a další nástroje umožňují plný přístup k webu. Praktické tipy pro optimalizaci vašeho webu pro všechny uživatele.
Proč asistivní technologie skutečně záleží
V České republice žije přibližně 2,7 milionu lidí s nějakou formou postižení. Webový přístup pro ně znamená svobodu — možnost pracovat, učit se, nakupovat a komunikovat bez zbytečných překážek. Asistivní technologie jsou nástroje, které tyto bariéry odstraňují.
Když řeknete “web je pro všechny”, měli byste to myslet vážně. To znamená udělat web funkční pro někoho, kdo nemůže používat myš. Pro někoho, jehož počítač čte text nahlas. Pro někoho, kdo vidí jen část obrazovky najednou. Je to technika, je to design, a je to zákonná povinnost.
Čtečky obrazovky — okna do webu
Čtečka obrazovky je software, který převádí veškerý obsah na obrazovce na řeč. NVDA, JAWS, VoiceOver — jsou to jména, která slyšíte v komunitě nevidomých uživatelů. Každá z nich funguje trochu jinak, každá má své zvláštnosti.
Klíč? Správná HTML struktura. Když používáte
h1, h2, h3
jako nadpisy, ne jako stylování, čtečka ví, kde je struktura.
Když máte
alt
text u obrázků, uživatel ví, co vidí. Když máte semantické
značky —
nav, main, article
— čtečka umí procházet web logicky.
Konkrétní čísla: V České republice používá čtečku obrazovky přibližně 8 000 až 15 000 lidí. NVDA je nejčastější volba — je bezplatná a open-source. Uživatelé ji kombinují s Firefoxem nebo Chromem.
Klávesnicová navigace — jednoduchost je síla
Ne všichni mohou používat myš. Někdo má артritis, někdo má Parkinsonovu chorobu, někdo jednoduše preferuje klávesnici. Důvodů je spousta. A víte, co? Dobrá klávesnicová navigace prospívá všem.
Tab klíč, Enter pro potvrzení, šipky pro pohyb. Je to jednoduché, když web funguje správně. Tlačítka musí být viditelná, když jsou fokusovaná. Pořadí tabulace musí být logické. A to všechno se dělá bez JavaScriptu — jen HTML a CSS.
Použijte
tabindex
promyšleně — nebo lépe, spoléhejte na přirozené pořadí HTML
Přidejte viditelné focus styly — minimálně 2px solid border nebo outline
Testujte vážně — jen Tab a šipky, žádná myš po dobu 15 minut
Ostatní asistivní technologie
Nejde jen o čtečky a klávesnici. Existují stovky nástrojů, které lidem pomáhají pracovat s webem efektivněji.
Zvětšovací software zvětší obsah na 200%, 300% nebo víc. Někdo potřebuje vysoký kontrast — bílý text na černém pozadí. Některé prohlížeče mají vestavěné možnosti — Firefox, Chrome, Safari všechny umožňují přizpůsobení. Ale když je web přizpůsoben od začátku, vše funguje lépe.
Poznámkový software umožňuje vybrat text a přidat si poznámky přímo na webu. Text-to-speech nástroje čtou obsah nahlas. Dikční software umožňuje psát mluvením. Joysticky, trackbally, switch zařízení — to všechno jsou asistivní technologie, a web musí pracovat se všemi z nich.
Zvětšení obsahu
Schopnost zvětšit obsah až na 200% bez rozbití layoutu je kritická. Používejte relativní jednotky (rem, em) místo pixelů.
Vysoký kontrast
Některé uživatele používají vysoký kontrast režim. Zajistěte minimálně 4,5:1 poměr pro běžný text, 3:1 pro velký text.
Text-to-speech
Díky Natural Reader nebo podobným nástrojům mohou uživatelé poslouchat obsah. Správná HTML struktura umožňuje lepší výslovnost.
Hlasové ovládání
Uživatelé používají Dragon NaturallySpeaking nebo hlasové ovládání OS. Web musí být plně ovladatelný bez myši.
Jak optimalizovat web pro asistivní technologie
Není to věda. Jsou to základy. Často se podivujete, proč to není samozřejmé, ale je to tak — mnoho vývojářů se o tom prostě neučili. Teď je čas to změnit.
1 Používejte správné HTML značky
Ne divů a spinů. Použijte
button
na tlačítko.
a
na odkaz.
nav, header, footer, main, article, section
pro strukturu. Čtečka obrazovky pak ví, co je co. Uživatel se
může pohybovat logicky — “přeskočit na hlavní obsah”, “seznam
navigace”, atd.
2 Alt text pro každý obrázek
Popis, ne seznam slov. Ne “obrázek-1.jpg”. Ne
“muž-žena-počítač”. Napište: “Muž v modrém saku sedí u
počítače a pracuje na dokumentu.” Buďte konkrétní. Pokud je
obrázek dekorativní, nechte alt prázdný:
alt=""
3 Dobrý kontrast barev
4,5:1 pro normální text. 3:1 pro velký text (18pt+). Používejte online nástroje jako WebAIM Contrast Checker. Ověřte to. Nespouštějte web bez ověření kontrastu — je to nejzákladnější věc.
4 Formuláře s patřičnými popisky
Každé
input
potřebuje
label
. Ne placeholder místo labelu. Chyby se mají hlásit jasně.
Pole se mají seskupovat logicky. Když uživatel interaguje se
formulářem, měl by vědět, co se děje.
5 Testujte s opravdovými uživateli
Automatické nástroje jsou užitečné, ale nenahrazují testování. Pozvěte si někoho, kdo používá čtečku obrazovky. Nechte ho procházet vaší webovou stránkou. Poslouchejte, co říká. Hádejte, co ho frustruje? Právě tam jsou vaše chyby.
“Přístupnost není přídavná funkce. Je to fundamentální způsob, jak designujeme. Když se o přístupnost postaráte od začátku, web funguje lépe pro všechny.”
— Vývojář z České republiky
WCAG 2.1 — standard, kterého se držet
Web Content Accessibility Guidelines 2.1 je celosvětový standard. Má čtyři pilíře: vnímatelnost (Perceivable), ovladatelnost (Operable), srozumitelnost (Understandable), robustnost (Robust).
Zákon o rovném přístupu k informacím v České republice vyžaduje Level AA (je to střední úroveň). To znamená 4,5:1 kontrast, správná struktura, alt texty, klávesnicová navigace — všechno, co jsme právě probírali. Není to těžké, když víte, co dělat.
Je to také dobrý obchod. Přístupný web je často rychlejší web. Je to srozumitelnější pro vyhledávače. Je to lepší pro SEO. Pokud si myslíte, že přístupnost stojí peníze, myslíte na to špatně — obvykle šetří peníze a čas.
Začněte dnes
Asistivní technologie nejsou budoucnost. Jsou to přítomnost. Lidé je používají teď. Váš web by měl s nimi fungovat. Není to altruizmus — je to zdravý rozum. Je to zákon. Je to dobrý design.
Kdybyste měli začít někde, začněte tady: Vyberte si jeden nástroj (NVDA je bezplatná). Spusťte svůj web. Poslechněte si, jak to zní. Budete překvapeni. Pak si vezměte WebAIM Contrast Checker a zkontrolujte své barvy. To jsou dvě věci. Zajímá vás to? Přečtěte si WCAG 2.1. Přečtěte si Accessible Rich Internet Applications (ARIA) specifikaci. Postupujte krok za krokem.
Chcete se dozvědět víc o konkrétních standardech a pokynech?
Přečtěte si průvodce WCAG 2.1Právní poznámka
Tento článek poskytuje vzdělávací informace o asistivních technologiích a přístupnosti webu. Jednotlivé právní požadavky se liší podle jurisdikce. V České republice se řídíte zákonem o rovném přístupu k informacím (čl. 4 zákona č. 365/2015 Sb.). Při implementaci doporučujeme konzultaci s právníkem nebo odborníkem na přístupnost, zejména pokud vaše webové stránky spadají pod povinnosti veřejné správy. Tento obsah není právní poradenství a nenahrazuje individuální konzultaci s odborníkem.
