Nieuw in WCAG 2.1
Succescriterium 4.1.3 Statusberichten
In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.
Statusberichten begrijpen (Engelstalig)
Een statusbericht is een melding die een verandering in de content aangeeft, zonder dat hiervoor de focus wordt verplaatst of de pagina wordt herladen. Ze geven bijvoorbeeld informatie over:
- het succes of resultaten van een actie (“Verzoek verstuurd”, “43 resultaten gevonden”)
- de wachttoestand van een applicatie (“Laden…”)
- de voortgang van een proces (“Bestand uploaden: 45%”)
- fouten (“5 fouten op de pagina”)
Zorg dat deze statusberichten ook kunnen worden herkend door een schermlezer zodat iedereen dezelfde informatie krijgt. Gebruik hiervoor de juiste ARIA-rollen.
Een bericht is géén statusbericht als:
- De focus naar het bericht verplaatst wordt
- Er een nieuw tabblad of venster opent
- Er een nieuwe pagina laadt
- Er een dialoogvenster verschijnt
- Er nieuwe bedieningselementen verschijnen (zoals extra formuliervelden)
Hoe pas je dit toe?
- Zorg statusberichten ook beschikbaar zijn voor hulptechnologieën.
Handige tips
- Plaats de container voor statusberichten al in de HTML bij het laden van de pagina (leeg, maar mét de juiste ARIA-rol). Voeg pas later de tekst toe wanneer het statusbericht wordt geactiveerd.
- Gebruik
role="status"voor statusberichten met informatie over het succes of de resultaten van een actie. - Gebruik
role="alert"voor statusberichten met informatie over fouten. - Gebruik
role="progressbar"voor voortgangsindicatoren. - Gebruik
role="log"voor statusberichten die stap voor stap worden bijgewerkt.
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende schermlezers (bijvoorbeeld NVDA en VoiceOver)
Testprocedure
Test 1: Statusbericht
- Verken de pagina met muis en toetsenbord
- Bepaal welke elementen een statusbericht kunnen activeren:
- Formulieren (zowel correct als foutief invullen)
- Zoek- en filterfuncties
- Knoppen en links
- Automatische updates
- Bepaal voor elk element welk soort statusbericht het toont:
- Succesmelding (bijvoorbeeld “Verzoek verstuurd”)
- Melding over het aantal resultaten (bijvoorbeeld “43 zoekresultaten”)
- Foutmelding (bijvoorbeeld “Veld is verplicht”)
- Voortgangsindicator (bijvoorbeeld “Bestand uploaden: 45%”)
- Laad-indicator (bijvoorbeeld “Laden…”)
- Bepaal welke elementen een statusbericht kunnen activeren:
- Zoek in de code naar statusbericht containers en controleer of minstens één van de volgende aanwezig is:
- Of
role="alert"aanwezig is - Of
role="status"aanwezig is - Of
role="log"aanwezig is - Of
aria-live="polite"aanwezig is - Of
aria-live="assertive"aanwezig is
- Of
- Controleer of de pagina herlaadt na activatie
- Open de Inspector (Ontwikkelaarstools)
- Ga naar het tabblad “Netwerk” (Chrome) of “Netwerk” (Firefox)
- Trigger het statusbericht opnieuw
- Controleer of er een nieuw HTML-document wordt geladen:
- In Firefox: controleer in type “html”
- In Chrome: controleer in type “Document”
- Open de Inspector (Ontwikkelaarstools)
- Herlaad de pagina
- Schakel nu je schermlezer in, trigger het statusbericht opnieuw en controleer:
- Of de schermlezer de melding automatisch aankondigt
Belangrijk om te weten
Dit succescriterium is niet van toepassing als:
- Meldingen verschijnen in combinatie met een contextwijziging
- De pagina na het indienen van een formulier opnieuw laadt en dan een melding toont
Beoordeling
- Statusberichten moeten automatisch door een schermlezer worden aangekondigd zonder dat de focus wordt verplaatst