alert
Een live-regio die een urgente, tijdkritische melding overbrengt. Schermlezers kondigen deze onmiddellijk aan en onderbreken de lopende spraak. Gebruik spaarzaam — reserveer voor echte fouten en waarschuwingen; misbruik veroorzaakt vermoeidheid bij hulptechnologiegebruikers.
Wanneer gebruiken
Voor berichten die de gebruiker daadwerkelijk onderbreken — een mislukte formulierindiening, een sessie die op het punt staat te verlopen, een verbroken verbinding. role="alert" is gelijkwaardig aan aria-live="assertive" gecombineerd met aria-atomic="true", wat betekent dat de schermlezer stopt met wat hij op dat moment aankondigt en de melding als volgende leest.
Gebruik het spaarzaam. Assertieve aankondigingen onderbreken de huidige taak van de gebruiker; het afvuren ervan bij elk opgeslagen veld of elke geslaagde actie is storend. Gebruik voor niet-urgente statuswijzigingen role="status" (aria-live="polite") in plaats daarvan.
De belangrijkste regel: het alert-element MOET in de DOM aanwezig zijn voordat de melding wordt ingevoegd, en de inhoud MOET worden toegevoegd (niet zichtbaar worden gemaakt vanuit een verborgen toestand) om de aankondiging te activeren. Het van scratch invoegen van <div role="alert">Fout</div> is onbetrouwbaar bij verschillende schermlezers. Het veilige patroon: render een leeg <div role="alert"></div> bij het laden van de pagina en werk de tekstinhoud bij wanneer een melding optreedt.
Wanneer alert vs. status
Gebruik role="alert" | Gebruik role="status" |
|---|---|
| Formuliervalidatiefouten | ”Artikel aan winkelwagen toegevoegd” |
| Sessie staat op het punt te verlopen | Aantal zoekresultaten bijgewerkt |
| Verbinding verbroken | Indicator “Opgeslagen” |
| Betaling mislukt | Laden voltooid |
Veelvoorkomende fouten
- Alert-element aan de DOM toevoegen nadat de melding al aanwezig is — veel schermlezers kondigen dit niet aan.
hiddentoggelen op een vooraf ingevuld alert. De tekstinhoudswijziging activeert de aankondiging; alleen zichtbaarheid toggelen kan onvoldoende zijn.role="alert"gebruiken voor routinematige statusberichten. Overspoelt de gebruiker met onderbrekingen.- Meerdere meldingen snel achter elkaar invoegen — latere berichten wachten achter eerdere, soms tientallen seconden.
- Een alertbericht dat het veld of de oorzaak niet benoemt — “Fout” alleen is nutteloos. “E-mailadres is vereist.” is bruikbaar.
role="alert"plaatsen op een wrapper om een formulier en verwachten dat wijzigingen daarbinnen worden aangekondigd. Alleen tekstwijzigingen van het alert-element zelf worden getriggerd.
Voorbeeld
<!-- Render dit leeg bij het laden van de pagina -->
<div role="alert" id="formErr"></div>
<script>
// Bij mislukte indiening:
document.getElementById('formErr').textContent =
'Email address is required.';
</script>