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

Bevezetés

Az Automatikusan frissülő régió leírása című fejezetben bemutatott példában az aria-live tulajdonsággal rendelkező <div> elem tartalma teljes egészében felolvasásra került. Ez nem volt probléma, mivel annak teljes tartalma frissült, így az egész felolvasására szükség volt. Számos esetben előfordul azonban, hogy egy területnek bármely eleme frissülhet, viszont jellemzően egyidőben csak néhány rész változik. Ilyen eset lehet például egy labdarúgó-mérkőzés eredménye vagy a részvények árfolyamainak listája. Amennyiben a részvénylista sok elemet tartalmaz, és a képernyőolvasó program az összes értéket bemondja, a felhasználó nehezen tudja áttekinteni a változásokat. Ha a frissítés túl gyakori, elképzelhető, hogy a következő változás az előző állapot felolvasásának befejezése előtt bekövetkezik, így a képernyőolvasó program folyamatos bemondást hajt végre.

Az automatikusan frissülő régiórész (Live Region Atomic) az ARIA (Accessible Rich Internet Applications, Akadálymentes Dinamikus Webes Alkalmazások) szabvány azon eleme, amely lehetővé teszi, hogy csak azoknak az elemeknek a bemondása történjen meg, amelyek ténylegesen megváltoztak. A bemondás hatókörének megadására az aria-atomic tulajdonság szolgál.

Jelen fejezet célja az aria-atomic 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, amelyen folyamatosan frissítésre kerül, hogy az egyes növényekből (tulipán, rózsa, nárcisz) hány darabot értékesítettek. A példához tartozó jelölőnégyzet használatával megadható, hogy az összes virág aktuális eladott darabszáma kerüljön-e bemondásra, vagy csak azok, amelyeknél ez az érték változott.

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

false – Ha false érték van megadva, akkor csak a megváltozott rész kerül bemondásra.
true – Ha true érték van megadva, akkor a teljes tartalom bemondásra kerül.

A példa áttekintése

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

A változó terület <div> eleme. Az aria-live="polite" attribútum jelzi a képernyőolvasónak, hogy az elem automatikusan frissül, és a bemondás az aktuális felolvasás befejezését követően történjen meg. Az aria-atomic="false" attribútum jelzi a képernyőolvasónak, hogy alapértelmezetten csak a megváltozott részek kerüljenek bemondásra.

<input type="checkbox" id="ariaAtomicCheckbox" onclick="toggleAriaAtomic();">

A jelölőnégyzet bejelölésével, a toggleAriaAtomic függvény használatával lehet megadni, hogy az összes tétel bemondásra kerüljön.