A WAI-ARIA a jelölőnégyzet widgetek két típusát támogatja: A kétállapotú jelölőnégyzetek két választási lehetőség (bejelölt és nem bejelölt állapot) közti váltást tesznek lehetővé. A háromállapotú jelölőnégyzetek pedig egy további, harmadik lehetőséget (részlegesen bejelölt állapot) is biztosítanak.
Szoftvertelepítőkben gyakran találkozhatunk azzal a megoldással, hogy egyetlen háromállapotú jelölőnégyzet szolgál a telepítési lehetőségek egy-egy csoportjának állapotmegjelenítésére és vezérlésére. A csoporton belül pedig az egyes telepítési lehetőségek kétállapotú jelölőnégyzetekkel kapcsolhatóak be vagy ki.
A háromállapotú jelölőnégyzet segítségével a felhasználó egyetlen művelettel átválthatja a csoportban lévő összes lehetőség állapotát:
Jelen fejezet célja olyan háromállapotú jelölőnégyzet komponens bemutatása, amely képernyőolvasó program és csak billentyűzet használata esetén is jól navigálható, a komponens elemei felolvastathatók, bejelölhetők, illetve a bejelöltségük megszüntethető. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Checkbox Example (Mixed-state) eleme szolgált kiindulásként, annak módosított, magyar nyelvű és magyar formátumú változata szerepel a komponens gyakorlati példájában.
Ez a példa a jelölőnégyzet-minta használatát mutatja be egy háromállapotú vagy vegyes állapotú jelölőnégyzet, más néven háromállású kapcsoló létrehozásához. Ebben a megvalósításban a vegyes állapotú jelölőnégyzet a szabványos HTML jelölőnégyzetek egy csoportjának állapotát jelöli.
Ha a csoportban egyetlen jelölőnégyzet sincs bejelölve, akkor a vegyes állapotú jelölőnégyzet nincs bejelölve, ha pedig a csoport összes tagja be van jelölve, akkor a vegyes állapotú jelölőnégyzet is be van jelölve. Ha a csoport bejelölt és nem bejelölt jelölőnégyzeteket is tartalmaz, akkor a vegyes állapotú jelölőnégyzet részben bejelölt állapotban van. A háromállapotú jelölőnégyzet módosításával megváltoztatható a csoportban lévő jelölőnégyzetek állapota.
Annak érdekében, hogy a kisegítő technológiát használók megértsék, hogy a virágcsokorral kapcsolatos, összetartozó jelölőnégyzetek csoportjáról van szó, a jelölőnégyzetek egy <fieldset> elembe vannak foglalva, amelyet egy <legend> elem címkéz meg.
Annak érzékeltetésére, hogy a jelölőnégyzet aktiválható akár a címkére, akár magára a jelölőnégyzetre való kattintással, amikor az (egér)mutató a jelölőnégyzet vagy a címke fölé kerül, megváltozik a háttér színe, megjelenik egy keret, és a kurzor mutatóvá változik.
Mivel egyes rendszereken az átlátszó szegélyek láthatóvá válnak az operációs rendszer nagy kontrasztú beállításainak bekapcsolt állapotában, ezért az átlátszóság nem használható az éppen fókuszban lévő és a többi elem közti vizuális különbségtételre. Az átlátszóság használata helyett a fókuszban lévő elem vastagabb szegélyt kap, és emiatt lecsökken a belső margója (padding). Amikor egy elem fókuszba kerül, a szegélye 0-ról 2 képpontra változik, a belső kitöltése pedig 2 képponttal csökken. A fókusz elvesztésekor az elem szegélye 2 képpontról 0-ra változik, a kitöltés pedig 2 képponttal nő.
Annak érdekében, hogy a CSS-ben definiált SVG jelölőnégyzet-grafika szegélyeinek elegendő legyen a kontrasztaránya a háttérhez képest, amikor a nagy kontrasztú beállítások invertálják a színeket, a szegélyek színe szinkronban van tartva a szövegtartalom színével. Például a jelölőnégyzetek szegélyének színe úgy van beállítva, hogy megegyezzen a szöveg nagy kontrasztos módban használt előtérszínével. Ezt úgy érjük el, hogy a jelölőnégyzet megrajzolásához használt <rect> és <polyline> elemben szerepeltetjük a stroke
CSS-tulajdonságot, és ehhez a currentcolor
értéket adjuk meg. Ahhoz, hogy a jelölőnégyzet-grafika háttere megegyezzen a magas kontrasztú háttérszínnel, a <rect> elem fill-opacity
attribútumát nullára állítjuk. Ha ehelyett bizonyos konkrét színeket adnánk meg a stroke
és a fill
tulajdonságokhoz, ezek a színek nagy kontrasztú módban is változatlanok maradnának, ami elégtelen kontrasztarányhoz vezethet a jelölőnégyzet és a háttér között, vagy emiatt a jelölőnégyzet akár láthatatlanná is válhat, ha a színe megegyezik a nagy kontrasztú mód háttérszínével.
Megjegyzés: Az SVG elem forced-color-adjust
CSS tulajdonságának auto
értékűre kell beállítva lennie ahhoz, hogy magas kontrasztú módban frissüljön a currentcolor
értéke. Egyes böngészők esetén nem az auto
az alapértelmezett érték.
A checkbox szerep a <div> elemet jelölőnégyzetként azonosítja.
Ennek a <div> elemnek a gyermek szövegtartalma szolgál a jelölőnégyzet akadálymentes neveként.
A <div> elemben az tabindex="0" behelyezi a jelölőnégyzetet az oldal tabsorrendjébe.
A <div> elemben az aria-controls="[IDREFERENCIÁK]" a háromállapotú jelölőnégyzet alá rendelt, összetartozó jelölőnégyzeteket azonosítja.
A <div> elemben az aria-checked="false" a háromállapotú jelölőnégyzetet nem bejelölt állapotúnak jelzi.
Ekkor minden neki alárendelt jelölőnégyzet bejelöletlen állapotú.
A CSS-attribútumválasztók (pl. [aria-checked="false"]) a vizuális állapotok szinkronizálására szolgálnak az aria-checked attribútum értékével.
Az operációs rendszer és a böngésző magas kontrasztú beállításainak támogatása érdekében a jelölőnégyzet vizuális állapotjelzőjének létrehozása a CSS ::before pszeudo elem és a content tulajdonság használatával történik.
A <div> elemben az aria-checked="true" a háromállapotú jelölőnégyzetet bejelölt állapotúnak jelzi.
Ekkor minden neki alárendelt jelölőnégyzet bejelölt állapotú.
A CSS-attribútumválasztók (pl. [aria-checked="true"]) a vizuális állapotok szinkronizálására szolgálnak az aria-checked attribútum értékével.
Az operációs rendszer és a böngésző magas kontrasztú beállításainak támogatása érdekében a jelölőnégyzet vizuális állapotjelzőjének létrehozása a CSS ::before pszeudo elem és a content tulajdonság használatával történik.
A <div> elemben az aria-checked="mixed" a háromállapotú jelölőnégyzetet részben bejelölt állapotúnak jelzi.
Ekkor a neki alárendelt jelölőnégyzetek közül valahány nem bejelölt, a többi bejelölt állapotban van.
A CSS-attribútumválasztók (pl. [aria-checked="mixed"]) a vizuális állapotok szinkronizálására szolgálnak az aria-checked attribútum értékével.
Az operációs rendszer és a böngésző magas kontrasztú beállításainak támogatása érdekében a jelölőnégyzet vizuális állapotjelzőjének létrehozása a CSS ::before pszeudo elem és a content tulajdonság használatával történik.