Jó megoldások – akadálymentes webes komponensek, Infoalap logóval

Státuszüzenet leírása

Bevezetés

Számos esetben előfordul (pl. termékek kosárba helyezésekor, kvízkérdéseknél), hogy egy vezérlőelem, pl. gomb aktiválásakor megváltozik a képernyő egy része, pl. frissítésre kerül a kiválasztott árucikkek száma, illetve megjelenik a kérdésre adott válasz értékelése. Az ilyen jellegű információkat státuszüzeneteknek nevezik. Amennyiben az információ megjelenítésére szolgáló elem egy címke vagy egy szöveges kiírás, a képernyőolvasó programot használó felhasználók nem értesülnek a változásról, a szoftver nem mondja azt be. Ehhez a role="status" tulajdonság és érték megadása szükséges.

Jelen fejezet célja olyan megoldás bemutatása, amely úgy jeleníti meg a státuszüzenetet, hogy a képernyőolvasó program is érzékelje és bemondja azt. A tulajdonság gyakorlati példájában egy kvízkérdésre kell válaszolni a három választógomb egyikének bejelölésével. Az Értékelés gomb megnyomására a program kiértékeli és státuszüzenetben megjeleníti a válasz helyességét.

A példa áttekintése

<div class="kerdes">

A kvízkérdést magába foglaló terület <div> eleme.

<h2>Hogy hívták az alföldi tanyavilág híres betyárját?</h2>

A kvízkérdés.

<input type="radio" id="tulipan" name="valasz" value="Tulipán Sándor"/>

Az első válaszlehetőség.

<label for=tulipan">Tulipán Sándor</label><br>

Az első válaszlehetőséghez tartozó címke.

<input type="radio" id="rozsa" name="valasz" value="Rózsa Sándor"/>

A második válaszlehetőség.

<label for=rozsa">Rózsa Sándor</label><br>

A második válaszlehetőséghez tartozó címke.

<input type="radio" id="narcisz" name="valasz" value="Nárcisz Sándor"/>

A harmadik válaszlehetőség.

<label for=narcisz">Nárcisz Sándor</label><br>

A harmadik válaszlehetőséghez tartozó címke.

<input type="button" onclick="eval()" value="Értékelés">

Az értékelés elindítására szolgáló gomb.

<p id="status" role="status"></p>

A státuszüzenet megjelenítésére szolgáló terület. Az oldal betöltésekor üres, az eval() függvény állítja be az értékét.


www.infoalap.hu