Miért fontosak az akadálymentesített gombok?
Az akadálymentesített gombok hozzájárulnak egy befogadó webes környezet kialakításához, és a következőket javítják:
- Felhasználói tapasztalat: Biztosítja, hogy minden felhasználó, beleértve a fogyatékkal élőket is, zökkenőmentesen tudjon kommunikálni az oldaladdal.
- SEO teljesítmény: Az akadálymentesítési megfelelőség összhangban van a keresőmotorok irányelveivel, javítva a rangsorolást.
- A jogszabályok betartása: Az akadálymentesített gombok segítenek megfelelni a WCAG és az ADA szabványoknak, elkerülve a potenciális pereket.
Lépésről lépésre útmutató az akadálymentes gombok hozzáadásához
1. lépés: Válassza ki a megfelelő gombszöveget
A gomb szövegének tömörnek és leíró jellegűnek kell lennie, jelezve az általa végrehajtott műveletet. Kerülje a homályos feliratokat, mint például a „Kattintson ide” vagy a „Küldés”.
- Jó példa: "Jelentés letöltése"
- Rossz példa: „Kattintson ide”
2. lépés: A megfelelő HTML-struktúra biztosítása
Szemantikus HTML használatával hozhat létre gombokat. <button> elem ideális, mivel natívan fókuszálható, és jól működik a segítő technológiákkal.
Tudj meg többet
3. lépés: ARIA attribútumok hozzáadása szükség szerint
Az ARIA attribútumok további kontextust biztosítanak a képernyőolvasók számára, így javíthatják az akadálymentességet. aria-label or aria-labelledby a gombok funkcióinak tisztázása érdekében, amikor szükséges.
Küldés
4. lépés: Billentyűzetes navigáció biztosítása
Az akadálymentesített gomboknak billentyűzettel navigálhatónak kell lenniük. Tesztelje webhelyét a következővel: Tab kulcs a gomb működésének ellenőrzéséhez.
5. lépés: Tesztelje a színkontrasztot
Biztosítson megfelelő színkontrasztot a gomb szövege és a háttér között. Használjon olyan eszközöket, mint a HULLÁM a WCAG szabványoknak való megfelelés ellenőrzése érdekében.
| Gomb szöveg színe | Háttérszín | Kontraszt Arány | kompatibilis |
|---|---|---|---|
| #FFFFFF (Fehér) | #000000 (Fekete) | 21:1 | Igen |
| #FFFFFF (Fehér) | #AAAAAA (Szürke) | 3:1 | Nem |
6. lépés: Használja ki a OneTap akadálymentesítési bővítményt
Az OneTap akadálymentesítési beépülő modul leegyszerűsíti az akadálymentes gombok létrehozásának folyamatát. Jellemzői többek között:
- Automatikus kontrasztbeállítás a gombokhoz.
- Billentyűzet navigáció tesztelő eszközök.
- Valós idejű megfelelőségi ellenőrzések.
Akadálymentes gombok bevált gyakorlatai
- A billentyűzettel való navigáció során a jobb láthatóság érdekében ügyeljen arra, hogy a gombok fókuszban legyenek.
- Kerüld a kizárólag színekre való támaszkodást a gombok állapotának jelzéséhez (pl. címkék vagy ikonok használata).
- A gombok mérete legyen elég nagy a mobileszközökön való egyszerű interakcióhoz.
GYIK: Akadálymentes gombok
Mi tesz egy gombot akadálymentessé?
Az akadálymentesített gomb olyan gomb, amely billentyűzettel navigálható, képernyőolvasóval kompatibilis, megfelelő kontraszttal és leíró szöveggel rendelkezik.
Hogyan tesztelhetem a gombjaim hozzáférhetőségét?
Használjon olyan eszközöket, mint a HULLÁM vagy a OneTap akadálymentesítési beépülő modul a problémák azonosítására és megoldására.
Miért fontos a színkontraszt a gomboknál?
A nagy kontraszt biztosítja, hogy a látássérült felhasználók is el tudják olvasni a gombok szövegét, és hatékonyan tudjanak interakcióba lépni a webhelyeddel.
Hogyan segít a OneTap az akadálymentes gombok kezelésében?
A OneTap valós idejű elemzést, automatikus kontrasztbeállításokat és megfelelőségi ellenőrzéseket kínál, hogy a gombok létrehozása zökkenőmentes és könnyen hozzáférhető legyen.
ARIA attribútumokat kell használnom minden gombhoz?
Nem mindig. Az ARIA attribútumok csak akkor szükségesek, ha további kontextusra van szükség, például nem szabványos gombfunkciókhoz.
