Lepší uživatelský zážitek pro adaptivní webové nástroje

Nástroje interakce

Pro lidi, kteří se při navigaci internetem spoléhají na adaptivní webové nástroje, je způsob, jakým je obsah vytvořen a prezentován, naprosto zásadní. Ani ta nejvyspělejší asistivní technologie na světě nedokáže přečíst, oznámit ani ovládat obsah, který neexistuje v přístupné podobě. Tlačítko, které je ve skutečnosti stylizovaný <div>, obrázek bez textové alternativy nebo vlastní rozevírací nabídka bez podpory klávesnice je prostě neviditelný — nebo hůře, slepá ulička — pro lidi, kteří na těchto nástrojích každý den závisejí.

QualiBooth vám pomáhá porozumět dvěma věcem zároveň: jak nástroje uživatele váš obsah skutečně interpretují a jaký obsah nebo struktura chybí, je poškozená nebo nejednoznačná. Právě tato kombinace odlišuje web, který se technicky načte, od webu, který skutečně funguje pro všechny.

Tento průvodce prochází hlavní kategorie asistivní a adaptivní technologie, jak každá z nich očekává chování webu, a praktické kroky, které můžete podniknout, abyste vytvářeli s těmito nástroji, a ne proti nim. Také jasně vymezuje hranici mezi skutečnou asistivní technologií a přístupnostními overlayi — protože tyto dva pojmy se často zaměňují a tato záměna má reálné důsledky pro reálné uživatele.

Co “adaptivní webové nástroje” vlastně znamenají

Adaptivní webové nástroje — běžněji nazývané asistivní technologie (AT) — jsou software a hardware, které mění způsob, jakým člověk vnímá nebo ovládá digitální rozhraní. Nejsou to doplňky k vašemu webu; jsou to vlastní prostředí uživatele, nakonfigurované podle jeho potřeb a často používané hodiny denně napříč tisíci weby.

Mezi hlavní kategorie patří:

Čtečky obrazovky, které převádějí obsah na obrazovce na syntetizovanou řeč nebo obnovitelné Braillovo písmo.
Zvětšení obrazovky, které zvětšuje a přeskupuje část displeje nebo celý displej.
Spínačový přístup pro lidi, kteří nemohou používat standardní klávesnici nebo myš.
Hlasové ovládání, které řídí rozhraní zcela pomocí vyslovených příkazů.
Vestavěné funkce prohlížeče a operačního systému, jako jsou režimy vysokého kontrastu, omezený pohyb a nástroje pro čtení.
Pomůcky pro čtení a porozumění, které zjednodušují, předčítají nebo restrukturalizují text.

Každá z nich se opírá o stejný základ: dobře strukturovanou, sémantickou stránku ovladatelnou klávesnicí, která dodržuje zavedené standardy. Když stavíte podle WCAG 2.2, vytváříte smlouvu, na které každý z těchto nástrojů závisí.

Čtečky obrazovky: struktura je rozhraní

Čtečky obrazovky jsou nejznámější asistivní technologií a pro mnoho týmů nejobtížnější na návrh — právě proto, že vizuální rozvržení, které vidíte, vám téměř nic neříká o tom, co čtečka obrazovky oznamuje.

Nejpoužívanějšími čtečkami obrazovky jsou NVDA a JAWS na Windows, VoiceOver na macOS a iOS a TalkBack na Androidu. “Nevidí” vaši stránku; vytvářejí model ze stromu přístupnosti, který je odvozen z vaší HTML sémantiky a případného ARIA, které navrch přidáte.

Co čtečky obrazovky od vás potřebují

Skutečné sémantické prvky. Používejte <button>, <a>, <nav>, <main>, <h1>–<h6> a <table> k tomu, čím jsou. Nadpis musí být nadpisem, aby uživatelé mohli přeskakovat mezi sekcemi; odkaz musí být odkazem, aby se objevil v seznamu odkazů.
Smysluplné textové alternativy. Každý informativní obrázek potřebuje atribut alt, který popisuje jeho účel. Dekorativní obrázky by měly mít prázdné alt="", aby byly přeskočeny místo oznámení jako šum.
Programové popisky pro ovládací prvky. Formulářová pole potřebují přidružené prvky <label>; tlačítka pouze s ikonou potřebují přístupný název prostřednictvím aria-label nebo vizuálně skrytého textu.
Logická hierarchie nadpisů. Nadpisy jsou primárním způsobem, jak uživatelé čteček obrazovky procházejí stránku. Přeskakování úrovní nebo používání nadpisů čistě kvůli vizuální velikosti tuto navigaci narušuje.
Správné ARIA — a pouze když je potřeba. ARIA může komunikovat stavy (rozbaleno, vybráno, zakázáno) a role pro vlastní widgety, ale špatné ARIA je horší než žádné. Prvním pravidlem ARIA je používat nativní HTML, kdykoli je to možné.

Častým zdrojem záměny je rozdíl mezi čtečkou obrazovky a běžným převodem textu na řeč. Nástroj pro čtení předčítá text; čtečka obrazovky zpřístupňuje a ovládá celé rozhraní, včetně ovládacích prvků, stavů a navigace. Tento rozdíl podrobně rozebíráme v článku převod textu na řeč versus čtečky obrazovky.

Protože automatizované nástroje dokážou zachytit jen zlomek problémů se čtečkami obrazovky, jediným spolehlivým způsobem, jak zjistit, jak váš web zní, je testovat jej tak, jak to dělají uživatelé. Náš průvodce testováním čteček obrazovky prochází praktickým postupem a specializované hodnocení čtečkou obrazovky provede vaše nejdůležitější uživatelské cesty tímto procesem se zkušenými testery.

Zvětšení obrazovky: navrhujte pro přiblížený pohled

Lidé se slabým zrakem často zvětšují obrazovku kdekoli od 200 % do 800 % nebo více a prohlížejí si jen malou část stránky najednou. Někteří používají lupu operačního systému; jiní se spoléhají na přiblížení prohlížeče nebo specializovaný software.

Při velkém zvětšení se rozhodnutí o rozvržení, o kterých nikdy nepřemýšlíte, stávají kritickými:

Přeskupení obsahu (reflow). Obsah se musí přeskupit do jednoho sloupce při 400% přiblížení (kritérium úspěchu WCAG 2.2 1.4.10), aby uživatelé nemuseli posouvat ve dvou směrech, aby přečetli větu.
Blízkost souvisejících prvků. Pokud se chybová zpráva objeví daleko od pole, které popisuje, zvětšující uživatel je možná nikdy neuvidí ve stejném výřezu. Udržujte popisky, vstupy a zpětnou vazbu pohromadě.
Viditelné zaměření (fokus). Jasný indikátor zaměření s vysokým kontrastem umožňuje zvětšujícímu uživateli najít, kde se nachází, poté co pohled poskočí.
Žádná ztráta obsahu nebo funkce. Nic by nemělo být oříznuto, překryto nebo znefunkčněno, když je text zvětšen až na 200 % (kritérium úspěchu 1.4.4).

Zvětšení odměňuje čistá, responzivní rozvržení a trestá návrhy s pevnými pixely a obsah, který závisí na najetí myší (hover).

Spínačový přístup a ovladatelnost klávesnicí

Spínačová zařízení umožňují lidem ovládat počítač jedním nebo dvěma jednoduchými vstupy — tlačítkem, zařízením typu sip-and-puff nebo pohybem hlavy — obvykle skenováním interaktivních prvků jeden po druhém. Spínačový přístup je postaven na podpoře klávesnice: pokud váš web plně funguje z klávesnice, téměř jistě funguje i se spínači.

To činí z plné ovladatelnosti klávesnicí jednu z věcí s nejvyšším pákovým efektem, které můžete udělat správně:

Vše dosažitelné. Každý interaktivní prvek musí být zaměřitelný a ovladatelný bez myši — odkazy, tlačítka, formulářové ovládací prvky, nabídky, modální okna, karusely a vlastní widgety stejně tak.
Viditelné, logické pořadí zaměření. Zaměření by se mělo pohybovat stránkou v pořadí, které odpovídá vizuálnímu a čtecímu toku, a zaměřený prvek musí být vždy jasně označen.
Žádné pasti klávesnice. Uživatelé musí být schopni přesunout zaměření ven z jakékoli komponenty, včetně vloženého média a dialogů.
Přeskakovací odkazy. Odkaz “přeskočit na hlavní obsah” umožňuje lidem obejít opakovanou navigaci místo toho, aby ji procházeli na každé stránce.

Pokud zákazník vyplňuje formulář, může se tabulátorem dostat přes každé pole, vyvolat rozevírací nabídku, vybrat produkt a odeslat — to vše bez dotyku myši? Bude automatické vyplňování prohlížeče spolupracovat s vaším značkováním? To jsou otázky, na které uživatelé spínačů a klávesnice o vašem webu odpovídají, ať se ptáte, nebo ne.

Hlasové ovládání: na názvech a viditelných popiscích záleží

Nástroje hlasového ovládání, jako jsou Dragon, Voice Control a Voice Access, umožňují uživatelům vyslovovat příkazy jako “klikni Odeslat” nebo “posuň dolů”. Aby tyto příkazy fungovaly, musí viditelný popisek ovládacího prvku odpovídat jeho přístupnému názvu. To je základ kritéria úspěchu WCAG 2.2 2.5.3, Label in Name.

Praktické pokyny:

Přístupný název by měl obsahovat viditelný text. Pokud je na tlačítku napsáno “Odeslat zprávu”, nedávejte mu aria-label “Odeslat formulář” — uživatel, který řekne “klikni Odeslat zprávu”, bude ignorován.
Vyhněte se ovládacím prvkům pouze s ikonou bez textu, nebo jim dejte přístupný název, který odpovídá pravděpodobnému vyslovenému příkazu.
Udržujte klikatelné cíle dostatečně velké pro spolehlivý výběr, což také splňuje kritérium velikosti cíle ve WCAG 2.2.

Funkce přístupnosti prohlížeče a operačního systému

Ne všechny adaptivní nástroje jsou samostatné produkty. Moderní prohlížeče a operační systémy přicházejí s výkonnými vestavěnými funkcemi, které uživatelé zapínají na úrovni celého systému, a váš web by je měl automaticky respektovat:

Omezený pohyb. Respektujte media dotaz prefers-reduced-motion, abyste zakázali nebo zmírnili animace pro uživatele, kteří z pohybu zažívají nevolnost nebo rozptýlení.
Tmavý režim a vysoký kontrast. Podporujte prefers-color-scheme a Windows High Contrast / Forced Colors, aby vaše rozhraní zůstalo čitelné, aniž byste bojovali proti nastavení uživatele.
Změna velikosti textu a přiblížení. Používejte relativní jednotky, aby fungovalo škálování textu prohlížeče, místo zamykání velikostí v pixelech.
Režimy čtení a nástroje pro čtení. Zobrazení čtení v prohlížeči a nástroje jako Immersive Reader zredukují stránku na její základní obsah — což funguje mnohem lépe, když je vaše HTML sémantické a bez nepořádku.

Tyto funkce nestojí uživatele nic navíc a vás velmi málo, přesto dramaticky zlepšují pohodlí pro široké publikum, včetně lidí bez diagnostikovaných postižení.

Nástroje pro čtení a porozumění

Nástroje pro čtení slouží lidem s dyslexií, ADHD, kognitivními postiženími nebo omezenou gramotností v jazyce stránky. Patří mezi ně předčítače převodu textu na řeč, čtecí pravítka, zvýrazňování slov, sumarizátory a překladatelské nástroje.

Aby s nimi dobře fungovala:

Pište jednoduchým, dobře organizovaným jazykem s popisnými nadpisy a krátkými odstavci.
Označkujte stránku tak, aby byl hlavní obsah jasně identifikovatelný a pořadí čtení správné.
Vyhněte se předávání významu pouze barvou, rozvržením nebo obrázky — poskytněte textový ekvivalent.
Zajistěte, aby byl váš jazyk deklarován (atribut lang), aby předčítání a překlad používaly správnou výslovnost a pravidla.

Dobrá struktura obsahu pomáhá každému nástroji v tomto článku zároveň, protože všechny čerpají ze stejného základního značkování.

Skutečná asistivní technologie versus přístupnostní overlaye

To je rozdíl, na kterém záleží nejvíce, a právě zde mnoho organizací chybuje.

Skutečná asistivní technologie — čtečky obrazovky, lupy, spínačový přístup, hlasové ovládání — běží na zařízení uživatele, pod kontrolou uživatele, a ovládá váš web prostřednictvím jeho sémantiky a podpory klávesnice. Uživatel strávil roky jejím konfigurováním. Vaším úkolem je prostě vytvořit stránku, které tyto nástroje dokážou porozumět.

Přístupnostní overlaye jsou skripty třetích stran, které přidáte na svůj vlastní web a které slibují, že jej automaticky “zpřístupní”, obvykle prostřednictvím plovoucího widgetu. Nejsou náhradou za asistivní technologii a nejsou opravou nepřístupného webu. Zde je proč:

Nedokážou opravit základní kód. Overlaye sedí na vrchu stránky; nedokážou spolehlivě vymyslet chybějící alt text, opravit poškozené struktury nadpisů nebo přimět <div>, aby se choval jako skutečné tlačítko ve všech čtečkách obrazovky.
Často kolidují se skutečnou AT. Mnoho uživatelů čteček obrazovky hlásí, že overlaye narušují nástroje, na které se již spoléhají, a někdy činí weby obtížnějšími k použití, nikoli snazšími.
Vytvářejí falešný pocit shody. Instalace widgetu nesplňuje WCAG 2.2, EAA ani ADA. Proti webům, které používají overlaye, byly podány žaloby právě proto, že základní bariéry zůstaly.
Neodrážejí prožitou zkušenost. Přístupnost je nakonec posuzována lidmi, kteří používají AT každý den — proto provádíme audity lidmi s postižením místo spoléhání se na tvrzení skriptu.

Spolehlivou cestou je opravit přístupnost v kódu a ověřit ji jak automatizovaným, tak lidským testováním. Tuto filozofii podrobněji vysvětlujeme v článku co znamená skutečná digitální přístupnost.

Praktický postup pro vytváření s adaptivními nástroji

Vytváření pro asistivní technologii není jednorázový projekt; je to proces, který zapadá do toho, jak již dodáváte software. Udržitelný přístup obvykle kombinuje čtyři věci:

Automatizované skenování, brzy a často. Nástroje jako software pro skenování přístupnosti zachytí velké množství problémů na úrovni kódu — chybějící popisky, selhání kontrastu, poškozené ARIA — dříve, než se dostanou do produkce. Automatizované kontroly jsou rychlé a opakovatelné, ale pokrývají jen část celkového obrazu.
Manuální testování a testování asistivní technologií. Problémy, které nejvíce ovlivňují skutečné uživatele — matoucí pořadí zaměření, nejasná oznámení, nepoužitelné vlastní widgety — vyžadují člověka. Náš průvodce manuálními audity přístupnosti popisuje, jak toto doplňuje automatizaci.
Zakořenění přístupnosti ve vašem týmu. Přístup k přístupnosti jako k nepřetržité disciplíně, podporovaný zlepšováním procesu přístupnosti, zabraňuje pomalé regresi, ke které dochází, když jsou opravy jednorázové.
Správné nástroje pro váš stack. Sada nástrojů pro přístupnost od QualiBooth spojuje skenování, monitorování a reporting dohromady, zatímco Agora a naše community edice nabízejí vstupní body pro týmy v různých fázích vyspělosti.

Pokud je pro vás terminologie v tomto článku nová, slovník přístupnosti je užitečným společníkem, když tyto postupy uvádíte do praxe.

Kam QualiBooth zapadá

QualiBooth identifikuje problémy na vašem stávajícím webu a může také skenovat stránky před jejich spuštěním, takže zákazníci používající jakýkoli adaptivní nástroj získají bezproblémový zážitek, který zvyšuje použitelnost a loajalitu ke značce. Kombinujeme automatizovanou detekci s hodnocením zkušenými testery a lidmi s postižením a poté pomáháme vašemu týmu přeměnit zjištění v trvalé opravy — nikdy ne overlay, který problém maskuje.

Cíl je jednoduchý: web, který funguje s nástroji, kterým vaši uživatelé již důvěřují, za jejich podmínek, pokaždé, když jej navštíví.

Jste připraveni vidět, jak si váš web vede se skutečnou asistivní technologií? Spusťte bezplatné skenování přístupnosti, abyste odhalili rychlé výhry, vyžádejte si demo, abyste viděli QualiBooth v akci, nebo si promluvte s naším týmem o zakázce poradenství v oblasti přístupnosti na míru.