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

Automatikusan frissülő régió leírása

Bevezetés

Az automatikusan frissülő régió (Live Region) az ARIA (Accessible Rich Internet Applications, Akadálymentes Dinamikus Webes Alkalmazások) szabvány olyan eleme, amely megkönnyíti a weboldalak automatikusan frissülő részeinek kezelését. Az internetes portálokon számos esetben található automatikusan frissülő tartalom, ilyen lehet például a részvényárfolyamok megjelenítése, a sporteseményekről szóló valós idejű, szöveges beszámolók vagy a híroldalakon a rendkívüli események bejelentése. Ezeket a változásokat a képernyőolvasó program alapesetben nem érzékeli, a felhasználó csak akkor jut hozzá az információhoz, ha valamilyen oknál fogva az adott területre navigál. A változó oldalrészek automatikus bemondatására az aria-live tulajdonság szolgál.

Jelen fejezet célja az aria-live tulajdonság használatának bemutatása. A tulajdonság gyakorlati példájában egy virágkereskedés honlapjának az a részlete szerepel, amely a növényekkel kapcsolatos érdekes információkat jelenít meg, úgy, hogy azok folyamatosan váltakoznak. A példához tartozó választógombcsoport használatával megadható, mikor, illetve milyen módon történjen meg a frissített rész bemondása.

Az aria-live tulajdonság értékei az alábbiak lehetnek:

A példa áttekintése

<div class="arialiveregion" id="LiveRegion" aria-live="polite"><div>

A változó terület <div> eleme. A forráskódban nem szerepel tartalom, az javascripten keresztül kerül feltöltésre. Az aria-live="polite" attribútum jelzi a képernyőolvasónak, hogy alapértelmezetten a bemondás az aktuális felolvasás befejezését követően történjen meg.

<div><label><input type="radio" name="ariaLiveSetting" value="polite" onclick="updateAriaLive('polite')" checked > Az éppen aktuális bemondás befejezését követően (polite)</label></div>

A választógomb aktiválásával, az updateAriaLive függvény használatával lehet megadni, hogy a LiveRegion terület aria-live tulajdonságának értéke polite legyen.

<div><label><input type="radio" name="ariaLiveSetting" value="assertive" onclick="updateAriaLive('assertive')" > Amint lehetséges (assertive)</label></div>

A választógomb aktiválásával, az updateAriaLive függvény használatával lehet megadni, hogy a LiveRegion terület aria-live tulajdonságának értéke assertive legyen.

<div><label><input type="radio" name="ariaLiveSetting" value="off" onclick="updateAriaLive('off')" > Ne legyen bemondás (off)</label></div>

A választógomb aktiválásával, az updateAriaLive függvény használatával lehet megadni, hogy a LiveRegion terület aria-live tulajdonságának értéke off legyen.


www.infoalap.hu