alert

När du ska använda det

För meddelanden som genuint avbryter användaren — ett formulärsvar som misslyckades, en session som är på väg att gå ut, en förlorad anslutning. role="alert" är ekvivalent med aria-live="assertive" plus aria-atomic="true", vilket innebär att skärmläsaren slutar med vad den meddelar och läser aviseringen härnäst.

Använd det sparsamt. Påstridiga meddelanden avbryter användarens pågående uppgift; att skicka ett för varje sparat fält eller lyckad åtgärd är störande. För icke-brådskande statusändringar, använd role="status" (aria-live="polite") i stället.

Den enskilt svåraste regeln: alert-elementet MÅSTE finnas i DOM innan meddelandet infogas, och innehållet MÅSTE läggas till (inte växlas från dolt) för att meddelandet ska utlösas. Att infoga <div role="alert">Fel</div> från grunden är opålitligt bland skärmläsare. Det säkra mönstret: rendera ett tomt <div role="alert"></div> vid sidladdning och uppdatera sedan dess textinnehåll när en avisering inträffar.

När du ska använda det jämfört med status

Vanliga fel

• Alert-element tillagt i DOM efter meddelandet — många skärmläsare meddelar inte.
• Växlar hidden på en förpopulerad avisering. Det är textinnehållsändringen som utlöser meddelandet; enbart synlighetsväxling kanske inte gör det.
• Använder role="alert" för rutinstatus. Dränker användaren i avbrott.
• Flera aviseringar infogas snabbt — senare meddelanden köar efter tidigare, ibland i tiotals sekunder.
• Aviseringsmeddelande som inte namnger fältet eller orsaken — “Fel” ensamt är meningslöst. “E-postadress krävs.” är genomförbart.
• Placerar role="alert" på ett omslag runt ett formulär och förväntar sig att ändringar inuti meddelas. Bara alert-elementets egna textändringar utlöser meddelanden.

Exempel

<!-- Rendera detta tomt vid sidladdning -->
<div role="alert" id="formErr"></div>

<script>
  // Vid misslyckad sändning:
  document.getElementById('formErr').textContent =
    'Email address is required.';
</script>