Tila Yleinen tila

`aria-busy`

Merkitsee alueen päivittyvän, jolloin avustava teknologia jättää väliaikaiset ilmoitukset väliin. Aseta arvoksi "true" latauksen tai suurten DOM-muutosten ajaksi; vaihda takaisin "false"-arvoon, kun alue on vakaa.

Käyttötilanteet

Kun aluetta rakennetaan uudelleen asynkronisesti — hakutulosluettelo latautuu, taulukko lajittelee itseään uudelleen, chat-paneeli odottaa verkkovastauksen. Ilman aria-busy-attribuuttia reaaliaikaiseen alueeseen kytketyt ruudunlukuohjelmat saattavat ilmoittaa jokaisen osatilan sen ilmestyessä, mikä on häiritsevää ja usein hämmentävää.

Malli on:

Aseta aria-busy="true" säiliölle ennen muuttamisen aloittamista.
Tee työ (tyhjennä lapset, hae data, renderöi uudelleen).
Aseta aria-busy="false", kun DOM on vakaa.

Jos säiliö on myös reaaliaikainen alue (aria-live="polite" tai aria-live="assertive"), ruudunlukuohjelma pidättää ilmoitukset aria-busy="true"-tilan aikana ja tuottaa yhden johdonmukaisen ilmoituksen sen jälkeen, kun aria-busy kääntyy takaisin.

Reaaliaikaisen alueen ulkopuolellakin attribuutti on hyödyllinen: se signaloi avustavalle teknologialle, että käyttäjän ei tulisi vielä toimia sisällön perusteella, ja se toimii hyvin edistymispalkkien kanssa.

Synkronointi

Kelvolliset arvot ovat "true" ja "false". Oletusarvo on "false" (tai jätä pois).

Attribuutin täytyy ympäröidä mutaatio. Yleinen virhe on aria-busy="true" asettaminen, DOM:n mutaatio ja sen palauttamatta jättäminen — alue näyttää avustavalle teknologialle pysyvästi “latautuvalta”, vaikka kaikki on visuaalisesti kunnossa.

Paranna se näkyvällä latausilmaisimella (pyörä, luuranko tai edistymisteksti), jotta näkevät käyttäjät saavat saman signaalin. aria-busy-attribuutti on tarkoitettu vain avustavalle teknologialle; se ei itsessään renderöi mitään.

Yleiset virheet

aria-busy="true" asettaminen ilman sen palauttamista "false"-arvoon.
aria-busy asettaminen mutaation jälkeen — liian myöhään, väliaikaiset ilmoitukset ovat jo lauenneet.
aria-busy käyttäminen yksin ilman aria-live-attribuuttia ja ilman näkyvää lataajaa. Näkevät käyttäjät eivät näe mitään; avustavaa teknologiaa käyttävät eivät kuule mitään.
aria-busy asettaminen koko <body>-elementille koko sovelluksen elinkaaren ajaksi. Laajuuden tulisi vastata sitä aluetta, joka todella muuttuu.
aria-busy-attribuutin käyttäminen role="progressbar"-roolin sijaan determinantille edistymispalkkielle. Ne täydentävät toisiaan, eivät ole vaihtoehtoja.
Interaktiivisten säädinten poistamatta jättäminen käytöstä kiireisen alueen sisällä — näkevät käyttäjät näkevät ne edelleen ja voivat klikata niitä.

Esimerkki

<section
  id="results"
  aria-live="polite"
  aria-busy="true"
>
  <p>Ladataan tuloksia…</p>
</section>

<script>
  fetch('/api/search')
    .then((r) => r.json())
    .then((data) => {
      const region = document.getElementById('results');
      region.innerHTML = renderResults(data);
      region.setAttribute('aria-busy', 'false');
    });
</script>