WCAG 1.3.3 Smyslové charakteristiky

Kritérium úspěšnosti 1.3.3 zajišťuje, že lidé zvládnou postupovat podle instrukcí, i když nevidí tvar, barvu, velikost nebo polohu něčeho, nebo neslyší zvuk. To zahrnuje uživatele čteček obrazovky, lidi s poruchou barevného vidění a lidi, kteří používají zvětšené nebo přeskupené rozvržení, kde „vpravo“ už vpravo není. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.1.3.3). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Instrukce k pochopení a ovládání obsahu nesmí spoléhat výhradně na smyslové charakteristiky prvků, jako jsou:

• tvar („stiskněte kulaté tlačítko“);
• barva („pole označená červeně jsou povinná“);
• velikost („klikněte na velké tlačítko“);
• vizuální umístění nebo orientace („použijte menu vlevo“);
• zvuk („pokračujte, až uslyšíte pípnutí“).

Instrukce tyto charakteristiky zmínit může, ale musí také uvést něco, co na smyslu nezávisí — obvykle viditelný název nebo popisek prvku.

WCAG poznamenává, že úplné požadavky na barvu obsahuje zásada 1.4.

Typické chyby v e-shopu

• „Klikněte na zelené tlačítko a dokončete objednávku“;
• „Použijte šipky vpravo a zobrazte další produkty“ u karuselu;
• „Povinná pole jsou označena červeně“ bez jiného označení;
• „Klepněte na ikonu nahoře a otevřete košík“, když ikona nemá název;
• něco se potvrdí zvukem bez textové zprávy.

Jak to zkontrolovat

Automaticky: k tomuto kritériu se v našem nástroji neváže žádné automatické pravidlo. Najít instrukce, které spoléhají na tvar nebo polohu, znamená číst text a rozumět mu. Je potřeba ruční kontrola.

Ručně: prohledejte šablony, pokladnu, formuláře, stránky nápovědy a chybová hlášení na slova jako „vlevo“, „vpravo“, „výše“, „níže“, „kulatý“, „čtvercový“, „zelený“, „červený“, „velký“, „ikona“ a „uslyšíte“. U každého výskytu ověřte, že je prvek identifikován i svým názvem nebo popiskem.

Jak to opravit

• Pojmenujte prvek: „Zvolte Odeslat objednávku“ místo „klikněte na zelené tlačítko“.
• Kombinujte signály: „Povinná pole jsou označena hvězdičkou (*) a slovem povinné“.
• Dejte tlačítkům s ikonou textový popisek nebo přístupný název a tento název používejte v instrukcích.
• Ke zvukům přidejte viditelnou textovou zprávu.

Související kritéria

• 1.4.1 Použití barvy — barva jako jediný vizuální signál.
• 1.3.1 Informace a vztahy — struktura a popisky v kódu.
• 1.3.2 Smysluplné pořadí — pořadí čtení.

Časté otázky

Mohu stále napsat „tlačítko vpravo“?

Ano, pokud instrukce tlačítko také pojmenuje, například „Zvolte Pokračovat, tlačítko vpravo“. Poloha může být pomocí navíc, ale ne jediným způsobem, jak prvek najít.

Jsou povolena slova „výše“ a „níže“?

Pokud „výše“ znamená dříve a „níže“ později v obsahu, jsou formulace jako „viz odkazy níže“ v pořádku, jestliže obsah v pořadí čtení skutečně na tom místě je a odkaz je jasný.

Čím se 1.3.3 liší od 1.4.1 Použití barvy?

1.3.3 se týká instrukcí, které spoléhají jen na smyslové charakteristiky, včetně barvy. 1.4.1 pokrývá jakékoli použití barvy jako jediného vizuálního prostředku ke sdělení informace, nejen v instrukcích.