alert
En live-region, der formidler en presserende, tidsfølsom besked. Skærmlæsere annoncerer den øjeblikkeligt og afbryder den aktuelle tale. Brug sparsomt — reserver til reelle fejl og advarsler; misbrug skaber træthed hos hjælpeteknologi-brugere.
Hvornår bruges den
Til beskeder, der reelt afbryder brugeren — en formularindsendelse, der mislykkedes, en session, der er ved at udløbe, eller en tabt forbindelse. role="alert" svarer til aria-live="assertive" plus aria-atomic="true", hvilket betyder, at skærmlæseren stopper, hvad den end er i gang med at annoncere, og læser advarslen som det næste.
Brug den sparsomt. Assertive meddelelser afbryder brugerens aktuelle opgave; det er forstyrrende at affyre én for hvert gemt felt eller vellykket handling. Til ikke-presserende statusændringer bruges role="status" (aria-live="polite") i stedet.
Den svageste regel er absolut: alert-elementet SKAL eksistere i DOM’en, inden beskeden indsættes, og indholdet SKAL tilføjes (ikke skiftes fra skjult) for at annonceringen affyres. At indsætte <div role="alert">Fejl</div> fra bunden er upålideligt på tværs af skærmlæsere. Det sikre mønster: render et tomt <div role="alert"></div> ved sideindlæsning, og opdater derefter tekstindholdet, når en advarsel opstår.
Hvornår bruges alert vs. status
Brug role="alert" | Brug role="status" |
|---|---|
| Formularvalideringsfejl | ”Vare tilføjet til kurv” |
| Session ved at udløbe | Antal søgeresultater opdateret |
| Tabt forbindelse | ”Gemt”-indikator |
| Betaling mislykkedes | Indlæsning fuldført |
Hyppige fejl
- Alert-element tilføjet til DOM’en efter beskeden — mange skærmlæsere annoncerer ikke.
- Slå
hiddentil/fra på en forudfyldt advarsel. Det er ændringen af tekstindholdet, der udløser annonceringen; ændring af synlighed alene er muligvis ikke nok. - Bruge
role="alert"til rutinemæssig status. Drukner brugeren i afbrydelser. - Flere advarsler indsættes hurtigt — nyere beskeder sættes i kø bag ældre, sommetider i op til snesevis af sekunder.
- Advarselsbesked, der ikke navngiver feltet eller årsagen — “Fejl” alene er ubrugelig. “E-mailadresse er påkrævet.” er handlingsrettet.
- Placere
role="alert"på en wrapper rundt om en formular og derefter forvente, at ændringer indeni annonceres. Kun ændringer af alert-elementets egne tekstindhold udløser annonceringen.
Eksempel
<!-- Render this empty at page load -->
<div role="alert" id="formErr"></div>
<script>
// On submit failure:
document.getElementById('formErr').textContent =
'Email address is required.';
</script>