Live-region

En live-region är en del av DOM:en som, när dess innehåll förändras, tillkännages automatiskt för skärmläsaranvändare — utan att flytta fokus, utan att kräva att användaren navigerar dit, och utan att tvinga dem att ladda om sidan.

Live-regioner är mekanismen bakom varje “Toast: Artikel tillagd i varukorgen”-notis, varje formulärvalidering “Fel: E-post krävs”, varje uppdatering av sökresultaträkning som en skärmläsaranvändare faktiskt hör.

Det grundläggande attributet

Den enklaste live-regionen är ett div-element med aria-live="polite":

<div aria-live="polite" id="status">
  <!-- innehåll här tillkännages när det förändras -->
</div>

När JavaScript infogar text i #status tillkännager skärmläsaren den nya texten vid nästa naturliga paus — utan att avbryta vad användaren för tillfället läser.

Polite kontra assertive

aria-live har två operativa värden:

• polite — vänta tills användaren är inaktiv, tillkännage sedan. Använd för de flesta notiser: bekräftelser, sökräkningar, statusmeddelanden.
• assertive — avbryt användarens aktuella läsning och tillkännage omedelbart. Använd bara för genuint brådskande meddelanden: kritiska fel, varningar om sessionsutgång, tidskänsliga aviseringar.

Överdriven användning av assertive är det vanligaste felet med live-regioner. Varje liten toast som avfyrar assertive förvandlar skärmläsaren till en ständig avbrytare och tränar användaren att inaktivera live-regionen helt.

ARIA-härledda alternativ

Flera ARIA-roller antyder aria-live automatiskt:

• role="alert" → beter sig som aria-live="assertive".
• role="status" → beter sig som aria-live="polite".
• role="log" → polite, med den konceptuella ledtråden om en append-only-logg (chatthistorik, konsolutdata).
• role="timer" → polite, för nedräkningstimers.

Att välja en roll är ofta tydligare än att välja ett aria-live-värde direkt — det dokumenterar regionens syfte.

Vad som går fel i praktiken

• Live-region tillagd samtidigt som innehållet. ARIA tillkännager bara förändringar av live-regioner som redan existerade i DOM:en. Att infoga <div aria-live="polite">Inläst</div> som ett enda block tillkännager ingenting — regionen och innehållet anlände tillsammans. Åtgärd: håll den tomma live-regionen i DOM:en från sidladdning, fyll den senare.
• För snabba uppdateringar. Att infoga text i en live-region flera gånger per sekund rensar det föregående tillkännagivandet innan det är klart. Användaren hör fragment. Begränsa eller fördröj uppdateringar.
• Modal-hanterade tillkännagivanden som borde använda fokus istället. Om användarens avsiktliga åtgärd utlöste meddelandet är det ofta bättre att flytta fokus till meddelandet (eller en relaterad kontroll) än att förlita sig på ett live-regions-tillkännagivande. Live-regioner är för passiva notiser.
• Dekorativt brus i live-regionen. En live-region som innehåller laddningsspinnrar, ikoner och tidsstämplar utöver meddelandet får skärmläsaren att läsa allt vid varje uppdatering. Håll regionens innehåll till enbart meddelandet.