Een statusbericht dat de screenreader ook meldt

Een klant met een screenreader staat op de productpagina van een schoenenwinkel. Hij kiest maat 43 en drukt op “In winkelwagen”. Op het scherm verschijnt rechtsboven een groen balkje: “Toegevoegd aan uw winkelwagen”. Hij hoort niets. Dus drukt hij nog een keer. En nog een keer. Bij het afrekenen blijken er drie paar in zijn mandje te zitten. Dit is precies het probleem dat een goed gebouwd statusbericht voor de screenreader oplost.

Wat is een statusbericht?

WCAG noemt het in criterium 4.1.3 (niveau AA): een bericht dat de gebruiker informeert over het resultaat van een actie, de voortgang, of een fout, zonder dat de focus verschuift. Voorbeelden:

• “Product toegevoegd aan winkelwagen”
• “12 resultaten gevonden”
• “Uw gegevens zijn opgeslagen”
• “Bezig met laden…”
• “Coupon is ongeldig”

Een ziende bezoeker merkt zo’n bericht op omdat er iets verandert op het scherm. Een screenreader leest alleen voor waar de focus staat, of wat de gebruiker zelf opvraagt. Een nieuw stukje tekst ergens anders op de pagina blijft dus onopgemerkt, tenzij de code aangeeft dat het moet worden voorgelezen.

Niet alles is een statusbericht. Opent er een venster waar de focus heen gaat, of laadt er een nieuwe pagina, dan leest de screenreader dat al. 4.1.3 gaat over de stille veranderingen.

De oplossing: een live-regio

Met aria-live of een rol die dat inbouwt, markeert u een stuk van de pagina als live-regio. Verandert de tekst daarin, dan leest de screenreader die voor, zonder de focus te verplaatsen.

<div id="melding" role="status" aria-live="polite"></div>

<script>
  function meld(tekst) {
    document.getElementById('melding').textContent = tekst;
  }
  // na een geslaagde actie:
  meld('Hardloopschoen maat 43 toegevoegd aan uw winkelwagen.');
</script>

Het belangrijkste detail: de live-regio moet al in de pagina staan voordat de tekst verandert. Voegt u het hele element pas toe op het moment dat de melding verschijnt, dan missen veel screenreaders hem. Zet dus een lege container in de pagina, en vul die later.

Polite of assertive?

Waarde of rol	Gedrag	Gebruik voor
role="status" / aria-live="polite"	Wacht tot de screenreader klaar is met wat hij aan het voorlezen was	Bevestigingen, aantallen, voortgang
role="alert" / aria-live="assertive"	Onderbreekt direct	Echte fouten of dringende waarschuwingen

Kies standaard voor polite. Assertive onderbreekt alles en wordt snel vermoeiend. Een melding “Opgeslagen” die elke keer de gebruiker midden in een zin afkapt, is geen verbetering.

Drie situaties uit de praktijk

Toegevoegd aan winkelwagen

In WooCommerce verschijnt na het toevoegen vaak een melding bovenaan de pagina, of het aantal in het mandje-icoon verandert. Of dat wordt voorgelezen, hangt af van het thema en van de manier van toevoegen (met of zonder herladen). Herlaadt de pagina, dan is de melding bovenaan meestal niet genoeg: de screenreader begint gewoon bovenaan de pagina te lezen en de melding komt pas na het hele menu. Zet de focus dan op de melding, of gebruik een live-regio. Zeg in de melding ook wat er is toegevoegd, en geef een link naar de winkelwagen.

Zoekresultaten en filters

Filtert u een overzicht zonder dat de pagina herlaadt, dan verandert er voor een screenreadergebruiker niets hoorbaars. Een live-regio met “24 producten gevonden” lost dat op. Doe dit ook bij “Geen resultaten”. Meer over het filtergedeelte zelf leest u in toegankelijke filters in uw webshop.

Laden en bezig zijn

Een draaiend rondje zegt een screenreader niets. Meld “Bezig met laden” in een status-regio, en daarna het resultaat. Laat het bij langer laden niet elke seconde opnieuw voorlezen; één keer bij de start en één keer bij het einde is genoeg.

Foutmeldingen zijn een apart geval

Bij een formulier met fouten is een live-regio vaak niet de beste keuze. Daar is het meestal beter om de focus naar een samenvatting van de fouten te verplaatsen of naar het eerste foute veld, en de foutmelding per veld te koppelen. Dan weet de gebruiker niet alleen dat er iets misgaat, maar komt hij ook direct op de plek waar hij het kan herstellen. Hoe dat werkt, staat in foutmeldingen in formulieren.

Opslaan en versturen

Ook buiten de webshop komen stille meldingen veel voor. Een contactformulier dat na versturen alleen een groen vinkje toont, een instellingenpagina met “Wijzigingen opgeslagen” bovenaan, een nieuwsbriefaanmelding die met een klein tekstje onder het veld bevestigt. Vraag u bij elke actie af: hoe weet iemand die het scherm niet ziet dat het gelukt is? Vervangt het formulier zichzelf door een bedankboodschap, zet de focus dan op die boodschap, of meld hem via de live-regio.

Veelgemaakte fouten

• De live-regio wordt pas toegevoegd met de melding. Dan wordt hij vaak niet voorgelezen.
• De hele productlijst is een live-regio. Na elk filter wordt alles voorgelezen. Gebruik een aparte, korte melding.
• Dezelfde tekst twee keer achter elkaar. Zet iemand twee producten na elkaar in het mandje, dan verandert de tekst niet en zwijgt de screenreader. Maak de tekst specifiek, of maak de regio eerst kort leeg.
• De melding verdwijnt na twee seconden. Visueel is dat soms prima, maar zorg dat de tekst lang genoeg blijft staan om gelezen te worden, ook door mensen die langzaam lezen of vergroting gebruiken.
• Alles is assertive. Bewaar dat voor echte noodgevallen.

Hoort de screenreader uw statusbericht? Zo test u het

1. Zet NVDA (gratis, Windows) of VoiceOver (Mac en iPhone) aan.
2. Voer de actie uit: product toevoegen, filteren, zoeken, formulier opslaan.
3. Luister. Hoort u de melding? Hoort u hem één keer, op een redelijk moment?
4. Herhaal de actie direct. Hoort u hem opnieuw?

Uitleg over het testen met voorleessoftware vindt u bij uw website testen met een screenreader. Een melding die gehoord wordt, voorkomt dubbele bestellingen, gemiste resultaten en frustratie. Het is een kleine wijziging met veel effect, en een goed voorbeeld van wat u op onze overzichtspagina over toegankelijkheid verder kunt aanpakken.