status

Hvornår bruges det

Til ikke-hastende rådgivende beskeder: “Gemt”, “12 resultater”, “Vare tilføjet til kurv”, “Forbinder…”. role="status" svarer til aria-live="polite" plus en implicit aria-atomic="true" — skærmlæseren venter på, at den aktuelle ytring er færdig, og læser derefter ændringen.

De fleste formularindsendelsessuccesser, søgeresultatantal, indlæsningsafslutninger og toast-notifikationer hører hjemme her. Bevar role="alert" til ægte afbrydelser.

Det native <output>-element bærer role="status" automatisk — nyttigt til regnemaskine-lignende resultater parret med <form>-input. For toast- og statusnotifikationer uden for formularkontekst er <div role="status"> standardmønsteret.

Som alle live-områder SKAL status-elementet være i DOM’en, inden beskeden indsættes. Render <div role="status"></div> tom, og opdater derefter tekstindholdet. At tilføje elementet fra bunden med indhold allerede inde er upålideligt.

Afvejninger for live-områder

• aria-live="off" — ingen annoncering. Standard for almindeligt indhold.
• aria-live="polite" (≡ role="status") — annonceres ved næste pause. Standard for statusbeskeder.
• aria-live="assertive" (≡ role="alert") — afbryder aktuel tale. Brug kun til hastende beskeder.

WCAG 4.1.3 (Statusbeskeder, AA) kræver, at statusbeskeder eksponeres via et live-område, så hjælpeteknologi kan annoncere dem uden at tvinge et fokusskifte.

Typiske fejl

• Status-element oprettet dynamisk med tekst allerede inde. Mange skærmlæsere overser annonceringen.
• Opdatering af status med opmærket indhold (<span>er og <strong>er). Nogle skærmlæsere læser opmærkningen bogstaveligt; hold statusindhold rent.
• Flere hurtige opdateringer — senere beskeder overskriver tidligere uden nogen annoncering.
• Brug af role="status" til ægte hastende fejl (brug role="alert").
• Visuelt skjult status uden overvejelse om aria-atomic, når teksten indeholder både stabile og skiftende dele. Standard aria-atomic="true" på status læser hele området hver gang, hvilket kan være støjende.

Eksempel

<!-- Render tom ved sideindlæsning -->
<div role="status" id="cartStatus"></div>

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

<!-- Native ækvivalent -->
<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>