WCAG 4.1.3 Statusmeddelanden

Meddelanden som visas utan att sidan laddas om, och utan att fokus flyttas, ska gå att läsa upp med skärmläsare. Det gäller till exempel ”Tillagd i varukorgen”, antalet varor efter en filtrering och beskedet att en rabattkod har godkänts. Den som ser skärmen märker meddelandet direkt, men utan rätt uppmärkning får den som använder skärmläsare aldrig veta att något hände.

• ”Tillagd i varukorgen” visas en kort stund i ett hörn och läses inte upp.
• Siffran på varukorgsikonen ändras, men ingen får veta att varan lades till.
• Produktlistan uppdateras efter ett filter utan att antalet träffar meddelas.
• Beskedet att rabattkoden gäller, eller inte gäller, visas bara på skärmen.
• Sökförslag dyker upp under sökfältet utan att det meddelas hur många de är.
• aria-live läggs på elementet först när meddelandet visas, så att skärmläsaren inte uppfattar det.

Lägg en tom ruta med role="status" i sidan från början och skriv in meddelandet i den när något händer. Fel som kunden måste åtgärda kan använda role="alert".

<div role="status" class="meddelande"></div>

<script>
  function laggIVarukorgen(produkt) {
    // ...
    document.querySelector(".meddelande").textContent =
      produkt + " har lagts i varukorgen.";
  }
</script>

Kontrollera själv

Månadsgranskningen kontrollerar en del av kravet: att felmeddelanden i formulär läses upp. Besked som ”Tillagd i varukorgen”, antalet träffar efter en filtrering och sökförslag behöver du prova själv med en skärmläsare, till exempel VoiceOver på en iPhone eller NVDA på Windows.

• Understanding 4.1.3 Status Messages hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 4.1.3 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.