A választógombcsoport olyan bejelölhető gombok, úgynevezett választógombok csoportja, amelyek közül egyszerre legfeljebb egy gomb lehet bejelölve. Néhány megvalósításban alapértelmezetten egyik választógomb sincs bejelölt állapotban, így a felhasználónak kell választania egy lehetőséget, ahhoz, hogy továbbléphessen.
Jelen fejezet célja olyan választógombcsoport bemutatása, amely képernyőolvasó programmal jól felolvastatható, csak billentyűzet használatával bejárható és kezelhető. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Radio Group komponens eleme szolgált kiindulásként, annak módosított, magyar nyelvű és magyar formátumú változata szerepel a választógombcsoport gyakorlati példájában.
Megjegyzés: A választógombcsoport-példák közül egy kerül bemutatásra. További választógombcsoport-mintákat talál, ha a bemutatandó példa oldalon a letöltés lehetőséget választja. A következő példák tölthetők le:
Az itt szereplő példa egy értékelést lehetővé tevő megoldás, amely bemutatja a választógombcsoport-mintát. Az értékelést a felhasználó által kiválasztott csillagok száma jelzi.
CSS használatával javítva lett a billentyűzet fókusz és az egérrel való rámutatás láthatósága. Ennek révén javult a fókusz észlelhetősége.
A fókuszkeret szélessége 2 pixel, és legalább 2 pixel távolság van a fókuszkeret és a csillagok szegélye között.
Amikor az egérkurzor a csillagok fölé kerül, akkor mutató alakúra vált, így egyértelműbb, hogy a csillagok interaktívak.
Annak érdekében, hogy a csillagok szegélyének és a fókuszkeretnek meglegyen a szükséges kontrasztaránya a háttérhez képest, amikor inverzé válnak a színek, a szegélyek színe összehangolásra kerül a szövegtartalom színével.
Az <svg> elemen belül a none szerep biztosítja, hogy a kisegítő technológiák ne értelmezzék képként vagy más szerepként az <svg> elemet.
A radiogroup szerep a <div> elemet egy választógombcsoport tárolójaként azonosítja.
A <div> elemen belül az aria-labelledby="id-rating-label" a választógombcsoport címkéjét tartalmazó elemre mutat.
A radio szerep a <g> elemet választógombként azonosítja.
A <g> elemen belül az aria-label="NÉV" a választógomb akadálymentes nevét határozza meg, amely azonosítja a választógombhoz társított csillagok számát (pl. "egy csillag", "két csillag", ...).
A tabindex="-1" fókuszálhatóvá teszi a <g> elemet, de az elem nem része az oldal tabsorrendjének. Ez lényegében a nem kijelölt választógombot jelenti. A választógombcsoport összes választógombjára vonatkozik, kivéve azt az egyet, amely megtalálható az oldal tabsorrendjében. Ebből következően a tabsorrendben lévő fókuszálható elem a kijelölt választógomb.
A <g> elenben a tabindex="0" fókuszálhatóvá teszi a választógombot, és belefoglalja az oldal tabsorrendjébe. Az éppen bejelölt választógombhoz van így beállítva a tabindex.
Az oldal betöltése után a választógombcsoport első választógombja kerül be a tabsorrendbe tabindex="0" attribútummal. Ilyenkor a Tab billentyűvel lépkedve a választógomb csoport első elemére kerül a billentyűzetfókusz.
Ha a választógombcsoportban már kiválasztásra került egy választógomb, akkor ez az elem kerül be az oldal tabsorrendjébe.
A <g> elemben az aria-checked="false" jelzi a kisegítő technológiának, hogy a választógomb nincs bejelölve.
A <g> elemben az aria-checked="true" jelzi a kisegítő technológiának, hogy a választógomb be van jelölve.