aria-live

Hvornår brug det

Når en del af siden opdateres asynkront, og man ønsker, at skærmlæserbrugere ved det uden at afbryde det, de er i gang med at læse. Formularvalideringsopsummeringer, søgeresultatantal, toast-notifikationer, chat-beskeder og indkøbskurvsindikatorere er typiske tilfælde.

Vælg politenhedsniveauet bevidst:

• aria-live="polite" — vent med at annoncere, til brugeren er ledig. Brug dette til næsten alt. Statusbeskeder, indlæste resultater, varer tilføjet til kurven.
• aria-live="assertive" — afbryd brugeren øjeblikkeligt. Forbeholdt genuint presserende oplysninger — sessionen udløber om 30 sekunder, formularindsendelse mislykkedes, betaling afvist. Overforbrug får siden til at virke aggressiv.
• aria-live="off" (standard) — ingen annonceringer.

De native roller role="status" (implicit polite) og role="alert" (implicit assertive) bundter aria-live med fornuftige standardindstillinger. Foretræk disse når de passer; brug aria-live på en tilpasset container, når de ikke gør.

Sådan holdes den synkroniseret

Den afgørende regel: live-regionen skal være i DOM ved initial rendering. Browsere og hjælpeteknologier opretter regionens “overvågning”, når den første gang dukker op i tilgængelighedstræet. Hvis man opretter regionen og injicerer indhold i den i samme JavaScript-tick, misses annonceringen ofte.

Mønsteret er:

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

Render den tomme container ved sideindlæsning. Skriv derefter tekst ind i den med JavaScript. Skærmlæseren annoncerer ændringen.

Øvrige regler:

• Opdater ved at sætte textContent; erstatning af hele regionens ydre HTML kan bryde overvågningen.
• Gentagne annonceringer kræver en indholdsændring — at skrive den samme streng to gange giver ofte ingen anden annoncering. Tilføj en tæller, et tidsstempel, eller ryd kortvarigt regionen.
• Par med aria-busy="true" under flertrins-opdateringer for at undgå delvise annonceringer.
• Par med aria-atomic for at styre, om differencen eller hele regionen annonceres.

Typiske fejl

• Oprettelse af live-regionen i samme tick som indholdet — ingen annoncering.
• Brug af aria-live="assertive" til alt. Brugere slår lyd fra for fanen.
• Angivelse af aria-live på et fokuserbart kontrolelement. Live-regioner er til statusopdateringer, ikke interaktive elementer.
• Skjulning af live-regionen med display: none. CSS-skjulte regioner er også skjult for tilgængelighedstræet og giver ingen annoncering; brug den visuelt-skjulte teknik (clip / sr-only) i stedet.
• Indpakkning af meget langt indhold (afsnit af tekst) i en live-region på én gang — brugeren kan ikke skimme.
• Glemsel af at rydde regionen efter beskeden er læst, så efterfølgende identiske opdateringer intet giver.

Eksempel

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

<!-- Altid til stede fra 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>