WCAG 4.1.3 Stavové zprávy

Kritérium úspěšnosti 4.1.3 zajišťuje, že uživatelé čteček obrazovky uslyší krátké zprávy, které vidící uživatelé vidí na stránce objevit. Když zákazník stiskne „Přidat do košíku“ a v rohu se objeví malé upozornění „Přidáno do košíku“, nevidomý zákazník nemusí slyšet nic a stiskne tlačítko znovu. Jde o úroveň AA a v normě EN 301 549 je uvedeno jako článek 9.4.1.3. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

V obsahu vytvořeném pomocí značkovacích jazyků lze stavové zprávy programově určit pomocí role nebo vlastností, takže je asistivní technologie mohou předat, aniž by zpráva získala fokus.

Stavová zpráva je změna obsahu, která není změnou kontextu a informuje uživatele o:

• úspěchu nebo výsledku akce („Přidáno do košíku“, „Kupón uplatněn“, „Nalezeno 12 produktů“);
• čekání („Načítání…“);
• průběhu procesu („Nahrávání 40 %“);
• existenci chyb („3 pole vyžadují pozornost“).

Nevztahuje se na zprávy předávané přesunem fokusu (například modální dialog) ani na obsah zobrazený otevřením menu, záložek nebo akordeonů — ty se oznamují přes fokus nebo změnu stavu. Samotný seznam výsledků stavovou zprávou není; počet výsledků ano.

Typické chyby v e-shopu

• oznámení „Přidáno do košíku“ nebo změna počtu v mini košíku, které nejsou v živé oblasti;
• filtry, které potichu aktualizují mřížku produktů a počet „24 produktů“;
• pole pro kupón, které zobrazí „Kód uplatněn“ nebo „Platnost kódu vypršela“ bez role;
• souhrny chyb formuláře, které se po odeslání objeví, zatímco fokus zůstává na tlačítku, bez role="alert";
• „Načítání dalších produktů…“ u nekonečného posouvání, které je jen obrázkem spinneru;
• opačný problém: role="alert" nebo aria-live="assertive" u běžných zpráv, které uživatele neustále přerušují.

Jak to zkontrolovat

Automaticky: náš nástroj pro toto kritérium nemá pravidlo. Nespouští akce, po kterých se stavové zprávy objevují, proto je potřeba ruční kontrola.

Ručně: zapněte čtečku obrazovky (NVDA, VoiceOver). Přidejte produkt do košíku, použijte a zrušte filtr, zadejte špatný kupón, odešlete formulář s chybami, načtěte další produkty. Bez přesunu fokusu poslouchejte, zda je každá viditelná zpráva oznámena. V nástrojích pro vývojáře ověřte, že kontejner zprávy má role="status", role="alert", role="log" nebo aria-live a že na stránce existuje dřív, než se do něj vloží text.

Jak to opravit

• Při načtení stránky přidejte prázdný kontejner s role="status" (nebo aria-live="polite") a text zprávy do něj vkládejte.
• role="alert" používejte jen pro chyby a naléhavé zprávy.
• Oznamujte celou zprávu, například „3 položky v košíku“; pokud se mění jen její část, použijte aria-atomic="true".
• Spinnerům dejte v živé oblasti textový ekvivalent, například „Načítání produktů“.

Související kritéria

• 3.3.1 Identifikace chyb — chyby popsané textem.
• 3.2.2 Při vstupu — aktualizujte obsah místo změny kontextu.
• 4.1.2 Název, role, hodnota — ovládací prvky předávají svůj stav asistivním technologiím.

Časté otázky

Co je ve WCAG stavová zpráva?

Změna obsahu, která není změnou kontextu a informuje uživatele o úspěchu nebo výsledku akce, o čekání, o průběhu procesu nebo o existenci chyb. Příklady: „Přidáno do košíku“, „12 výsledků“, „Ukládání…“.

Mám použít role="status", nebo role="alert"?

Pro většinu zpráv, jako jsou změny v košíku a počty výsledků, použijte role="status" (zdvořilá živá oblast). role="alert" si nechte pro důležité, časově citlivé zprávy, jako jsou chyby, aby čtečky obrazovky uživatele neustále nepřerušovaly.

Je dialog, který převezme fokus, stavovou zprávou?

Ne. Když se fokus přesune na zprávu, jako u modálního dialogu, je už oznámena a 4.1.3 se neuplatní. Kritérium se týká zpráv, které se objeví, zatímco fokus zůstává na místě.

Dokáže 4.1.3 otestovat automatický nástroj?

Ne. Nástroj vidí stránku po načtení, ale nepřidává produkty do košíku ani neodesílá formuláře, takže nevidí, jak se zprávy objevují. Je potřeba ruční kontrola se čtečkou obrazovky.