Ga naar hoofdinhoud

Status

Informeer gebruikers van screenreaders over het statusbericht

Als het statusbericht dynamisch wordt gegenereerd en zichtbaar is, maar geen toetsenbordfocus krijgt, moet de melding worden voorgelezen aan een screenreadergebruiker.

Dit kan door van het statusbericht een live-region te maken.

Let op: de live-region moet al in de DOM (de door de browser verwerkte HTML-code) aanwezig zijn voor je er iets in zet. Vaak verwerkt de browser alleen wijzigingen in al bestaande live-regions.

Live-region met role="alert"

Gebruik role="alert" om belangrijke en/of tijdgevoelige berichten aan gebruikers van hulptechnologie direct over te brengen.

Bijvoorbeeld:

  • Je inlogsessie loopt bijna af.
  • De verbinding met de server is verbroken, lokale wijzigingen worden nu niet opgeslagen.
  • Je hebt nog 20 seconden om het formulier te verzenden.
<div role="alert">
  Waarschuwing: Je hebt nog 20 seconden
  om het formulier te verzenden.
</div>

Een element met role="alert" is een ‘assertive’ live region, en functioneel gelijk aan het gebruiken van de combinatie aria-live="assertive" en aria-atomic="true".
Het onderbreekt de gebruiker bij wat die doet en geeft de melding onmiddellijk door.

Let op: gebruik alert spaarzaam, alleen in situaties waarin de onmiddellijke aandacht van de gebruiker vereist is.

Live-region met role="status"

Een live-region met de role="status" geeft de gebruiker informatie die niet belangrijk genoeg is om een 'alert' te zijn.

Bijvoorbeeld:

  • Het aanmeldformulier is succesvol verzonden.
  • Je hebt nu 3 producten in je winkelmandje.
  • Er zijn 5 zoekresultaten gevonden voor 'eikenprocessierups'.
<div role="status">
  Er zijn 5 zoekresultaten gevonden
  voor 'eikenprocessierups'.
</div>

Het instellen van role="status" is gelijk aan het instellen van aria-live="polite" en aria-atomic="true".

Deze role="status" onderbreekt de gebruiker niet, maar de melding wordt pas doorgegeven als de gebruiker geen interactie met de hulptechnologie meer heeft.

Met andere woorden, 'status' wacht op zijn beurt, 'alert' dringt voor.

Veel CMS'en en frameworks hebben iets ingebouwd om screenreaderfeedback makkelijker te maken: ze plaatsen onderaan de pagina een vaste live-region, waaraan je als ontwikkelaar meldingen kan toevoegen die dan worden voorgelezen.

Voorbeelden van dit soort functionaliteit:

Het informeren van alle gebruikers over een statusbericht is verplicht om te voldoen aan het WCAG-succescriterium 4.1.3 Statusberichten (niveau AA).

Bronnen:

Doen

Geef updates over het winkelwagentje met role=status.

Wanneer een nieuw product in een winkelwagen is geplaatst of de winkelwagen geleegd is, verandert het winkelwagen-icoon visueel. Een live region kan deze update ook overbrengen.

todo: voorbeeld met winkelwagen-icoon + live region

Niet doen

Gevonden zoekresultaten aangeven met role='alert'.

10 resultaten

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.