aria-atomic

Käyttötilanteet

Reaaliaikaisella alueella, jonka päivitykset ovat ymmärrettäviä vain kokonaisena yksikkönä. Klassinen esimerkki on yhden rivin tila kuten “3 tulosta löytyi” — jos alueella on aria-atomic="false" (oletusarvo) ja vain numero muuttuu, ruudunlukuohjelma saattaa ilmoittaa vain “3” ilman asiayhteyttä. Arvolla aria-atomic="true" se ilmoittaa koko lauseen.

Aseta aria-atomic="false" (tai jätä pois), kun:

• Alue on loki tai chat-paneeli, jossa jokainen uusi rivi on itsenäinen — “Alice: hei”, “Bob: moi”. Koko lokin ilmoittaminen joka kerta olisi sietämätöntä.
• Vain uusi sisältö kantaa uuden tiedon.

Aseta aria-atomic="true", kun:

• Alue on lyhyt, vakaa lause, jonka merkitys riippuu ympäröivistä sanoista — “Ostoskorin summa: 42,18 €”, “Sivu 3/12”, “Suodattimia käytössä: 2”.
• Pieni DOM-muutos alueen sisällä kantaa vähän merkitystä yksinään.

aria-atomic on riippumaton aria-live- ja aria-busy-attribuuteista. Ne toimivat yhdessä mutta säätelevät eri asioita.

Synkronointi

Kelvolliset arvot ovat "true" ja "false". Oletusarvo on "false".

Aseta attribuutti kerran reaaliaikaiselle alueelle ja jätä se muuttumattomaksi — se on ominaisuus siitä, miten alue tulisi ilmoittaa, ei tila, joka muuttuu ajan myötä. Se myös periytyy: aria-atomic="true" vanhemmalle tekee jälkeläisten reaaliaikaisista alueista atomisia, ellei tätä erikseen ylikuormiteta.

Jos päivitysstrategiasi on “korvaa koko alueen teksti”, aria-atomic="true" tuottaa luontevimman ilmoituksen. Jos päivitysstrategiasi on “lisää uusi rivi”, käytä yleensä aria-atomic="false", jolloin vain lisätty rivi luetaan.

Yleiset virheet

• aria-atomic-attribuutin jättäminen oletusarvoon vakaalla yhden rivin tilalla, jolloin ilmoitetaan vain “5” eikä “5 tulosta löytyi”.
• aria-atomic="true" asettaminen chat-lokille — jokainen uusi viesti aiheuttaa koko lokin uudelleenlukemisen.
• Vain <span>-elementin päivittäminen atomisen alueen sisällä ja hämmästyminen siitä, että ympäröivä teksti myös ilmoitetaan. Juuri tämä on atomisen toimintatavan tarkoitus.
• aria-atomic käyttäminen alueella, jolla ei ole aria-live-attribuuttia eikä implisiittistä live-roolia — sillä ei ole vaikutusta.
• aria-atomic asettaminen kohdistettavaan säätimeen. Reaaliaikaisen alueen attribuutit kuuluvat tilasäiliöille, ei interaktiivisille elementeille.

Esimerkki

<!-- Atominen: koko lause on viesti -->
<p aria-live="polite" aria-atomic="true">
  Ostoskorin summa: <span id="cart-total">0,00 €</span>
</p>

<!-- Ei-atominen: vain uusi rivi ilmoitetaan -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hei siellä</li>
</ul>