ILINČEV 
Tento měsíc budete mít ze zákona povinnost udělat svůj web či aplikaci přístupnou pro lidi s handicapem (trvalým či dočasným, a ano, stáří je též handicap). „Co si na nás ta EU zase vymýšlí, to nestačila správná zakřivenost banánů? Slepejši nejsou naše cílovka, a hluchý číst umí,“ slyším vás šeptem říkat.
Já vás chápu, ale je to složitější. Lidí, co trpí nějakým handicap je totiž poměrně hodně (v EU údajně každý šestý).
Vzpomínám si na klienta, kterému jsem navrhoval mapu bankomatů v ČR – a červeně udělal aktuálně nefungující. Taktně mě upozornil, že je barvoslepý a že zelenou od červené nerozezná.
Můžu tady hlásat, že přístupný web víc vydělá, a že je vlastně lepší pro všechny. Pravděpodobně je to pravda, ale zatím jsem na to neviděl žádnou seriózní studii či A/B test. To je ale vedlejší, protože stejně, jako pustím těhotnou ženu sednout, tak chci mít web, co bude fungovat pro co největší část populace. Navíc za to výhledově hrozí drakonické pokuty a soudní spory.
Google začal penalizovat z pohledu přístupnosti špatně navržené stránky – snižuje vám quality score a tím zdražuje vaši cenu reklamy. Takže i když nejste lidumil, stejně to dává smysl udělat.
Co má největší dopad
Jedna věc je, jak časté ty chyby jsou, a druhá, jak kritické jsou. Podle WebAIM a analýzy milionu stránek potažmo Radka Pavlíčka jsou nejčastěji problémy tyto:
Já ale následující srovnání řadím podle kritičnosti pro byznys i uživatele. Bez popisu obrázku nevím, co na něm je, ale když nedokážu souhlasit s obchodními podmínkami, tak nenakoupím.
Formuláře
Tohle je na samostatný článek, ale za mě jsou dva základní problémy:
- Nedokážu jen pomocí klávesnice vyplnit formulář (většinou adresu).
- Nevím, co patří do jakého políčka.
Přeskakování prvků ve formuláři
Zkuste si najet v e-shopu do kroku adresa, odpojit si myš a zkusit vyplnit formulář jen pomocí klávesnice. Pomůže vám k tomu tlačítko:
- Tab (zvolení dalšího prvku),
- Shift+Tab (zpět na předchozí prvek),
- Šipky nahoru a dolů (pro listování seznamem),
- Mezerník (zatržení checkboxu nebo radiobuttonu) a
- Enter (kliknutí na tlačítko / odeslání formuláře).
Často se stává, že některé prvky to přeskakuje, takže nejste například schopni souhlasit s obchodními podmínkami nebo vyplnit zemi.
Astratex například bez vyplnění e-mailu nedovolí přeskočit na ostatní pole formuláře, a i po vyplnění nedokážete zadat poznámku, odhlásit se z Heureka dotazníku ani objednat pomocí Enteru.
Na druhou stranu alespoň vím, který prvek je vybraný – tady Zpět na dopravu a platbu.
Zvýraznění neboli Focus stavy
Je důležité ukázat, kde se zrovna nacházím. Často se to řeší zvýrazněním prvku, a ještě častěji to designéři zakazují.
Orámování nebo zvýraznění vybraného prvku, například formulářového pole, ocením i jako normální uživatel.
Tady správný příklad tlačítka Hledat na Alze:
Popsání formulářových polí
Rozšířil se nešvar v podobě vkládání popisů polí přímo dovnitř formulářových polí. Graficky hezké, konverzně nastejno a přístupnost tragédie.
No a jestli si myslíte, že to vyřešíte tím, že popisy po kliknutí do pole zmenšíte a posunete, tak ne. Protože to bude kolidovat s minimální velikostí textu 13 px :).
Je k tomu hezký článek od Craiga Sullivana – zločiny proti UX.
Dostatečný kontrast
Tohle je nejčastější nešvar, naposledy jsem to řešil včera – bílý text na žlutém pozadí :).
Tady jsem u Bonami vymazal všechny prvky s nedostatečným kontrastem. Mimochodem homepage jich má 144.
S tím souvisí i další tip – nepoužívejte barvu jako jediný indikátor stavu nebo změny, viz můj příběh s mapou bankomatů v úvodu.
Velikost a hierarchie písma
Žádné písmo na webu by nemělo být menší než 13 px. A 16 px pro vnitřek formulářů, když to uděláte menší, tak vám iPhone začne zoomovat do políčka a můžete ztratit kontext.
Optimální velikost běžného (chlebového) textu je 16 px.
No a je ještě jedna věc, kterou byste si měli zkusit: Zvětšit zoom na 200 % (Ctrl/Cmd + „+“) a podívat se, zda vám to nerozbije rozvržení stránek. Ctrl + 0 to vrátíte zpět.
Velikost a rozestupy interaktivních prvků
Ignorujte doporučení Applu, Googlu i Microsoftu v pixelech. Vezměte si pravítko a změřte si fyzicky, že:
- Minimální klikatelný prvek mám 7×7 mm a
- Minimální odstup klikatelných prvků jsou 2 mm.
Jo a po okrajích mobilního displeje potřebujete mít prvky větší, protože jsou tam uživatelé méně přesní.
Martin Klein k tomu doplňuje detaily target size.
Ovládání webu klávesnicí (tabelátor, šipky, mezerník a Enter)
To, co jsem nahoře zmiňoval u sekce formuláře lze ale aplikovat i na:
- navigaci,
- vyhledávání,
- klikání na odkazy,
- zavírání pop-up oken atd.
Je například docela fajn mít možnost u našeptávače ve vyhledávání používat místo myši šipky případně tabelátor. Ale většinou zůstane jen u přání (Luigi, mluvím o tobě).
Ostatní
Těch věcí je samozřejmě více, 80 % práce bude pro programátory. Ať už jde o:
- alternativní popisy obrázků,
- prázdné odkazy a tlačítka bez popisu,
- přeskakování na obsah,
- titulky u videí …
Hezký článek je na toto téma na Smashing Magazine, povinná četba pro front-end kodéry.
Jak to otestovat?
Jsou 3 způsoby (pokračujte v tomto pořadí):
- Odpojte si myš a zkuste ovládat web komplet jen na klávesnici. Kontrolujte ovladatelnost včetně stavů (sbalené menu, vybraný prvek, …).
- Automaticky pomocí Wave (část webu to bude blokovat), Lighthouse v Chrome.
- Pusťte na to odborníky (blindfriendly.cz nebo theseus.cz).
Dobrý příklad – Rohlík.cz
Rohlík.cz patří mezi průkopníky přístupnosti v Česku. Od začátku deklarovali jasný cíl: aby u nich mohl pohodlně nakoupit i zákazník s postižením zraku. V praxi to znamenalo řadu konkrétních úprav – všechny obrázky produktů mají textovou alternativu, navigace je konzistentní a používá prvky rozpoznatelné čtečkami (hlavní oblasti stránky jsou správně označené). Formuláře pro výběr potravin i dokončení nákupu jsou jednoduché a přehledné.
Rohlík také důsledně řeší kontrast – jejich firemní zelená se používá střídmě a na vhodném podkladu, důležité texty jsou černé na bílém. V testu přístupnosti z roku 2021 dopadl Rohlík nejlépe ze všech hodnocených – získal přes 91 % bodů a nevidomý tester dokončil nákup za 26 minut. To je srovnatelné s běžnými uživateli.
Špatný příklad – Alza.cz
Alza jako lídr trhu dlouho zaostávala v oblasti přístupnosti. V testu s nevidomými dopadla nejhůře – získala jen 45 % bodů. Hlavní problémy byly technické, ale projevovaly se jako špatná uživatelská zkušenost: chaotická struktura stránek, neoznačené sekce a komplikovaná navigace.
Nejvíce kritiky sklidil objednávkový proces. Formuláře pro výběr dopravy a platby nebyly dobře přístupné a jejich vyplnění bez zraku bylo extrémně zdlouhavé. Auditor Jan Balák k tomu uvedl: „Největší problém bylo vyplňování platby, dopravy a údajů o dodání. Kdybych s Alzou neměl předchozí zkušenosti, nákup by mi trval ještě déle.“
Všeho s mírou
Až budete řešit kontrast s grafikem, jeho nejpravděpodobnější reakce bude: „Ale vždyť to bude vo voči (hnusný)!“
Na což musíte zareagovat: „Udělej to co nejmíň hnusný, abys splnil podmínky. Tady je na to článek.“ A ukažte mu tento obrázek:
Podtržené odkazy
Jo a prosím vás, podtrhávejte odkazy. A ty navštívené dejte jinou barvou, nevím, kdy toto začali všichni ignorovat.
Tip na závěr: Netflix seriál Away o astronautech, kteří míří na Mars (spoiler allert – jeden z nich postupně oslepne).
A teď opravdu na závěr: Stávka slepců!
Zdroje:
https://www.youtube.com/watch?v=K3HtK3ltsIU&
https://www.petradolejsova.cz/blog/pristupnost-webu-a-sluzeb-co-od-cervna-ceka-firmy-vcetne-e-shopu
https://ux-tree.com/navigating-the-european-accessibility-act-for-businesses
https://aaardvarkaccessibility.com/wcag-plain-english/
Checklisty:
https://not-checklist.intopia.digital/
https://webaim.org/standards/wcag/checklist
https://www.a11yproject.com/checklist/
https://www.gerireid.com/WCAG-POUR-cards.pdf
Pro programátory:
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
Pro grafiky – plugin do Figmy:
https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker
Smysluplná debata