Akadálymentes súgószöveg űrlapmezőkhöz

Az űrlapmező címkéje (a label jelölőelem tartalma) nem elegendő arra, hogy olyan instrukciót, súgószöveget helyezzünk el benne, amely támogatja a felhasználói adatbevitel pontosságát. Jellemzően ilyen instrukció lehet az űrlapmezőbe beírható adat részletesebb magyarázata, formátuma vagy hossza. Sajnos a HTML natív módon nem biztosít olyan jelölőelemet, amely kifejezetten az ilyen súgószövegek megjelölésére szolgál. Ez pedig akadálymentességi problémákhoz vezethet.

Bevett gyakorlat, hogy az űrlapmező súgószövegét az űrlapmező mögé vagy alá helyezik el a fejlesztők, általában p, div vagy span jelölőelemmel megjelölve.

Ennek egyik lehetséges HTML kódolása az alábbi:

<label for="belepesiNev">Belépési név:</label>
<input type="text" id="belepesiNev" name="belepesiNev" />
<span>Minimálisan 8 karakter legyen.</span>

Arra most nem térnék ki, hogy használhatósági szempontból is viták zajlanak arról, hogy vizuálisan a súgószöveg az űrlapmező mellett, vagy az űrlapmező alatt van-e jobb helyen. Az viszont biztos, hogy akadálymentességi szempontból nézve a képernyőolvasó programot alkalmazó vak felhasználók számára egyik megoldás sem szerencsés.

Miért? Mert az előző mintakódot a képernyőolvasó így olvassa fel: Belépési név. Kettőspont. Szerkesztőmező. Ennek az az oka, hogy az űrlapmezőbe lépve a képernyőolvasó átkapcsol úgynevezett űrlap üzemmódba. Ebben az üzemmódban csak az adott űrlapmező értékét, űrlapcímkéjét, illetve esetleges helykitöltő (angolul placeholder) szövegét olvassa fel a program. Az űrlapmező mögötti szöveget nem. Vagyis a súgószövegben található fontos instrukció ilyenkor nem jut el a felhasználóhoz.

Az aria-describedby attribútum

Szerencsére erre a problémára is megoldást kínál a WAI-ARIA szabvány. Az űrlapmező és az őt leíró súgószöveg logikai kapcsolatát az űrlapmezőnél megadható aria-describedby attribútum segítségével tudjuk megteremteni. Ennek az attribútumnak az értéke - a label jelölőelem for attribútumához hasonlóan - a súgószöveg id attribútumának értéke lehet. Vagyis előfeltétel, hogy a súgószöveghez is egyedi id attribútumot rendeljünk. Például így:

<label for="belepesiNev">Belépési név:</label>
<input type="text" id="belepesiNev" name="belepesiNev" aria-describedby="belepesiNevSugo" />
<span id="belepesiNevSugo">Minimálisan 8 karakter legyen.</span>

Ezt a WAI-ARIA szabványt támogató képernyőolvasó programok már úgy fogják felolvasni, hogy az űrlapmező üzemmódban a súgószöveg is elhangozzon.

A JAWS például így: Belépési név. Kettőspont. Szerkesztőmező. Minimálisan 8 karakter legyen.

Az NVDA így: Belépési név. Szerkesztőmező. Automatikus kiegészítés. Minimálisan 8 karakter legyen.

A VoiceOver pedig így: Belépési név. Minimálisan 8 karakter legyen. Szöveg szerkesztése

Érdekes megfigyelni, hogy a súgószöveg elhangzása mennyiben követi a címke, az űrlap és a súgószöveg sorrendiségét. A JAWS és az NVDA például legutoljára olvassa fel a súgószöveget, ami annyiból szerencsés, hogy így az űrlapmező címke szövege és a súgószöveg hallhatóan is jól elkülönül. A VoiceOver viszont közvetlenül az űrlapcímke után olvassa fel a súgószöveget.

Végezetül fontos megemlítenem, hogy az aria-describedby segítségével megvalósított logikai kapcsolódás miatt az űrlapmező és a hozzá tartozó súgószöveg a HTML kódban (és ezen keresztül akár vizuálisan) elvileg bármilyen sorrendben, egymástól távol is elhelyezkedhet. Ezzel azonban a gyakorlatban vigyázni kell, mert egyéb használhatósági és akadálymentességi kérdések merülhetnek fel. A súgószövegnek ugyanis a látó és a gyengénlátó felhasználók számára is egyértelműen kapcsolódnia kell az űrlapmezőhöz.