WCAG 4.1.3 Mesaje de stare

Criteriul de succes 4.1.3 asigură că utilizatorii de cititoare de ecran aud mesajele scurte pe care utilizatorii văzători le văd apărând pe pagină. Când un client apasă „Adaugă în coș” și în colț apare o mică notă „Adăugat în coș”, un client nevăzător s-ar putea să nu audă nimic și să apese din nou butonul. Este de nivelul AA și apare în EN 301 549 drept clauza 9.4.1.3; Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

În conținutul implementat cu limbaje de marcare, mesajele de stare pot fi determinate programatic prin rol sau proprietăți, astfel încât tehnologiile asistive să le poată prezenta fără ca mesajul să primească focusul.

Un mesaj de stare este o modificare a conținutului care nu este o schimbare de context și care îl informează pe utilizator despre:

• succesul sau rezultatul unei acțiuni („Adăugat în coș”, „Cupon aplicat”, „12 produse găsite”);
• o stare de așteptare („Se încarcă…”);
• progresul unui proces („Se încarcă 40 %”);
• existența unor erori („3 câmpuri necesită atenție”).

Nu sunt acoperite: mesajele transmise prin mutarea focusului (cum ar fi un dialog modal) și conținutul afișat prin deschiderea meniurilor, a filelor sau a acordeoanelor — acestea sunt anunțate prin focus sau prin schimbări de stare. Lista de rezultate în sine nu este un mesaj de stare; numărul de rezultate este.

Greșeli tipice într-un magazin online

• notificarea „Adăugat în coș” sau actualizarea numărului din mini-coș care nu se află într-o regiune live;
• filtre care actualizează grila de produse și numărul „24 de produse” fără niciun anunț;
• un câmp pentru cupon care afișează „Cod aplicat” sau „Cod expirat” fără rol;
• rezumate ale erorilor din formular care apar după trimitere în timp ce focusul rămâne pe buton, fără role="alert";
• „Se încarcă mai multe produse…” la derularea infinită, care este doar o imagine de tip spinner;
• problema inversă: role="alert" sau aria-live="assertive" pe mesaje de rutină, care îi întrerup constant pe utilizatori.

Cum se verifică

Automat: verificatorul nostru nu are nicio regulă pentru acest criteriu. Nu declanșează acțiunile care fac să apară mesajele de stare, așa că este nevoie de o verificare manuală.

Manual: porniți un cititor de ecran (NVDA, VoiceOver). Adăugați un produs în coș, aplicați și eliminați un filtru, introduceți un cupon greșit, trimiteți un formular cu erori, încărcați mai multe produse. Fără să mutați focusul, ascultați dacă fiecare mesaj vizibil este anunțat. În instrumentele pentru dezvoltatori, verificați că elementul care conține mesajul are role="status", role="alert", role="log" sau aria-live și că există în pagină înainte de inserarea textului.

Cum se remediază

• Adăugați la încărcarea paginii un container gol cu role="status" (sau aria-live="polite") și inserați în el textul mesajului.
• Folosiți role="alert" doar pentru erori și mesaje urgente.
• Anunțați întregul mesaj, de exemplu „3 articole în coș”, folosind aria-atomic="true" dacă se schimbă doar o parte din el.
• Dați spinnerelor un echivalent text, precum „Se încarcă produsele”, în interiorul regiunii live.

Criterii conexe

• 3.3.1 Identificarea erorilor — erorile sunt descrise în text.
• 3.2.2 La introducerea datelor — actualizați conținutul în loc să schimbați contextul.
• 4.1.2 Nume, rol, valoare — controalele își expun starea tehnologiilor asistive.

Întrebări frecvente

Ce este un mesaj de stare în WCAG?

O modificare a conținutului care nu este o schimbare de context și care îl informează pe utilizator despre succesul sau rezultatul unei acțiuni, o stare de așteptare, progresul unui proces sau existența unor erori. Exemple: „Adăugat în coș”, „12 rezultate”, „Se salvează…”.

Ar trebui să folosesc role="status" sau role="alert"?

Folosiți role="status" (o regiune live politicoasă) pentru majoritatea mesajelor, cum ar fi actualizările coșului și numărul de rezultate. Păstrați role="alert" pentru mesajele importante și urgente, cum ar fi erorile, ca să nu fie întrerupte cititoarele de ecran tot timpul.

Este un dialog care preia focusul un mesaj de stare?

Nu. Când focusul se mută pe mesaj, ca în cazul unui dialog modal, acesta este deja anunțat, iar 4.1.3 nu se aplică. Criteriul se referă la mesajele care apar în timp ce focusul rămâne pe loc.

Poate un verificator automat să testeze 4.1.3?

Nu. Verificatorul vede pagina după încărcare, dar nu adaugă produse în coș și nu trimite formulare, așa că nu vede apariția mesajelor. Este nevoie de o verificare manuală cu un cititor de ecran.