A gomb egy olyan widget, amely lehetővé teszi a felhasználók számára egy művelet vagy esemény elindítását, például űrlap elküldését, párbeszédpanel megnyitását, művelet megszakítását vagy törlési művelet végrehajtását.
A szokásos gomb widgeten kívül a WAI-ARIA két másik típusú gombot is támogat:
A váltógombok a funkciójuk szerint hasonlóak a jelölőnégyzetekhez. Bináris bemenetként szolgálhatnak, de lehetővé teszik az implementációk számára egy harmadik, közbülső állapot támogatását is. A jelölőnégyzetek bejelölhetők vagy nem bejelöltté tehetők, és opcionálisan részlegesen bejelölt állapotot is felvehetnek. A váltógombok hasonló módon lenyomhatók vagy nem lenyomottá tehetők, és opcionálisan részlegesen lenyomott állapotot is lehetővé tesznek.
Mivel mind a kapcsoló, a jelölőnégyzet és a váltógomb is kínál bináris bemenetet, gyakran funkcionálisan felcserélhetők. Ki kell választani azt a megoldást, amely a legjobban illeszkedik a felhasználói felület látványtervéhez és szemantikájához. Például vannak olyan körülmények, amikor a ki- és bekapcsolás szemantikája könnyebben érthető a kisegítő technológia felhasználói számára, mint a bejelölt vagy nem bejelölt szemantika, és fordítva.
Jelen fejezet célja olyan váltógomb megoldás bemutatása, amelyet jól lehet kezelni csak billentyűzettel is és a képernyőolvasó program a váltógomb állapotát jól érzékeli és azt megfelelően fel is olvassa.
A bemutatandó példában egy öntözőrendszer vezérlési felülete található. A példa váltógombokat és jelölőnégyzeteket tartalmaz. Ez a két elem bizonyos helyzetekben felcserélhető, hiszen a funkciójuk hasonló.
Az Öntözőkészülék bekapcsolása
váltógombbal elindítható az öntözés. Az aktív szolgáltatások lentebb kiírásra kerülnek.
Az Öntözési időszak részben a reggel
, a délelőtt
, a délután
és az este
váltógombok lenyomásával vagy felengedésével (nem lenyomottá tételével) szabályozható az öntözési időszak.
Az öntözött terület megadása részben a Belső kert
és a Külső kert
jelölőnégyzetekkel határozható meg az öntözési terület.
Ha azt szeretné elérni, hogy a kisegítő technológiák egy gombot vagy más elemet váltógombnak lássanak, akkor használjon aria-pressed attribútumot az elemen belül. Például ha az öntözőkészülék működtetése részben megtalálható Öntözőkészülék bekapcsolása
váltógomb le van nyomva, akkor az aria-pressed attribútum true értéke jelezheti a kisegítő technológiák számára, hogy az elem lenyomott állapotban van, vagyis az öntözés aktív.
Fontos: kritikus fontosságú, hogy a váltógombon lévő címke ne változzon, ha a gomb állapota megváltozik. A példában az Öntözőkészülék bekapcsolása
gomb címkeszövege állandó, hiszen csak az az információ változik, hogy váltógomb lenyomva
vagy váltógomb
. Itt a sima váltógomb
felolvasás a nem lenyomott állapotot jelenti.
Ha az lenne a terv, hogy a gombcímke Öntözőkészülék bekapcsolása
szövegről Öntözőkészülék kikapcsolása
szövegre változzon, akkor itt az aria-pressed attribútumra nem lenne szükség.
Bár az itt bemutatandó példában két állapotot vehet fel a váltógomb, a togglebutton elemnek három állapota lehetséges az aria-pressed attribútumban. A lehetséges állapotok a "false", "mixed" és "true".
Az elemek között a Tab billentyűvel lehet lépkedni, illetve a váltógombok állapotát meg lehet változtatni az Enter vagy a Szóköz billentyűvel.
A button szerep a <span> elemet gombként azonosítja.
A <span> elemben a tabindex="0" behelyezi a gombot az oldal tabsorrendjébe.
Az aria-pressed="false" a gombot váltógombként azonosítja.
Azt jelzi, hogy a váltógomb nincs lenyomva.
Az aria-pressed="true" a gombot váltógombként azonosítja.
Azt jelzi, hogy a váltógomb le van nyomva.
Azért, hogy a képernyőolvasók ne jelentsék be azokat az elemeket amelyek a vizuális megjelenítésre szolgálnak, az aria-hidden="true" attribútum segítségével ezek elrejtésre kerülnek.