status

När ska du använda det

För icke-brådskande rådgivande meddelanden: “Sparat”, “12 resultat”, “Artikel tillagd i kundvagn”, “Ansluter…”. role="status" är ekvivalent med aria-live="polite" plus ett implicit aria-atomic="true" — skärmläsaren väntar tills det pågående yttrandet är klart och läser sedan förändringen.

De flesta formulärbekräftelser, sökresultatsantal, laddningsavslutningar och toast-notiser hör hemma här. Reservera role="alert" för genuina avbrott.

Det inbyggda <output>-elementet bär role="status" automatiskt — användbart för kalkylatorliknande resultat parade med <form>-inmatningar. För toast- och statusnotiser utanför formulärkontext är <div role="status"> standardmönstret.

Precis som alla live-regioner MÅSTE statuselementet finnas i DOM:en innan meddelandet infogas. Rendera <div role="status"></div> tomt och uppdatera sedan textinnehållet. Att lägga till elementet från grunden med innehåll redan inuti är opålitligt.

Avvägningar för live-regioner

• aria-live="off" — inget tillkännagivande. Standard för vanligt innehåll.
• aria-live="polite" (≡ role="status") — presenteras vid nästa paus. Standard för statusmeddelanden.
• aria-live="assertive" (≡ role="alert") — avbryter pågående tal. Använd bara för brådskande meddelanden.

WCAG 4.1.3 (Statusmeddelanden, AA) kräver att statusmeddelanden exponeras via en live-region så att hjälpmedels­tekniken kan presentera dem utan att tvinga en fokusflytt.

Vanliga fel

• Statuselementet skapas i farten med text redan inuti. Många skärmläsare missar tillkännagivandet.
• Statusen uppdateras med uppmärkt innehåll (<span>-taggar och <strong>-taggar). Vissa skärmläsare läser uppmärkningen ordagrant; håll statusinnehållet i klartext.
• Flera uppdateringar avfyras snabbt — senare meddelanden skriver över tidigare utan tillkännagivande.
• role="status" används för genuint brådskande fel (använd role="alert").
• Visuellt dolt status utan aria-atomic-hänsyn när texten innehåller både stabila och föränderliga delar. Standard aria-atomic="true" på status läser hela regionen varje gång, vilket kan bli störande.

Exempel

<!-- Rendera tomt vid sidladdning -->
<div role="status" id="cartStatus"></div>

<script>
  // När kundvagnen uppdateras:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Inbyggt alternativ -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>