Krátky, názorovo vyhranený checklist pre prístupné webové tlačidlá

Problém s radami o prístupnosti tlačidiel

Väčšina odporúčaní k prístupnosti tlačidiel spadá do dvoch táborov: buď ide o 40-stranový výklad WCAG, ktorý nikto nečíta, alebo o neurčité odporúčanie „urobte tlačidlá prístupné“ bez použiteľných krokov. Ani jedno nepomôže, keď vo štvrtok nasadzujete novú funkciu.

Tento checklist pokrýva päť najčastejších zlyhaní prístupnosti tlačidiel, ktoré vídame v produkcii. Neurobí z vás experta na WCAG, ale zachytí problémy, ktoré používateľov skutočne ovplyvňujú.

1. Pre tlačidlá používajte element button

Ak sa niečo správa ako tlačidlo, malo by to byť element <button>. Nie <div> s onclick, nie <span> s role="button", nie <a> s href="#" a preventDefault.

Element <button> vám dáva klávesovú navigáciu, správu zamerania a oznámenia pre čítačky obrazovky zadarmo. Keď použijete <div>, všetko toto budujete odznova — a urobíte v tom chybu.

Jediná výnimka: ak akcia naviguje na novú stránku alebo mení URL, použite element <a>. Odkazy a tlačidlá sú sémanticky odlišné. Používatelia čítačiek obrazovky sa pohybujú podľa typu elementu a očakávajú, že tlačidlá vykonávajú akcie a odkazy navigujú.

2. Urobte cieľovú plochu aspoň 44×44 pixelov

WCAG 2.5.5 (úroveň AAA) vyžaduje, aby interaktívne elementy mali minimálnu veľkosť cieľa 44×44 CSS pixelov. Nejde o vizuálnu veľkosť — ide o klikateľnú plochu.

Môžete mať malé vizuálne tlačidlo s dostatočným odsadením alebo môžete rozšíriť cieľovú plochu pomocou pseudo-elementu. Dôležité je, aby používateľ nemusel mieriť presne.

Mobilní používatelia, ľudia s motorickými obmedzeniami a ktokoľvek, kto používa zariadenie v pohybe, malé ciele minie. Ikonové tlačidlo s veľkosťou 24×24 pixelov môže vyzerať čisto, ale z pohľadu použiteľnosti zlyháva.

3. Poskytnite viditeľné stavy zamerania, ktoré nie sú len predvolené nastavenia prehliadača

Predvolený krúžok zamerania v prehliadači je lepší než nič, ale medzi prehliadačmi je nekonzistentný a na niektorých pozadiach často neviditeľný. Potrebujete vlastný stav zamerania, ktorý funguje vo vašom dizajnovom systéme.

Dobrý indikátor zamerania má tri vlastnosti:

• Vysoký kontrast: aspoň 3:1 voči susedným farbám
• Viditeľný odstup: nie je skrytý vlastným okrajom alebo pozadím tlačidla
• Konzistentný tvar: používatelia by ho mali rozpoznať ako indikátor zamerania naprieč vaším rozhraním

Nepoužívajte outline: none, ak ho nenahradíte niečím lepším. A nerobte stavy zamerania také nenápadné, že ich vidíte iba vy v dokonalých svetelných podmienkach.

4. Píšte popisy tlačidiel, ktoré dávajú zmysel aj mimo kontextu

Používatelia čítačiek obrazovky sa často pohybujú skákaním medzi tlačidlami. Keď to robia, počujú zoznam popisov tlačidiel bez okolitého kontextu.

Tlačidlo označené „Zistiť viac“ je v takom zozname nepoužiteľné. Rovnako aj „Kliknite sem“ alebo „Odoslať“. Popis by mal opisovať akciu: „Stiahnuť checklist prístupnosti“, „Prihlásiť sa na odber aktualizácií“, „Odstrániť tento komentár“.

Ak váš dizajn vyžaduje krátky vizuálny popis, použite aria-label na poskytnutie opisnej alternatívy. Lepšie riešenie je však písať popisy, ktoré fungujú pre každého.

Pri tlačidlách iba s ikonou je aria-label povinné. Tlačidlo iba s ikonou lupy potrebuje aria-label="Search" alebo ekvivalentný text. Ikona nie je pre čítačky obrazovky prístupná.

5. Zabezpečte dostatočný farebný kontrast

WCAG 2.1 vyžaduje kontrastný pomer aspoň 4,5:1 pre bežný text a 3:1 pre veľký text (18pt alebo 14pt tučné). Popisy tlačidiel sú zvyčajne bežný text.

Svetlosivý text na bielom tlačidle neprejde. Bledomodrá na svetlomodrom pozadí neprejde. Tieto kombinácie môžu pôsobiť sofistikovane, ale vylučujú používateľov so slabým zrakom, farbosleposťou alebo kohokoľvek, kto sa pozerá na obrazovku na ostrom slnku.

Kontrolu kontrastu používajte počas návrhu, nie až po spustení. Oprava problémov s kontrastom v produkcii je drahá, pretože často vyžaduje zmeny v dizajnovom systéme.

Ak pracujete s nástrojmi na spracovanie obrázkov, spracovanie na strane klienta môže pomôcť zachovať súkromie pri generovaní prístupných vizuálnych assetov — najmä pri testovaní farebných kombinácií alebo generovaní stavov náhľadu.

Čo tento checklist nepokrýva

Tento zoznam je zámerne neúplný. Nepokrýva sémantiku deaktivovaného stavu, stavy načítavania, spracovanie chýb ani zložité vzory tlačidiel, ako sú rozdelené tlačidlá alebo spúšťače rozbaľovacích ponúk. Tieto vzory potrebujú vlastné odporúčania.

Nepokrýva ani širšiu otázku, kedy použiť tlačidlo namiesto iných interaktívnych elementov. Na to potrebujete rozumieť sémantickému HTML a stromu prístupnosti — témam, ktoré si zaslúžia vlastné články.

Pokrýva však ľahko dosiahnuteľné opravy: chyby, ktoré sa objavujú takmer v každom code review, ovplyvňujú najviac používateľov a najľahšie sa opravujú počas vývoja.

Ako to integrovať do pracovného postupu

Checklisty prístupnosti fungujú iba vtedy, keď sú súčasťou vývojového procesu, nie keď sa pridajú až dodatočne. Ako to dosiahnuť:

V dizajne: pridajte do dizajnových súborov stavy zamerania a anotácie cieľovej plochy. Nenechávajte vývojárov, aby ich hádali.

V code review: kontrolujte elementy <button>, aria-label na ikonových tlačidlách a CSS pre stavy zamerania. Dajú sa rýchlo odhaliť.

Pri testovaní: prejdite rozhraním pomocou klávesnice. Ak sa k tlačidlu neviete dostať alebo nevidíte, kde je zameranie, nedokážu to ani vaši používatelia.

V dokumentácii: zahrňte požiadavky na prístupnosť tlačidiel do svojej knižnice komponentov. Urobte správnu vec jednoduchšou než tú nesprávnu.

Ak ladíte produkčné problémy, nástroje na kontrolu HTTP hlavičiek a presmerovaní vám môžu pomôcť pochopiť, ako asistenčné technológie interpretujú váš markup — najmä pri riešení správy zamerania po navigácii.

Cena za preskočenie tejto práce

Neprístupné tlačidlá nielenže nespĺňajú WCAG — rozbíjajú pracovné postupy. Používateľ, ktorý nevie kliknúť na tlačidlo odoslania, nevie dokončiť formulár. Používateľ, ktorý nevidí stavy zamerania, nevie navigovať klávesnicou. Používateľ, ktorý nerozozná text tlačidla od pozadia, si nevie prečítať popis.

Nie sú to okrajové prípady. Približne 15 % svetovej populácie má určitú formu zdravotného znevýhodnenia a dočasné obmedzenia (pokazená myš, ostré slnko, držanie bábätka) nakoniec postihnú každého.

Dobrá správa je, že prístupnosť tlačidiel je väčšinou vyriešený problém. Nemusíte vymýšľať nové vzory ani čakať na podporu prehliadačov. Stačí správne používať platformu a testovať svoju prácu.

Kľúčové zistenia

• Používajte elementy <button> pre tlačidlá a elementy <a> pre navigáciu — sémantický rozdiel je pre asistenčné technológie dôležitý
• Zabezpečte, aby cieľové plochy mali aspoň 44×44 CSS pixelov, aby vyhovovali motorickým obmedzeniam a mobilným používateľom
• Poskytnite viditeľné, vysoko kontrastné stavy zamerania, ktoré fungujú naprieč vaším dizajnovým systémom
• Píšte popisy tlačidiel, ktoré dávajú zmysel aj pri samostatnom prečítaní, a používajte aria-label pre tlačidlá iba s ikonou
• Kontrolujte farebný kontrast počas návrhu, nie až po spustení, aby ste sa vyhli drahým dodatočným úpravám

FAQ

Q: Môžem použiť role="button" na <div>, ak pridám ovládače klávesnice?

A: Môžete, ale nemali by ste. Budete musieť ručne riešiť Enter, Space, správu zamerania a deaktivované stavy — a nevyhnutne na niečo zabudnete. Element <button> toto všetko robí správne už predvolene. Použite ho.

Q: A čo tlačidlá, ktoré prepínajú stav, napríklad tlačidlo prehrávania/pozastavenia?

A: Použite aria-pressed="true" alebo aria-pressed="false" na označenie aktuálneho stavu. Popis tlačidla by mal zároveň odrážať akciu, ktorá sa stane po kliknutí („Pozastaviť“ počas prehrávania, „Prehrať“ pri pozastavení), nie aktuálny stav. Používatelia čítačiek obrazovky potrebujú vedieť, čo tlačidlo urobí, nie v akom stave je systém.

Q: Musia deaktivované tlačidlá spĺňať požiadavky na kontrast?

A: WCAG 2.1 vyjímá deaktivované ovládacie prvky z požiadaviek na kontrast (1.4.3), ale je to sporné. Deaktivované tlačidlá so slabým kontrastom sa ťažko vnímajú každému. Ak sa chystáte zobraziť deaktivované tlačidlo, urobte ho čitateľné. Ešte lepšie: skryte ho alebo vysvetlite, prečo je deaktivované.

Q: Ako otestujem prístupnosť tlačidiel bez čítačky obrazovky?

A: Použite klávesnicu. Prejdite rozhraním pomocou klávesu Tab a overte, že sa dostanete ku každému tlačidlu, vidíte, kde je zameranie, a viete tlačidlá aktivovať klávesom Enter alebo Space. Zachytí to väčšinu problémov. Na hlbšie testovanie použite accessibility inspector v Chrome alebo Firefox DevTools a skontrolujte vypočítanú rolu a popis.

Q: Aký je rozdiel medzi aria-label a aria-labelledby?

A: aria-label poskytuje textový reťazec priamo. aria-labelledby odkazuje na ID iného elementu, ktorého textový obsah sa stane popisom. Použite aria-labelledby, keď text popisu už existuje inde v DOM. Použite aria-label, keď potrebujete poskytnúť popis, ktorý nie je viditeľný na obrazovke.

Zdroje

• Web Content Accessibility Guidelines (WCAG) 2.1 — W3C
• Inclusive Components: Toggle Buttons — Heydon Pickering
• The ARIA Button Pattern — W3C ARIA Authoring Practices Guide
• WebAIM: Keyboard Accessibility — WebAIM