aria-live

När du ska använda

När en del av sidan uppdateras asynkront och du vill att skärmläsaranvändare ska få veta det utan att störa det de för tillfället läser. Valideringssammanfattningar för formulär, antal sökresultat, toast-notifieringar, chattströmmeddelanden och kundvagnräknare är typiska fall.

Välj artighetsgrad med omdöme:

• aria-live="polite" — vänta tills användaren är inaktiv innan meddelandet ges. Använd detta för nästan allt. Statusmeddelanden, inlästa resultat, artikel tillagd i kundvagnen.
• aria-live="assertive" — avbryt användaren omedelbart. Reservera detta för genuint brådskande information — sessionen går ut om 30 sekunder, formulärinlämning misslyckades, betalning nekades. Överanvändning gör sidan fientlig.
• aria-live="off" (standard) — inga meddelanden.

De inbyggda rollerna role="status" (implicit polite) och role="alert" (implicit assertive) kombinerar aria-live med vettiga standardvärden. Föredra dessa när de passar; använd aria-live på en anpassad behållare när de inte gör det.

Hur du håller det synkroniserat

Den avgörande regeln: live-regionen måste finnas i DOM vid initial rendering. Webbläsare och hjälpmedelsteknik ställer in regionens “bevakning” när den första gången dyker upp i tillgänglighetsträdet. Om du skapar regionen och injicerar innehåll i den i samma JavaScript-tick missas meddelandet ofta.

Mönstret är:

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

Rendera den tomma behållaren vid sidinläsning. Skriv sedan text i den med JavaScript. Skärmläsaren meddelar ändringen.

Övriga regler:

• Uppdatera genom att sätta textContent; att ersätta hela regionens yttre HTML kan bryta bevakningen.
• Upprepade meddelanden kräver en innehållsändring — att skriva samma sträng två gånger ger ofta inget andra meddelande. Lägg till en räknare, en tidsstämpel eller rensa regionen tillfälligt.
• Para ihop med aria-busy="true" under flerstegsuppdateringar för att undvika partiella meddelanden.
• Para ihop med aria-atomic för att styra om skillnaden eller hela regionen meddelas.

Vanliga fel

• Att skapa live-regionen i samma tick som innehållet — inget meddelande.
• Att använda aria-live="assertive" för allt. Användare stänger av fliken.
• Att sätta aria-live på en fokuserbar kontroll. Live-regioner är för statusuppdateringar, inte interaktiva widgets.
• Att dölja live-regionen med display: none. CSS-dolda regioner är också dolda i tillgänglighetsträdet och ger inga meddelanden; använd den visuellt-dolda tekniken (clip / sr-only) i stället.
• Att stoppa in mycket långt innehåll (textstycken) i en live-region på en gång — användaren kan inte skumma.
• Att glömma att rensa regionen efter att meddelandet lästs, så att efterföljande identiska uppdateringar inte ger något.

Exempel

<form>
  <label for="zip">ZIP code</label>
  <input id="zip" name="zip" />
  <button type="submit">Look up</button>
</form>

<!-- Alltid närvarande från initial rendering -->
<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 = 'Looking up location…';
    const place = await lookup(document.getElementById('zip').value);
    status.textContent = `Location: ${place}`;
  });
</script>