Statusmeddelelser

Silktide beder dig om at bekræfte, at statusmeddelelser – toasts, snackbars, notifikationsbannere, bekræftelser og fejlmeddelelser – er sat op, så annoncerer dem, når de vises.

Dette er en : automatisering kan ikke pålideligt afgøre, hvilke elementer der er statusflader (klassenavne, sprog og minificeret markup varierer uendeligt), så Silktide viser prompten på hver side, og en person bekræfter det.

<!-- Tavs: skærmlæsere annoncerer ikke dette, når det vises -->
<div class="toast">Vare tilføjet til kurv</div>

<!-- Annonceret: role="status" gør det til en live region -->
<div class="toast" role="status">Vare tilføjet til kurv</div>

Hvorfor det er vigtigt

Statusmeddelelser rapporterer resultatet af noget, en bruger lige har gjort: "Formular gemt", "Vare tilføjet til kurv", "3 resultater fundet", "Noget gik galt". Seende brugere bemærker, når de vises; en skærmlæser læser det, der aktuelt har fokus, og en meddelelse, der vises et andet sted på siden, siger ingenting. Brugeren indsender en formular og hører stilhed – de kan ikke afgøre, om det virkede, mislykkedes eller stadig indlæses.

Når meddelelsen markeres som en , fortæller det , at den skal annoncere den i det øjeblik, den vises, uden at flytte brugerens fokus.

Hvad du skal tjekke

Find alle statusflader på siden (toasts, snackbars, flash-meddelelser, indlejrede succes-/fejlbannere, opdateringer af antal resultater).
Bekræft, at hver af dem – eller en permanent container, den skriver til – har role="status", role="alert", role="log" eller aria-live="polite" / aria-live="assertive".
Foretræk en live-region-container, der findes, når siden indlæses; indsæt kun meddelelsesteksten under kørsel. Live regioner, der oprettes samtidig med deres meddelelse, annonceres ofte ikke.

Hvis siden ikke har nogen statusmeddelelser, eller alle annonceres korrekt, fundet.

Sådan løser du det

Tilføj en live-region-rolle til meddelelsescontaineren:
- role="status" for rutineopdateringer såsom bekræftelser og antal resultater.
- role="alert" for vigtige, tidsfølsomme meddelelser såsom fejl.
Eller brug -attributten direkte: aria-live="polite" (venter på en pause i oplæsningen) eller aria-live="assertive" (afbryder straks).

Sådan tester Silktide dette

Silktide kan ikke pålideligt registrere statusflader automatisk – gæt baseret på klassenavne giver falsk tryghed og overser genereret eller ikke-engelsk markup – så dette tjek viser én prompt til gennemgang pr. side, der beskriver, hvad der skal bekræftes.