Nieuw in WCAG 2.2
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. Statusberichten geven bijvoorbeeld informatie over het succes of de resultaten van een actie, over fouten of over de voortgang van een proces. Denk aan meldingen zoals “Bezig met zoeken…” of “18 resultaten gevonden”.
Zorg dat deze statusberichten ook kunnen worden herkend door een schermlezer zodat iedereen dezelfde informatie krijgt. Gebruik de juiste ARIA-rollen voor de statusberichten.
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 een statusbericht al in de HTML voordat de pagina laadt (ook al zijn ze nog leeg).
- 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="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
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