Kratak kontrolni popis s jasnim stavom za pristupačne web gumbe

Problem sa savjetima o pristupačnosti gumba

Većina smjernica za pristupačnost gumba spada u dvije skupine: ili je riječ o interpretaciji WCAG-a na 40 stranica koju nitko ne čita, ili o nejasnom prijedlogu da se "gumbi učine pristupačnima" bez provedivih koraka. Ni jedno ni drugo ne pomaže kada u četvrtak isporučujete novu funkcionalnost.

Ovaj kontrolni popis pokriva pet najčešćih neuspjeha u pristupačnosti gumba koje vidimo u produkciji. Neće vas učiniti stručnjakom za WCAG, ali će uhvatiti probleme koji doista utječu na korisnike.

1. Koristite element button za gumbe

Ako se ponaša kao gumb, trebao bi biti element <button>. Ne <div> s onclick, ne <span> s role="button", ne <a> s href="#" i preventDefault.

Element <button> daje vam navigaciju tipkovnicom, upravljanje fokusom i najave čitača zaslona bez dodatnog rada. Kada upotrebljavate <div>, sve to ponovno gradite od nule — i pogriješit ćete.

Jedina iznimka: ako radnja vodi na novu stranicu ili mijenja URL, upotrijebite element <a>. Poveznice i gumbi semantički su različiti. Korisnici čitača zaslona navigiraju prema vrsti elementa i očekuju da gumbi izvršavaju radnje, a poveznice navigiraju.

2. Neka ciljno područje bude najmanje 44×44 piksela

WCAG 2.5.5 (razina AAA) zahtijeva da interaktivni elementi imaju minimalnu veličinu ciljnog područja od 44×44 CSS piksela. Ovdje nije riječ o vizualnoj veličini — nego o području koje se može kliknuti.

Možete imati mali vizualni gumb s odgovarajućim odmakom ili možete proširiti ciljno područje pseudo-elementom. Važno je da korisnik ne mora precizno ciljati.

Mobilni korisnici, osobe s motoričkim oštećenjima i svatko tko upotrebljava uređaj u pokretu promašit će mala ciljna područja. Ikonski gumb od 24×24 piksela može izgledati uredno, ali je neuspjeh upotrebljivosti.

3. Osigurajte vidljiva stanja fokusa koja nisu samo zadane postavke preglednika

Zadani prsten fokusa u pregledniku bolji je nego ništa, ali nije dosljedan među preglednicima i često je nevidljiv na određenim pozadinama. Trebate prilagođeno stanje fokusa koje funkcionira u vašem dizajnerskom sustavu.

Dobar indikator fokusa ima tri svojstva:

• Visok kontrast: najmanje 3:1 u odnosu na susjedne boje
• Vidljiv odmak: nije skriven vlastitim obrubom ili pozadinom gumba
• Dosljedan oblik: korisnici bi ga trebali prepoznati kao indikator fokusa u cijelom vašem sučelju

Nemojte uklanjati obris s outline: none bez zamjene nečim boljim. I nemojte stanja fokusa učiniti toliko suptilnima da ih samo vi možete vidjeti u savršenim uvjetima osvjetljenja.

4. Pišite oznake gumba koje imaju smisla izvan konteksta

Korisnici čitača zaslona često navigiraju preskakanjem između gumba. Kada to čine, čuju popis oznaka gumba bez okolnog konteksta.

Gumb označen kao "Saznajte više" na tom je popisu beskoristan. Isto vrijedi za "Kliknite ovdje" ili "Pošalji". Oznaka bi trebala opisivati radnju: "Preuzmi kontrolni popis pristupačnosti", "Pretplati se na ažuriranja", "Izbriši ovaj komentar".

Ako vaš dizajn zahtijeva kratku vizualnu oznaku, upotrijebite aria-label kako biste osigurali opisnu alternativu. No bolje je rješenje pisati oznake koje funkcioniraju za sve.

Za gumbe koji imaju samo ikonu, aria-label je obavezan. Gumb samo s ikonom povećala treba aria-label="Search" ili ekvivalentan tekst. Ikona nije pristupačna čitačima zaslona.

5. Osigurajte dovoljan kontrast boja

WCAG 2.1 zahtijeva omjer kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst (18pt ili 14pt podebljano). Oznake gumba obično su običan tekst.

Svijetlosivi tekst na bijelom gumbu ne prolazi. Blijedoplava na svijetloplavoj pozadini ne prolazi. Te kombinacije mogu izgledati sofisticirano, ali isključuju korisnike sa slabovidnošću, sljepoćom za boje ili bilo koga tko zaslon gleda na jakom suncu.

Upotrijebite alat za provjeru kontrasta tijekom dizajna, ne nakon lansiranja. Ispravljanje problema s kontrastom u produkciji skupo je jer često zahtijeva promjene dizajnerskog sustava.

Ako radite s alatima za obradu slika, obrada na strani klijenta može pomoći u očuvanju privatnosti pri generiranju pristupačnih vizualnih materijala — osobito pri testiranju kombinacija boja ili generiranju stanja pregleda.

Što ovaj kontrolni popis ne pokriva

Ovaj je popis namjerno nepotpun. Ne pokriva semantiku onemogućenih stanja, stanja učitavanja, rukovanje pogreškama ni složene obrasce gumba poput podijeljenih gumba ili okidača padajućih izbornika. Ti obrasci trebaju vlastite smjernice.

Također ne pokriva šire pitanje kada upotrijebiti gumb umjesto drugih interaktivnih elemenata. Za to trebate razumjeti semantički HTML i stablo pristupačnosti — teme koje zaslužuju vlastite članke.

Ono što pokriva jest najlakše rješiv dio: pogreške koje se pojavljuju u gotovo svakoj provjeri koda, koje utječu na najviše korisnika i koje je najlakše ispraviti tijekom razvoja.

Kako to uključiti u svoj tijek rada

Kontrolni popisi za pristupačnost djeluju samo ako su dio razvojnog procesa, a ne nešto što se naknadno dodaje. Evo kako to postići:

U dizajnu: dodajte stanja fokusa i napomene o ciljnim područjima u svoje dizajnerske datoteke. Nemojte ostaviti programerima da to pogađaju.

U provjeri koda: provjerite postoje li elementi <button>, aria-label na ikonskim gumbima i CSS za stanja fokusa. To se brzo uočava.

U testiranju: prođite kroz sučelje tipkovnicom pomoću tipke Tab. Ako ne možete doći do gumba ili ne vidite gdje je fokus, ne mogu ni vaši korisnici.

U dokumentaciji: uključite zahtjeve za pristupačnost gumba u svoju biblioteku komponenti. Olakšajte ispravno rješenje u odnosu na pogrešno.

Ako otklanjate probleme u produkciji, alati za pregled HTTP zaglavlja i preusmjeravanja mogu vam pomoći razumjeti kako pomoćne tehnologije interpretiraju vaš markup — osobito pri rješavanju problema s upravljanjem fokusom nakon navigacije.

Cijena preskakanja ovog rada

Nepristupačni gumbi ne samo da ne zadovoljavaju WCAG usklađenost — oni prekidaju tijekove rada. Korisnik koji ne može kliknuti gumb za slanje ne može dovršiti obrazac. Korisnik koji ne može vidjeti stanja fokusa ne može navigirati tipkovnicom. Korisnik koji ne može razlikovati tekst gumba od pozadine ne može pročitati oznaku.

To nisu rubni slučajevi. Otprilike 15% svjetske populacije ima neki oblik invaliditeta, a privremena ograničenja (pokvaren miš, jako sunce, držanje bebe) na kraju pogađaju svakoga.

Dobra je vijest da je pristupačnost gumba uglavnom riješen skup problema. Ne morate izmišljati nove obrasce niti čekati podršku preglednika. Samo trebate pravilno upotrijebiti platformu i testirati svoj rad.

Ključne pouke

• Upotrebljavajte elemente <button> za gumbe i elemente <a> za navigaciju — semantička razlika važna je za pomoćne tehnologije
• Osigurajte da su ciljna područja najmanje 44×44 CSS piksela kako bi odgovarala osobama s motoričkim oštećenjima i mobilnim korisnicima
• Osigurajte vidljiva stanja fokusa visokog kontrasta koja funkcioniraju u cijelom vašem dizajnerskom sustavu
• Pišite oznake gumba koje imaju smisla kada se čitaju zasebno i upotrebljavajte aria-label za gumbe samo s ikonama
• Provjeravajte kontrast boja tijekom dizajna, ne nakon lansiranja, kako biste izbjegli skupe naknadne prilagodbe

FAQ

Q: Mogu li upotrijebiti role="button" na <div> ako dodam rukovatelje tipkovnicom?

A: Možete, ali ne biste trebali. Morat ćete ručno obraditi Enter, razmaknicu, upravljanje fokusom i onemogućena stanja — i neizbježno ćete nešto propustiti. Element <button> sve to ispravno radi prema zadanim postavkama. Upotrijebite ga.

Q: Što je s gumbima koji mijenjaju stanje, poput gumba za reprodukciju/pauzu?

A: Upotrijebite aria-pressed="true" ili aria-pressed="false" za označavanje trenutačnog stanja. Oznaka gumba također bi trebala odražavati radnju koja će se dogoditi klikom ("Pauziraj" tijekom reprodukcije, "Reproduciraj" tijekom pauze), a ne trenutačno stanje. Korisnici čitača zaslona trebaju znati što će gumb učiniti, a ne u kojem je stanju sustav.

Q: Moraju li onemogućeni gumbi zadovoljiti zahtjeve kontrasta?

A: WCAG 2.1 izuzima onemogućene kontrole iz zahtjeva kontrasta (1.4.3), ali to je kontroverzno. Onemogućene gumbe s lošim kontrastom svima je teško uočiti. Ako ćete prikazati onemogućeni gumb, učinite ga čitljivim. Još bolje, sakrijte ga ili objasnite zašto je onemogućen.

Q: Kako mogu testirati pristupačnost gumba bez čitača zaslona?

A: Upotrijebite tipkovnicu. Prođite kroz sučelje tipkom Tab i provjerite možete li doći do svakog gumba, vidjeti gdje je fokus i aktivirati gumbe tipkom Enter ili razmaknicom. Time se otkriva većina problema. Za dublje testiranje upotrijebite inspektor pristupačnosti u Chrome ili Firefox DevTools kako biste provjerili izračunatu ulogu i oznaku.

Q: Koja je razlika između aria-label i aria-labelledby?

A: aria-label izravno daje tekstualni niz. aria-labelledby referencira ID drugog elementa čiji tekstualni sadržaj postaje oznaka. Upotrijebite aria-labelledby kada tekst oznake već postoji negdje drugdje u DOM-u. Upotrijebite aria-label kada trebate pružiti oznaku koja nije vidljiva na zaslonu.

Izvori

• 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