aria-live

Milloin käyttää

Kun jokin sivun osa päivittyy asynkronisesti ja haluat ruudunlukuohjelmien käyttäjien saavan tiedon siitä häiritsemättä meneillään olevaa lukemista. Tyypillisiä tapauksia ovat lomakkeiden validointiyhteenvedot, hakutulosten laskurit, toast-ilmoitukset, chat-virtausviestit ja ostoskorinapit.

Valitse kohteliaisuustaso harkiten:

• aria-live="polite" — odota käyttäjän joutilaisuutta ennen ilmoittamista. Käytä tätä lähes kaikkeen: tilaviestit, ladatut tulokset, ostoskoriin lisätty kohde.
• aria-live="assertive" — keskeytä käyttäjä välittömästi. Varaa aidosti kiireelliseen tietoon — istunto vanhenee 30 sekunnissa, lomakkeen lähetys epäonnistui, maksu hylättiin. Liiallinen käyttö tekee sivusta häiritsevän.
• aria-live="off" (oletus) — ei ilmoituksia.

Natiivit roolit role="status" (implisiittinen polite) ja role="alert" (implisiittinen assertive) yhdistävät aria-live:n järkeviin oletuksiin. Suosi niitä, jos ne sopivat; käytä aria-live:a mukautetussa säilössä, kun ne eivät sovi.

Synkronissapitäminen

Tärkein sääntö: live-alueen on oltava DOM:ssa sivun alkurenderöinnissä. Selaimet ja avustava teknologia asettavat alueen “seurannan” heti, kun se ilmestyy saavutettavuuspuuhun. Jos luot alueen ja injektoit sisällön siihen samassa JavaScript-syklissä, ilmoitus jää usein kuulematta.

Oikea malli:

<div id="status" aria-live="polite"></div>

Renderöi tyhjä säilö sivun latauksessa. Kirjoita myöhemmin teksti siihen JavaScriptillä. Ruudunlukuohjelma ilmoittaa muutoksen.

Muut säännöt:

• Päivitä asettamalla textContent; koko alueen ulkoisen HTML:n korvaaminen voi rikkoa seurannan.
• Toistuva ilmoitus vaatii sisällönmuutoksen — saman merkkijonon kirjoittaminen kahdesti ei yleensä tuota toista ilmoitusta. Lisää laskuri, aikaleima tai tyhjennä alue hetkeksi.
• Yhdistä aria-busy="true" monivaiheisten päivitysten aikana osittaisten ilmoitusten välttämiseksi.
• Yhdistä aria-atomic-attribuuttiin hallitaksesi, ilmoitetaanko vain muutos vai koko alue.

Yleiset virheet

• Live-alueen luominen samassa syklissä sisällön kanssa — ei ilmoitusta.
• aria-live="assertive":n käyttö kaikkeen. Käyttäjät mykistävät välilehden.
• aria-live:n asettaminen kohdistettavaan ohjaimeen. Live-alueet ovat tilapäivityksiä varten, eivät interaktiivisia widgettejä.
• Live-alueen piilottaminen display: none:lla. CSS:llä piilotetut alueet ovat myös piilossa saavutettavuuspuussa eikä ilmoituksia tule; käytä visuaalisesti piilottavaa tekniikkaa (clip / sr-only).
• Hyvin pitkän sisällön (tekstikappaleita) syöttäminen kerralla live-alueelle — käyttäjä ei pysty selaamaan.
• Alueen tyhjentämisen unohtaminen viestin lukemisen jälkeen, jolloin seuraavat identtiset päivitykset eivät tuota ilmoitusta.

Esimerkki

<form>
  <label for="zip">Postinumero</label>
  <input id="zip" name="zip" />
  <button type="submit">Hae</button>
</form>

<!-- Aina läsnä alkurenderöinnistä alkaen -->
<div id="lookup-status" aria-live="polite" class="sr-only"></div>

<script>
  document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const status = document.getElementById('lookup-status');
    status.textContent = 'Haetaan sijaintia…';
    const place = await lookup(document.getElementById('zip').value);
    status.textContent = `Sijainti: ${place}`;
  });
</script>