Dostępnik o sklepowym koszyku

Znowu wracam do kryterium, które w audycie wywołuje najwięcej pytań: 4.1.3 Komunikaty o stanie. Pracując nad sklepem internetowym usłyszałem od deweloperskiej firmy: „przecież koszyk jest cały czas widoczny, o co chodzi?”. No właśnie — nie wszyscy patrzą na koszyk, niektórzy słuchają. A komunikaty o stanie mają mieć postać, którą czytnik ekranu ogłosi bez proszenia o skupienie.

Rozkładam to na czynniki: co WCAG uważa za komunikat o stanie (wynik działania, zmiana stanu, postęp, błąd), co znaczy „programowo określone” bez zmiany kontekstu, i jak ich nie mylić ze zwykłą treścią, która zastępuje poprzednią.

W części technicznej pokazuję trzy role, które rzeczywiście są regionami na żywo:

• role="status" — uprzejme komunikaty, czytane w ciszy („2 produkty w koszyku”);
• role="alert" — pilne, przerywające („Kupon nieprawidłowy”);
• role="log" — kolejkowane przyrosty (czat, logi).

I przy okazji rozprawiam się z częstym błędem: progressbar to nie region na żywo — nie ogłasza zmian sam z siebie, a zamieniony w rozgadany live region potrafi zablokować syntezator mowy. Do postępu używaj status z komunikatem etapowym („50 proc.”, „gotowe”), a nie migającego licznika.

Po drodze pilnujesz kilku atrybutów: aria-atomic="true" w komunikatach, które niosą sens w całości, oraz aria-relevant — bo usunięcia (removals) ogłasza się oszczędnie i tylko jako sugestię dla czytnika.

Warto przeczytać w całości: Dostępnik o sklepowym koszyku