Zakaj so dostopni gumbi pomembni
Dostopni gumbi prispevajo k vključujočemu spletnemu okolju in izboljšujejo naslednje:
- Uporabniška izkušnja: Zagotavlja, da lahko vsi uporabniki, vključno s tistimi s posebnimi potrebami, nemoteno komunicirajo z vašim spletnim mestom.
- Uspešnost SEO: Skladnost s posebnimi potrebami je v skladu s smernicami iskalnika in izboljšuje vaše uvrstitve.
- Pravna skladnost: Dostopni gumbi vam pomagajo izpolniti standarde WCAG in ADA ter se izogniti morebitnim tožbam.
Vodnik po korakih za dodajanje dostopnih gumbov
1. korak: izberite besedilo desnega gumba
Besedilo gumba mora biti jedrnato in opisno ter označevati dejanje, ki ga izvaja. Izogibajte se nejasnim oznakam, kot sta »Kliknite tukaj« ali »Pošlji«.
- dober primer: "Prenesi poročilo"
- slab primer: "Kliknite tukaj"
2. korak: zagotovite pravilno strukturo HTML
Za ustvarjanje gumbov uporabite semantični HTML. The <button> element je idealen, saj se lahko izvorno fokusira in dobro deluje s podpornimi tehnologijami.
Več o tem
3. korak: Dodajte atribute ARIA, kjer je to potrebno
Atributi ARIA lahko izboljšajo dostopnost z zagotavljanjem dodatnega konteksta bralnikom zaslona. Uporaba aria-label or aria-labelledby za razjasnitev funkcij gumbov, kadar je to potrebno.
Predloži
4. korak: Zagotovite navigacijo s tipkovnico
Dostopne gumbe je treba upravljati prek navigacijske tipkovnice. Preizkusite svoje spletno mesto z Tab ključ za preverjanje delovanja gumba.
5. korak: preizkusite barvni kontrast
Zagotovite zadosten barvni kontrast med besedilom gumba in ozadjem. Uporabite orodja, kot je WAVE za preverjanje skladnosti s standardi WCAG.
| Barva besedila gumba | Barva ozadja | Kontrastno razmerje | Skladno |
|---|---|---|---|
| #FFFFFF (bela) | #000000 (črna) | 21:1 | Da |
| #FFFFFF (bela) | #AAAAAA (siva) | 3:1 | Ne |
6. korak: Izkoristite vtičnik za dostopnost OneTap
Naš OneTap Accessibility Plugin poenostavlja postopek ustvarjanja dostopnih gumbov. Njegove lastnosti vključujejo:
- Samodejna nastavitev kontrasta za gumbe.
- Orodja za testiranje navigacije s tipkovnico.
- Preverjanja skladnosti v realnem času.
Najboljše prakse za dostopne gumbe
- Poskrbite, da bodo gumbi v stanju izostritve za boljšo vidljivost med navigacijo s tipkovnico.
- Izogibajte se zanašanju samo na barvo za prenos stanj gumbov (npr. uporabite oznake ali ikone).
- Gumbi naj bodo dovolj veliki za enostavno interakcijo na mobilnih napravah.
Pogosta vprašanja: Dostopni gumbi
Kaj naredi gumb dostopen?
Dostopen gumb je tisti, po katerem je mogoče krmariti s tipkovnico, ki je združljiv z bralnikom zaslona in ima zadosten kontrast ter opisno besedilo.
Kako lahko preizkusim dostopnost svojih gumbov?
Uporabljajte orodja, kot so WAVE ali OneTap Accessibility Plugin za prepoznavanje in odpravljanje težav.
Zakaj je barvni kontrast pomemben za gumbe?
Visok kontrast zagotavlja, da lahko slabovidni uporabniki berejo besedilo gumbov in učinkovito komunicirajo z vašim spletnim mestom.
Kako OneTap pomaga pri dostopnih gumbih?
OneTap ponuja analizo v realnem času, samodejno prilagajanje kontrasta in preverjanje skladnosti, da je ustvarjanje gumbov brezhibno in dostopno.
Ali moram uporabiti atribute ARIA za vse gumbe?
Ne vedno. Atributi ARIA so potrebni le, kadar je potreben dodaten kontekst, na primer za nestandardne funkcije gumbov.
