Jak opravit tlačítko nebo odkaz bez názvu

Krátká odpověď

Každý odkaz a tlačítko potřebuje název, který odečítač obrazovky přečte. U ikon bez textu ho doplníte jedním ze tří způsobů: atributem aria-label, skrytým textem, nebo alternativním textem (alt) u obrázku uvnitř odkazu. Chyba bývá v šabloně, takže jedna oprava platí pro celý web.

Patří k nejčastějším chybám přístupnosti. V naší studii 279 českých a slovenských e‑shopů (automatický test axe-core, 20. 10. 2026) ji mělo 72 % obchodů.

Co znamená „tlačítko nebo odkaz bez názvu“?

Nevidomý člověk prochází web odečítačem obrazovky. Ten u každého prvku řekne, co to je a jak se jmenuje: „Hledat, tlačítko“ nebo „Košík, odkaz“. Když prvek obsahuje jen ikonu, odečítač nemá co přečíst. Ohlásí jen „tlačítko“, případně přečte adresu odkazu nebo název souboru obrázku. Člověk pak neví, co prvek udělá.

Stejný problém mají lidé, kteří web ovládají hlasem. Tlačítko „aktivují“ tak, že vysloví jeho název, a když žádný nemá, nejde to.

Pravidla WCAG 2.1, podle kterých se přístupnost posuzuje, k tomu mají tři kritéria (všechna úrovně A):

• 4.1.2 Název, role, hodnota – každý ovládací prvek má mít název, který program přečte.
• 2.4.4 Účel odkazu (v kontextu) – z textu odkazu má být jasné, kam vede.
• 1.1.1 Netextový obsah – obrázek, který něco sděluje, potřebuje textovou alternativu. U obrázku v odkazu je to právě název odkazu.

Kde se chyba nejčastěji schovává?

• lupa vyhledávání v hlavičce,
• ikona košíku, účtu a oblíbených položek (srdíčko),
• tlačítko menu na mobilu (tři čárky, „hamburger“),
• ikony Facebooku, Instagramu a dalších sítí v patičce,
• šipky a tečky u galerie nebo posuvníku s bannery,
• křížek, který zavírá okno nebo lištu,
• logo jako odkaz na úvodní stránku, když má obrázek prázdný nebo chybějící alt.

Jak opravit tlačítko s ikonou?

Nejrychlejší oprava je atribut aria-label přímo na tlačítku. Samotnou ikonu skryjte před odečítačem (aria-hidden="true"), aby ji nečetl zbytečně.

Špatně – odečítač řekne jen „tlačítko“:

<button class="hledat">
  <svg viewBox="0 0 24 24">
    <path d="…"/>
  </svg>
</button>

Správně:

<button
  class="hledat"
  aria-label="Hledat"
>
  <svg
    viewBox="0 0 24 24"
    aria-hidden="true"
    focusable="false"
  >
    <path d="…"/>
  </svg>
</button>

Stejně opravíte tlačítko menu (aria-label="Menu"), křížek (aria-label="Zavřít") nebo šipky galerie (aria-label="Další fotka"). Název popisuje, co prvek udělá, ne jak vypadá: „Hledat“, ne „Lupa“.

Kdy je lepší skrytý text?

Skrytý text je obyčejný text, který na obrazovce nevidíte, ale odečítač ho přečte. Hodí se, když název skládáte z víc částí, třeba u košíku s počtem položek, nebo když šablona generuje text a aria-label se do ní špatně dostává.

Správně – odečítač řekne „Košík, 3 položky, odkaz“:

<a href="/kosik/">
  <svg
    aria-hidden="true"
    focusable="false"
  >…</svg>
  <span class="visually-hidden">
    Košík,
  </span>
  <span class="pocet">3</span>
  <span class="visually-hidden">
    položky
  </span>
</a>

Třída visually-hidden text schová jen pro oči. Pokud ji vaše šablona nemá, přidejte do stylů:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Nepoužívejte display: none ani visibility: hidden. Takový text neuvidí ani odečítač.

Jak opravit obrázek v odkazu?

Když je v odkazu jen obrázek, název odkazu se bere z jeho atributu alt. Prázdný alt="" patří jen k ozdobným obrázkům. V odkazu bez dalšího textu znamená, že odkaz nemá žádný název.

Špatně:

<a href="/">
  <img src="logo.svg" alt="">
</a>
<a href="https://facebook.com/…">
  <img src="fb.png">
</a>

Správně:

<a href="/">
  <img
    src="logo.svg"
    alt="Název obchodu – úvodní stránka"
  >
</a>
<a href="https://facebook.com/…">
  <img src="fb.png" alt="Facebook">
</a>

Pokud je u obrázku i viditelný text („Facebook“), dejte obrázku naopak alt="", aby odečítač nečetl totéž dvakrát.

Na co si při opravě dát pozor?

• Viditelný text a aria-label se nesmí rozcházet. aria-label přebije text v tlačítku. Když na tlačítku stojí „Do košíku“ a v aria-label „Přidat produkt“, člověk ovládající web hlasem řekne „Do košíku“ a nic se nestane. WCAG to řeší kritériem 2.5.3 Popisek v názvu. Tlačítko s viditelným textem aria-label většinou vůbec nepotřebuje.
• Atribut title nestačí. Některé nástroje ho jako název uznají, ale na mobilu se nezobrazí a odečítače s ním nepracují spolehlivě.
• Název má dávat smysl sám o sobě. Deset odkazů „Více“ za sebou nikomu nepomůže. Lepší je „Více o dopravě“.

Jak chybu najdete sami?

1. Naše Kontrola webu zdarma. Zadáte adresu stránky a nález „Odkaz nebo tlačítko bez názvu“ ukáže, kolik takových prvků na stránce je, a vypíše kód prvních z nich. Kontrola čte HTML jedné stránky tak, jak ho posílá server. Prvky, které web doplní až skriptem (například menu nebo košík vykreslený JavaScriptem), nevidí. Zkontrolujte proto zvlášť i stránku kategorie a produktu.
2. Lighthouse v Chrome. Pravým tlačítkem na stránce zvolte Prozkoumat (Inspect), otevřete kartu Lighthouse a spusťte test přístupnosti. Chyba se tam jmenuje „Buttons do not have an accessible name“ nebo „Links do not have a discernible name“.
3. Panel Accessibility v nástrojích pro vývojáře. Klikněte na prvek v kartě Elements a v panelu Accessibility uvidíte jeho název (Name). Prázdný název je chyba.
4. WAVE od WebAIM označí přímo na stránce „Empty button“ a „Empty link“.

Jak na to ve WordPressu, Shoptetu nebo Webnode?

Ikony v hlavičce a patičce skoro vždy pocházejí ze šablony nebo z pluginu, ne z obsahu stránek. Postup proto záleží na tom, kam se dostanete:

• WordPress a další systémy, kde máte přístup k šabloně: úpravu dělejte v podřízené šabloně (child theme), jinak ji přepíše příští aktualizace. U obrázků z knihovny médií vyplňte pole pro alternativní text.
• Hostované platformy (Shoptet, Webnode a podobné): kód hlavičky obvykle dodává platforma. Jestli ho jde upravit, záleží na šabloně a tarifu. Když to nejde, napište podpoře, který prvek nemá přístupný název, a odkažte na kritérium WCAG 4.1.2.

Týká se to zákona o přístupnosti?

Pokud váš web prodává spotřebitelům nebo jim nabízí služby a nejste mikropodnik, nejspíš ano. Zákon č. 424/2023 Sb. se v praxi měří pravidly WCAG 2.1 úrovně AA a všechna kritéria výše do nich patří. Jestli se vás týká, vysvětluje článek Týká se zákon o přístupnosti i mého webu?

Kdy to zvládnete sami a kdy se vyplatí pomoc?

Sami to zvládnete, když máte přístup do šablony a jde o pár ikon v hlavičce a patičce. Oprava zabere minuty a po ní stačí znovu spustit kontrolu.

Pomoc se vyplatí, když ikony vykresluje skript nebo plugin, když web stojí na platformě, kde do kódu nevidíte, nebo když chcete mít jistotu, že projde celá cesta zákazníka od vyhledání po objednávku. Opravy děláme za 890 Kč / hod., u větších pevnou cenu řekneme předem. Audit webu za 7 900 Kč projde přístupnost automaticky i ručně a dostanete seznam chyb s návodem k opravě. Nejsme plátci DPH, ceny jsou konečné.

Další návody: Jak opravit pole formuláře bez popisku a Jak opravit nízký kontrast textu.