Prístupnosť mobilnej aplikácie: VoiceOver, TalkBack a väčšie písmo

01Prístupnosť znamená dokončenú úlohu

Aplikácia musí umožniť nájsť funkciu, pochopiť jej stav a dokončiť prácu. Prístupnosť nie je iba téma pre nevidiacich. Čitateľný text, dostatočné dotykové plochy, zrozumiteľné chyby a alternatívy ku gestám pomáhajú aj pri slabšom zraku, obmedzenej pohyblivosti alebo práci jednou rukou.

Vyberte hlavné cesty: registráciu, prihlásenie, hľadanie položky, objednanie, zaplatenie, zrušenie a kontaktovanie podpory. Pri každej určte výsledok. Nestačí, že čítačka niečo vysloví. Človek má vedieť, čo objednáva, koľko zaplatí a či sa operácia podarila.

02Dohodnite rozsah a zodpovednosť

Spíšte podporované systémy, zariadenia, jazyky a externé obrazovky. Platobná brána, vložený web aj prihlásenie cez inú službu sú súčasťou cesty. Rozdeľte zodpovednosť medzi dizajnéra, vývojára, testera a vlastníka produktu. Každý problém potrebuje vlastníka a rozhodnutie o oprave.

W3C publikuje pracovný, informatívny návrh metodiky použitia WCAG pre mobilné aplikácie. Dokument sám nestanovuje nové požiadavky. Odlišujte natívnu aplikáciu, vložený web a mobilný web. Systémové komponenty ani automatický sken samy nedokazujú splnenie celého štandardu. Požiadavka na konkrétnu normu potrebuje jasný rozsah a spôsob posúdenia.

03VoiceOver: Prejdite obrazovku sluchom

VoiceOver je čítačka obrazovky iPhonu. Po zapnutí sa menia gestá. Najprv si preto prejdite systémový nácvik a pripravte rýchly spôsob vypnutia. Skúšajte so slúchadlami bez čítania obrazovky, no vlastné učenie nezamieňajte za skúsenosť pravidelného používateľa čítačky.

Postupujte medzi prvkami a zapisujte oznámenia. Má tlačidlo presný názov? Rozpoznáte prepínač aj jeho stav? Neopakuje sa obsah viackrát? Pri dialógu musí byť zrozumiteľné, čo sa otvorilo a ako pokračovať alebo okno zavrieť. Potom skontrolujte návrat zamerania.

V zozname objednávok nestačí desať rovnakých tlačidiel „Detail“. Názov má odlíšiť položku bez opakovaného čítania celého riadka. Dekorácie nemajú vytvárať prázdne zastávky. Ku grafu alebo mape pridajte dostupný spôsob získania dôležitých údajov.

04TalkBack overte na Androide zvlášť

Android opisuje testovanie s TalkBack aj kombináciu ručných, automatických a používateľských skúšok. Čítačku zapnete v nastavení prístupnosti; názvy ponúk sa môžu líšiť podľa zariadenia. Po systémovom návode vykonajte rovnakú úlohu ako na iPhone.

Spoločný zdrojový kód nezaručuje rovnaké správanie. Preverte poradie prvkov, zlučovanie popiskov, chybové oznámenia a klávesnicu. Osobitne otestujte spodný panel, dialóg, výber dátumu a vlastné ovládacie prvky. Často vyzerajú dobre, ale bez zraku sa používajú ťažko.

Do protokolu uveďte telefón, verziu systému, aplikácie a čítačky. Hlásenie „na Androide to nejde“ nestačí na opravu. Pridajte kroky, očakávané oznámenie a pozorovaný výsledok.

05Prvok potrebuje názov, rolu a stav

Ikona košíka potrebuje zmysluplný názov, prepínač stav a pole trvalý popis. „Ikona 3“ nevysvetľuje následok akcie. Slovo tlačidlo nemusíte opakovať v názve, ak ho čítačka získa zo správnej roly. Popis má podporiť rozhodnutie používateľa.

Princípy prístupnosti Androidu zdôrazňujú významové popisky a ovládateľné ciele. Vytvorte podľa nich pravidlá vlastných komponentov. Pri produktovej karte rozhodnite, čo sa má čítať spoločne a ktoré akcie zostanú samostatné.

06Väčšie písmo potrebuje pružné rozloženie

Na iOS počítajte s Dynamic Type a prispôsobením rozloženia. Zväčšiť písmená v karte s pevnou výškou nestačí. Použite dlhé názvy, vyššie sumy aj všetky jazykové verzie. Krátky vzorový text zakryje množstvo problémov.

Na Androide skúste systémovú veľkosť písma aj zobrazenia. Text má rešpektovať používateľské nastavenie. Podstatná informácia ani potvrdenie nesmú zostať odrezané. Dva stĺpce môže byť potrebné zmeniť na jeden a krátky riadok na viacriadkový blok. Výška komponentu nech vychádza z obsahu.

WCAG pri webe opisuje zväčšenie textu do 200 % bez straty obsahu alebo funkcie, s príslušnými výnimkami. Nepoužívajte toto číslo ako jedinú univerzálnu skúšku natívnej aplikácie. Overte podporované systémové veľkosti vrátane nastavení prístupnosti a dokončenie úlohy.

07Dotykové plochy, kontrast a pohyb

Apple odporúča ovládacie plochy aspoň 44 × 44 bodov; Android pracuje s odporúčaním 48 × 48 dp. Sú to jednotky rozhrania platforiem, nie fyzické pixely obrázka. Dotyková oblasť môže byť väčšia než ikona, ale nemá zasahovať do susednej akcie.

Kontrast merajte. WCAG uvádza 4,5 : 1 pre bežný text a 3 : 1 pre veľký text za podmienok daného kritéria. Skontrolujte svetlý i tmavý režim, text na fotografii a stav chyby alebo výberu.

Farba nemá niesť význam sama. Chybu vysvetlite textom a vybranú možnosť jasným stavom. Rešpektujte systémové obmedzenie pohybu a umožnite pokojnejší priechod. Ak musí človek presunúť položku, poskytnite aj dostupnú alternatívu k presnému ťahaniu prstom.

08Formulár skúšajte aj s chybou

Vyplňte správne aj nesprávne údaje. Popis poľa má zostať dostupný počas písania; placeholder ho nenahrádza. Skontrolujte klávesnicu, prechod na ďalšie pole a dosiahnuteľnosť potvrdenia. Po oprave sa nemajú stratiť ostatné údaje. Pri časovom limite musí byť jasné, čo sa stane s rozpracovaným obsahom.

Uloženie, zmena ceny a obsadenie termínu potrebujú zrozumiteľné oznámenie aj bez vizuálnej pomôcky. Zároveň nemajú správy neustále prerušovať čítačku. Pri obnovovaní údajov sledujte, či sa zameranie nestratí alebo nepresunie na začiatok dlhej obrazovky.

09Modelová rezervácia od vyhľadania po potvrdenie

1. Pomocou čítačky vyhľadajte službu a otvorte detail.
2. Vyberte dátum a čas; voľný termín rozlíšte bez farby.
3. Vyplňte kontakty a úmyselne vyvolajte chybu.
4. Opravte ju, skontrolujte cenu a pokračujte s veľkým písmom.
5. Dokončite rezerváciu a nájdite potvrdenie aj spôsob zrušenia.
6. Vráťte sa späť a overte, že nevznikla nechcená duplicita.

Ide o ilustračný testovací scenár, nie namerané výsledky. Nahraďte ho hlavnou úlohou svojho produktu. Skúste aj stratu pripojenia a návrat po chybe externej služby. Dostupné potvrdenie nepomôže, ak človek nedokáže vybrať termín.

10Spoločný kód potrebuje dve kontroly

React Native, Flutter aj ďalšie multiplatformné riešenia hodnotíte podľa výsledku na oboch systémoch. Overená komponenta môže pomôcť konzistencii, no aktualizácia alebo vlastná knižnica môže správanie zmeniť. Testujte konkrétne zostavenie, ktoré chcete doručiť používateľom.

Vytvorte sadu schválených prvkov: tlačidlo, pole, prepínač, dialóg, zoznam a stavové hlásenie. Pri každom určte názov, rolu, stav, zameranie a veľké písmo. Dizajnér potom odovzdá aj správanie a vývojár ho nebude zakaždým odhadovať.

Zvlášť pozorne prejdite prechody medzi natívnou časťou a vloženým webom. Návrat z platobnej brány, zobrazenie súhlasu alebo prihlásenie cez externého poskytovateľa môže zmeniť poradie a zameranie. Tieto hranice patria do preberacieho testu rovnako ako vlastné obrazovky.

11Automatizáciu doplňte ľuďmi

Automatické kontroly zaraďte počas vývoja aj pred vydaním. Pomôžu s časťou popiskov, kontrastov či rozmerov. Zmysluplnosť názvu, orientáciu v dialógu a dokončenie zložitej úlohy však overujte ručne. Výsledok bez nálezov nie je dôkazom úplnej prístupnosti.

Prizvite ľudí, ktorí čítačku alebo inú pomôcku pravidelne používajú. Dajte im realistickú úlohu bez navádzania po správnej ceste. Zistite, kde stratili orientáciu a či by si poradili sami. Dohodnite odmenu, súhlas so záznamom a bezpečné testovacie údaje.

Opravy zoraďte podľa následkov. Nemožnosť zaplatiť má prednosť pred zbytočne dlhým názvom ikony. Po oprave zopakujte pôvodný aj susedný krok. Evidujte zariadenie, verzie, nastavenie, nález, závažnosť, vlastníka a výsledok opätovnej kontroly.

Pred vydaním prejdite aj zmenené texty a nové jazykové verzie. Dlhší preklad môže posunúť potvrdenie mimo dostupnej časti obrazovky bez jedinej zmeny kódu. Prístupnosť preto patrí aj do kontroly obsahu a bežnej údržby produktu.

12Ovládanie bez presného dotyku a bez zvuku

Okrem čítačky vyskúšajte externú klávesnicu a podporované alternatívne ovládanie. Android opisuje napríklad Switch Access aj hlasové ovládanie. Overte, že používateľ dokáže vybrať všetky dôležité akcie, vidí zameranie a nezostane uväznený v dialógu.

Úspešné uloženie neoznamujte iba zvukom. K návodnému videu pripravte titulky a potrebné textové informácie. Pri časovom limite skúste pomalšie písanie a iný spôsob vstupu. Najrýchlejší člen vývojového tímu nemá určovať čas, ktorý dostane každý používateľ.

Chybu popíšte konkrétne: „Po otvorení podmienok nemožno klávesnicou prejsť na potvrdenie objednávky.“ Vývojár ju dokáže zopakovať a vlastník produktu rozumie dopadu. Všeobecný pokyn „zlepšiť prístupnosť“ nedáva jasnú podmienku dokončenia.

Rozhodnutie o spoločnom alebo natívnom vývoji rozoberá porovnanie natívnej a multiplatformovej aplikácie. Bez ohľadu na výber si vopred dohodnite zariadenia a scenáre, na ktorých sa bude výsledok preberať.

Opravu overujte v rovnakom nastavení, v akom problém vznikol. Ak väčšie písmo odhalilo odrezané tlačidlo, nestačí skontrolovať základnú veľkosť. Do protokolu doplňte aj nové správanie, aby sa rovnaká chyba dala pri ďalšom vydaní rýchlo zachytiť.

13Časté otázky o mobilnej prístupnosti

Pripravujete alebo preberáte mobilný produkt? V rámci vývoja mobilných aplikácií si dohodnite konkrétne scenáre prístupnosti a dôkazy ich overenia. Začnite úlohou, ktorú musí zvládnuť každý zákazník.