4.1.3 Statusberichten – Niek Derksen

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 korte melding die verschijnt of verandert, zonder dat de focus verplaatst of de pagina opnieuw laadt. Het bericht geeft altijd informatie over één van deze vier dingen:

het succes of het resultaat van een actie (“Verzoek verstuurd”, “43 resultaten gevonden”)
de wachtstatus van een applicatie (“Laden…”)
de voortgang van een proces (“Bestand uploaden: 45%”)
fouten (“5 fouten op de pagina”)

Zorg dat een schermlezer deze berichten automatisch voorleest. Zo krijgt iemand die het bericht niet ziet dezelfde informatie. Dat doe je met een ARIA-rol of een ARIA-eigenschap in de code.

Een melding is géén statusbericht als:

de focus naar de melding gaat
er een nieuwe pagina laadt, of de pagina opnieuw laadt
er een nieuw tabblad of venster opent
er een dialoogvenster opent dat de focus krijgt
er content openklapt of dichtklapt, zoals bij een accordeon, menu of tabblad
er nieuwe bedieningselementen verschijnen, zoals extra formuliervelden

Ook de content zelf is geen statusbericht. De lijst met zoekresultaten is dus geen statusbericht. De tekst “43 resultaten gevonden” is dat wél.

Hoe pas je dit toe?

Zorg dat statusberichten ook beschikbaar zijn voor hulptechnologieën.
- 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.

Plaats elk statusbericht in een live region. Een live region is een deel van de pagina waarvan een schermlezer wijzigingen automatisch voorleest. Je maakt een live region met een rol of met het aria-live-attribuut.
- Gebruik role="status" voor het succes of resultaat van een actie, en voor een wachtstatus zoals “Laden…”.
- Gebruik role="alert" voor fouten en andere urgente meldingen. Een schermlezer onderbreekt hiervoor wat hij op dat moment voorleest.
- Gebruik role="log" voor berichten die na elkaar worden toegevoegd, zoals een logboek.
- Gebruik role="progressbar" voor een voortgangsbalk.
Zet de live region al bij het laden van de pagina in de code. Laat hem leeg en voeg pas tekst toe als het bericht verschijnt. Een live region die tegelijk met de tekst verschijnt, wordt door veel schermlezers niet voorgelezen.

Handige tips

Gebruik role="alert" alleen voor meldingen die echt dringend zijn. Een melding als “Opgeslagen” hoort in role="status".
Bestaat de melding uit een icoon, zoals een laadicoon? Geef het icoon dan ook een tekstalternatief (zie 1.1.1 Niet-tekstuele content).
Verdwijnt een melding als “Laden…” zonder dat er iets anders verschijnt? Meld dan ook dat het laden klaar is, bijvoorbeeld met “Resultaten geladen”.

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)

Uitzonderingen

Geen uitzonderingen

Geldt alleen voor:

statusberichten: berichten die de content veranderen zonder de context te wijzigen, en die de gebruiker informeren over het resultaat van een actie, een wachtstatus, de voortgang van een proces of een fout

Testprocedure

Test 1: Statusberichten

Verken de pagina
- Bepaal welke handelingen een melding tonen of veranderen:
  - Een formulier versturen, correct en met fouten
  - Zoeken en filteren
  - Iets toevoegen, opslaan of verwijderen
  - Een bestand uploaden
- Bepaal welke meldingen vanzelf verschijnen of veranderen
- Bepaal welke meldingen een statusbericht zijn:
  - De melding geeft informatie over het succes of de resultaten van een actie, de wachtstatus, de voortgang van een proces of fouten
  - De focus gaat niet naar de melding
  - De melding verschijnt zonder contextwijziging (zie 3.2.1 Bij focus)
Zoek in de code naar de container van elk statusbericht en controleer of minstens één van de volgende waar is:
- Of de container role="status" heeft
- Of de container role="alert" heeft
- Of de container role="log" heeft
- Of de container role="progressbar" heeft
- Of de container aria-live="polite" of aria-live="assertive" heeft
- Of de container een <output>-element is
Herlaad de pagina
Schakel een schermlezer in
Test de handelingen uit stap 1 opnieuw en controleer:
- Of de schermlezer elk statusbericht voorleest zonder dat de focus naar het bericht gaat
Herhaal stap 3 tot en met 5 met een andere schermlezer

Belangrijk om te weten

Dit succescriterium is niet van toepassing als een melding samen met een contextwijziging verschijnt. Bijvoorbeeld als de pagina na het versturen van een formulier opnieuw laadt en dan een melding toont.

Beoordeling

Een statusbericht moet in de code te bepalen zijn met role="status", role="alert", role="log", role="progressbar", aria-live="polite", aria-live="assertive", of een <output>-element op het bericht zelf of op een element eromheen
Een schermlezer moet het statusbericht voorlezen zonder dat de focus naar het bericht gaat

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent