Přejít na obsah
Pandus

WCAG 4.1.2 Název, role, hodnota

Aktualizováno 14. října 2026 · Čtení na 3 min

Úroveň
A · WCAG 2.0
EN 301 549
9.4.1.2
Oficiální text
Understanding 4.1.2 Name, Role, Value (W3C, v angličtině)

Kritérium úspěšnosti 4.1.2 zajišťuje, že čtečky obrazovky, hlasové ovládání a další asistivní technologie rozumí každému ovládacímu prvku na stránce a umí ho obsluhovat. Uživatel čtečky obrazovky slyší „tlačítko, Přidat do košíku“; uživatel hlasového ovládání řekne „klikni na Přidat do košíku“. Pokud prvek nemá název, má špatnou roli nebo stav, který se nikdy nezmění, tito uživatelé nemohou nakupovat. Jde o úroveň A a v normě EN 301 549 je uvedeno jako článek 9.4.1.2. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

U všech komponent uživatelského rozhraní — mimo jiné formulářových prvků, odkazů a komponent generovaných skripty:

  • lze programově určit název a roli;
  • stavy, vlastnosti a hodnoty, které může nastavit uživatel, lze nastavit programově;
  • oznámení o změnách těchto položek je dostupné uživatelským agentům včetně asistivních technologií.

W3C upozorňuje, že kritérium je určeno hlavně autorům, kteří si vlastní komponenty vytvářejí nebo skriptují. Standardní ovládací prvky HTML použité podle specifikace ho už splňují. Vlastní widgety — menu, záložky, akordeony, posuvníky, vlastní výběrové seznamy — potřebují role a stavy doplněné pomocí ARIA a tyto stavy se musí měnit spolu s widgetem.

Typické chyby v e-shopu

  • tlačítka jen s ikonou (košík, vyhledávání, zavřít, srdíčko seznamu přání) bez textu a bez aria-label;
  • odkazy z obrázků produktů, jejichž obrázek nemá alternativní text, takže odkaz nemá název;
  • výběr velikosti nebo barvy z elementů div s obsluhou kliknutí, bez role a bez stavu vybrání;
  • tlačítko mobilního menu, jehož aria-expanded zůstává „false“, i když je menu otevřené;
  • formulářová pole bez popisku nebo select bez názvu;
  • prvky skryté pomocí aria-hidden="true", které stále dostávají fokus klávesnice;
  • iframy pro video, mapy nebo platby bez title;
  • atributy ARIA, které jsou překlepnuté, nejsou pro danou roli povolené nebo mají neplatné hodnoty.

Jak to zkontrolovat

Automaticky: náš nástroj pro toto kritérium spouští mnoho pravidel, mimo jiné button-name, link-name, label, select-name, input-button-name, frame-title, aria-hidden-focus, nested-interactive, aria-required-attr, aria-valid-attr-value a další pravidla ARIA (viz seznam pravidel). Každý chybný prvek nahlásí i se selektorem. Neumí posoudit, zda je název smysluplný a zda se stavy při používání prvku mění.

Ručně: použijte čtečku obrazovky (NVDA ve Windows, VoiceOver v macOS nebo iOS) a projděte záhlaví, stránku produktu a pokladnu. U každého prvku poslouchejte, zda má rozumný název, správnou roli a aktuální stav. Otevřete a zavřete menu, akordeony a výběr variant a ověřte, že se změny stavu oznamují.

Jak to opravit

  • Používejte nativní prvky: <button> pro akce, <a href> pro odkazy, <input> a <select> s <label>.
  • Prvkům jen s ikonou dejte přístupný název pomocí vizuálně skrytého textu nebo aria-label.
  • U vlastních widgetů se řiďte vzory ARIA Authoring Practices a aktualizujte aria-expanded, aria-checked, aria-selected spolu s rozhraním.
  • Nikdy nedávejte prvky, které mohou získat fokus, do obsahu s aria-hidden; každému iframu dejte title.

Související kritéria

Časté otázky

Co znamená název, role, hodnota?

Název je to, jak se ovládací prvek jmenuje („Přidat do košíku“), role je druh prvku (tlačítko, odkaz, zaškrtávací políčko) a hodnota nebo stav je jeho aktuální nastavení (zaškrtnuto, rozbaleno, 3 položky). Asistivní technologie potřebují všechny tři.

Splňují standardní prvky HTML kritérium 4.1.2?

Ano, pokud jsou použity podle specifikace. Skutečné tlačítko, odkaz, input nebo select s popiskem předávají název, roli i hodnotu. Problémy obvykle vznikají u vlastních prvků sestavených z elementů div a span.

Najde automatický nástroj chyby 4.1.2?

Najde jich mnoho: tlačítka a odkazy bez názvu, formulářová pole bez popisku, neplatné nebo chybějící atributy ARIA, skryté prvky, které stále mohou získat fokus. Neumí posoudit, zda je název smysluplný a zda se stavy při používání prvku správně mění.

Je přidání ARIA vždy řešením?

Ne. Nativní prvek HTML je obvykle spolehlivější než ARIA přidaná k elementu div. Nesprávná ARIA může prvek zhoršit víc, než kdyby žádnou ARIA neměl.