Statusmeddelanden

Silktide uppmanar dig att kontrollera att statusmeddelanden – toastmeddelanden, snackbars, aviseringsbanners samt bekräftelser och felmeddelanden – är konfigurerade så att läser upp dem när de visas.

Detta är en : automatisering kan inte på ett tillförlitligt sätt avgöra vilka element som är statusytor (klassnamn, språk och minifierad kod varierar i all oändlighet), så Silktide visar prompten på varje sida och en person bekräftar den.

<!-- Tyst: skärmläsare läser inte upp detta när det visas -->
<div class="toast">Item added to cart</div>

<!-- Uppläst: role="status" gör detta till en live-region -->
<div class="toast" role="status">Item added to cart</div>

Varför detta är viktigt

Statusmeddelanden visar resultatet av det användaren just gjorde: ”Formulär sparat”, ”Objekt har lagts till i varukorgen”, ”3 resultat hittades”, ”Något gick fel”. Seende användare lägger märke till när de visas; en skärmläsare läser upp det som för närvarande har fokus, och ett meddelande som visas någon annanstans på sidan säger ingenting. Användaren skickar in ett formulär och möts av tystnad – hen kan inte avgöra om det fungerade, misslyckades eller fortfarande läser in.

Att markera meddelandet som en talar om för att läsa upp det så snart det visas, utan att flytta användarens fokus.

Vad du ska kontrollera

Leta reda på alla statusytor på sidan (toastmeddelanden, snackbars, flashmeddelanden, infogade bekräftelse-/felbanners och uppdateringar av resultatantal).
Bekräfta att varje sådan yta – eller en permanent behållare som den skriver till – har role="status", role="alert", role="log" eller aria-live="polite" / aria-live="assertive".
Föredra en live-region-behållare som finns när sidan läses in och injicera endast meddelandetexten under körning. Live-regioner som skapas samtidigt som meddelandet läses ofta inte upp.

Om sidan inte har några statusmeddelanden, eller om alla läses upp korrekt, du resultatet.

Så åtgärdar du det

Lägg till en live-region-roll i meddelandets behållare:
- role="status" för rutinuppdateringar, till exempel bekräftelser och resultatantal.
- role="alert" för viktiga, tidskänsliga meddelanden, till exempel fel.
Du kan också använda -attributet direkt: aria-live="polite" (väntar tills det blir en paus i talet) eller aria-live="assertive" (avbryter omedelbart).

Så testar Silktide detta

Silktide kan inte på ett tillförlitligt sätt upptäcka statusytor automatiskt – att gissa utifrån klassnamn skapar en falsk trygghet och missar genererad kod eller kod på andra språk – så denna kontroll skapar en granskningsprompt per sida som beskriver vad som ska verifieras.