Bevezetés a WAI-ARIA szabvány használatába .2. rész

Cikksorozatom előző részében a WAI-ARIA szabvány segítségével definiált szemantikai szerepekről volt szó. Ebben a részben a WAI-ARIA által biztosított állapotjellemzéssel ismerkedünk meg.

Emlékeztetőül a WAI-ARIA-ban a role attribútum segítségével bármely HTML jelölőelemről megadhatjuk, hogy annak milyen szemantikai jelentést szánunk. Ezt jellemzően akkor tesszük meg, ha az adott jelölőelemnek eleve nincs szemantikai jelentése (például a div-nek), vagy az adott kontextusban az adott jelölőelemnek speciális szerepet szánunk. Mindezt azért csináljuk, hogy a képernyőolvasó program megértse és továbbítsa az elem valódi szemantikai jelentését.

Sok esetben azonban nem elég pusztán a szemantikai szerep definiálása. Ha olyan elemről van szó, amelyikhez állapot is társítható, akkor az adott pillanatban érvényes állapotinformációt is továbbítanunk kell. Ez jellemzően az interaktív elemeknél fontos.

A WAI-ARIA több tucat aria- előtaggal kezdődő attribútumot definiál a jellemzett elem tulajdonságainak (angolul properties) és aktuális állapotának (angolul states) leírására. Bár a tulajdonság és az állapot hasonló fogalom, a szabvány mégis finoman megkülönbözteti őket. Abból indul ki, hogy például egy webalkalmazásban a tulajdonságok viszonylag ritkán változnak, míg az állapotok a folyamatos interakciók és események hatására sűrűbben.

Példaként vegyünk egy jelölőnégyzetet. Ha a jelölőnégyzetet klasszikus módon az input type="checkbox" segítségével definiáljuk, akkor minden rendszer érteni fogja az elem szemantikáját és az aktuális állapotát is. Vagyis azt, hogy ez egy jelölőnégyzet, ami jelenleg nincs bejelölve. De mi van akkor, ha a fejlesztő valamilyen megfontolásból a jelölőnégyzetet nem így szeretné megvalósítani. Mondjuk kitalálja, hogy a jelölőnégyzetet egy kapcsológombbal helyettesíti, ami vagy be van nyomva vagy nincs. És mindezt úgy csinálja, hogy a kapcsológombot div jelölőelemmel készíti el például így:

<div id="kapcsologomb">
   Kapcsoló
</div>

Ha ehhez a fejlesztő megírja a megfelelő CSS és JavaScript kódokat, akkor kész a kapcsológomb. De sajnos ez a megoldás messze nem akadálymentes, még akkor sem, ha eltekintünk annak feszegetésétől, hogy kikapcsolt JavaScript esetén eleve használhatatlan a dolog.

A fő gond az, hogy a képernyőolvasó a div elemet nem értelmezi, mindössze a benne található szöveget olvassa fel így: Kapcsoló. Ahhoz, hogy az elem valódi szerepére fény derüljön felhasználhatjuk a WAI-ARIA szerepdefiníciós lehetőségét. A WAI-ARIA szerepek között megtalálható a checkbox (jelölőnégyzet) szerep, amit egyszerűen így tudunk hozzárendelni a példánkhoz:

<div id="kapcsologomb" role="checkbox">
   Kapcsoló
</div>

Ezzel megadtunk, hogy a div elemünk tulajdonképpen egy jelölőnégyzet. De hiányzik még az az információ, hogy a jelölőnégyzet jelenleg be van-e jelölve, vagy sem. A WAI-ARIA szabvány szerint a checkbox szerepű elemekhez kötelezően meg kell adni az aria-checked nevű attribútumot, ami a bejelöltség állapotát tükrözi. Ha az attribútum értéke true, akkor a jelölőnégyzet be van jelölve. Ha false, akkor nincs. Elvileg a háromállapotú jelölőnégyzeteknél a szabvány ismeri még a mixed állapotot is, de ez most számunkra nem releváns. Az aktuális állapotot tehát így rendeljük hozzá a példánkhoz:

<div id="kapcsologomb" role="checkbox" aria-checked="false">
   Kapcsoló
</div>

A WAI-ARIA-t ismerő képernyőolvasó programok ehhez az elemhez érve nagyjából ezt fogják felolvasni: Jelölőnégyzet. Nincs bejelölve. Kapcsoló. Sikerült tehát a sima div elemből állapottal rendelkező jelölőnégyzetet csinálnunk.

Persze ettől még a jelölőnégyzetünk nem interaktív, hiszen a viselkedését JavaScript-ben kell leprogramozni. Ott viszont figyelni kell arra, hogy a felhasználói interakció hatására az aria-checked attribútumot is dinamikusan változtassuk. Például ezzel a JavaScript kóddal:

var kapcsologomb = document.getElementById("kapcsologomb");
   kapcsologomb.onclick = function() {
   var ezBejelolt = (this.getAttribute("aria-checked") === "true");
   this.setAttribute("aria-checked",!ezBejelolt);
};

Az így felvértezett jelölőnégyzet már reagálni fog az egérkattintásra, illetve az enter vagy a space billentyű lenyomására is. Sőt a képernyőolvasó az adott esemény hatására lezajló állapotváltást fel is olvassa. Vagyis a bejelöléskor a Bejelölve, a bejelölés visszavonásakor a Nincs bejelölve szöveget.

A teljes akadálymentességhez már csak egy mozzanat van hátra. A kizárólag billentyűzettel navigáló felhasználók számára a jelölőnégyzetünk használhatatlan, ugyanis nincs benne a tabulátorral elérhető elemek között, vagyis nem kapja meg a fókuszt. Ennek kiküszöböléséhez csak annyit kell tennünk, hogy a HTML tabindex attribútumát is megadjuk. Ha ennek értéke 0, akkor az adott elem bekerül a tabulátorral elérhető elemek közé.

<div id="kapcsologomb" role="checkbox" aria-checked="false" tabindex="0">
   Kapcsoló
</div>

Végezetül megjegyzem, hogy további pozitív „mellékhatása” is lehet annak, ha a WAI-ARIA attribútumait használjuk. A modern böngészőprogramok a CSS szabályokban már támogatják az úgynevezett attribútum kiválasztást. Ennek segítségével adott attribútum jelenlététől vagy annak értékétől függően más és más megjelenést lehet definiálni az elemekhez. Természetesen az aria-* attribútumokat is felhasználhatjuk a CSS kiválasztókhoz. Példánkban a kapcsológomb bejelölt állapotának vizuális megjelenését az alábbi CSS kóddal is megadhatjuk:

#kapcsologomb[aria-checked="true"] {
   background-color: #cfc;
}

A cikk példájául szolgáló jelölőnégyzetes demót itt próbálhatja ki.