Jak opravit pole formuláře bez popisku

Krátká odpověď

Ke každému poli formuláře přidejte element <label> a propojte ho s polem: for u popisku se musí shodovat s id pole. Kde viditelný popisek nechcete, například u vyhledávání v hlavičce, použijte skrytý <label> nebo aria-label. Šedý text uvnitř pole (placeholder) popisek nenahrazuje.

V naší studii 279 českých a slovenských e‑shopů (automatický test axe-core, 20. 10. 2026) mělo pole bez popisku 30 % obchodů. Pole, která mají aspoň placeholder, jsme do toho čísla nepočítali.

Komu pole bez popisku vadí?

• Nevidomým. Odečítač obrazovky u pole bez popisku řekne jen „editační pole“. Člověk neví, jestli má napsat jméno, e-mail, nebo číslo objednávky.
• Lidem, kteří ovládají web hlasem. Do pole se přesouvají vyslovením jeho názvu.
• Všem na mobilu. Kliknutím na propojený popisek se kurzor přesune do pole a u zaškrtávacího políčka se políčko zaškrtne. Malý čtvereček u souhlasu s podmínkami je tak mnohem snazší trefit.

Pravidla WCAG 2.1 to pokrývají třemi kritérii úrovně A: 1.3.1 Informace a vztahy (popisek musí být s polem propojený i v kódu), 3.3.2 Popisky nebo instrukce (u pole má být vidět, co do něj patří) a 4.1.2 Název, role, hodnota.

Je šedý text v poli (placeholder) popisek?

Není. Placeholder zmizí, jakmile začnete psát. Kdo se k poli vrátí nebo si chce před odesláním zkontrolovat, co vyplnil, už nevidí, co do něj patřilo. Navíc bývá světle šedý a špatně čitelný.

Nástroje se v tom liší. Odečítače placeholder obvykle přečtou a test axe-core (a s ním Lighthouse) pole s placeholderem za chybu nepovažuje. Naše Kontrola webu ho hlásí jako drobnost „Popisek jen jako šedý text v poli“. W3C v návodu k přístupným formulářům píše výslovně, že placeholder popisek nenahrazuje.

Špatně:

<input
  type="email"
  name="email"
  placeholder="Váš e-mail"
>

Správně – popisek zůstane vidět, placeholder ukazuje jen příklad:

<label for="email">E-mail</label>
<input
  type="email"
  id="email"
  name="email"
  autocomplete="email"
  placeholder="jana.novakova@example.cz"
>

Jak popisek správně propojit s polem?

Popisek je s polem propojený, když hodnota for přesně odpovídá id pole. Druhá možnost je pole do popisku vložit.

Špatně – text vypadá jako popisek, ale s polem není spojený:

<p>Telefon</p>
<input type="tel" name="telefon">

Správně – propojení přes for a id:

<label for="telefon">Telefon</label>
<input
  type="tel"
  id="telefon"
  name="telefon"
  autocomplete="tel"
>

Správně – pole uvnitř popisku (typicky souhlas s podmínkami):

<label>
  <input
    type="checkbox"
    name="souhlas"
    required
  >
  Souhlasím s obchodními podmínkami
</label>

Totéž platí pro rozbalovací seznam <select> a víceřádkové pole <textarea>.

Jak opravit vyhledávání v hlavičce?

Vyhledávací pole bývá jen s lupou a placeholderem „Hledat…“. Viditelný popisek tam většinou nechcete, stačí ho skrýt pro oči. A nezapomeňte na tlačítko s lupou: i to potřebuje název (viz Jak opravit tlačítko nebo odkaz bez názvu).

<form role="search" action="/hledat/">
  <label
    for="hledat"
    class="visually-hidden"
  >Hledat v obchodě</label>
  <input
    type="search"
    id="hledat"
    name="q"
    placeholder="Hledat…"
  >
  <button
    type="submit"
    aria-label="Hledat"
  >
    <svg
      aria-hidden="true"
      focusable="false"
    >…</svg>
  </button>
</form>

Třídu visually-hidden najdete v předchozím návodu. Místo skrytého popisku můžete dát poli i aria-label="Hledat v obchodě".

Jak opravit přihlášení k newsletteru v patičce?

Patička s jediným polem „Váš e-mail“ a tlačítkem „Odebírat“ je jedno z nejčastějších míst s touto chybou. Je na každé stránce, takže se chyba v testu objeví všude. Oprava v šabloně ji odstraní najednou:

<form
  action="/newsletter/"
  method="post"
>
  <label for="nl-email">
    E-mail pro novinky
  </label>
  <input
    type="email"
    id="nl-email"
    name="email"
    autocomplete="email"
    required
  >
  <button type="submit">
    Odebírat
  </button>
</form>

Atribut autocomplete="email" umožní prohlížeči adresu doplnit. Pomáhá lidem s motorickým postižením. WCAG 2.1 chce, aby u polí s údaji o uživateli šlo jejich účel rozpoznat programem, a autocomplete je k tomu běžný způsob (kritérium 1.3.5 Určení účelu vstupu, úroveň AA).

Kdy použít aria-labelledby?

Když text, který pole popisuje, už na stránce je, nemusíte ho opakovat. Atributem aria-labelledby na něj pole odkáže. Typický příklad je počet kusů v košíku, kde pole popisuje název produktu a záhlaví sloupce:

<th id="sl-pocet">Počet kusů</th>
…
<td id="p-1234">Hrnek modrý 300 ml</td>
<td>
  <input
    type="number"
    aria-labelledby="p-1234 sl-pocet"
    value="1"
  >
</td>

Odečítač řekne „Hrnek modrý 300 ml Počet kusů“. Pozor na to, aby každé id bylo na stránce jen jednou. Když se opakuje, popisek se může navázat na špatné pole.

Jak chybu najdete sami?

1. Klikněte na popisek. Když se kurzor přesune do pole, je propojení v pořádku. Když ne, popisek s polem spojený není.
2. Naše Kontrola webu zdarma. Hlásí „Pole formuláře bez popisku“ (zásadní) a „Popisek jen jako šedý text v poli“ (drobnost) a ukáže kód prvních polí. Kontroluje jednu stránku tak, jak ji posílá server. Zadejte proto zvlášť i adresu kontaktní nebo objednávkové stránky. Formuláře, které se objeví až skriptem (vyskakovací okno, krok v pokladně), nevidí.
3. Lighthouse v Chrome. V nástrojích pro vývojáře (Prozkoumat) na kartě Lighthouse spusťte test přístupnosti. Chyba se jmenuje „Form elements do not have associated labels“.
4. WAVE od WebAIM označí pole s chybou „Missing form label“.

Jak na to ve WordPressu, Shoptetu nebo Webnode?

• Pluginy na formuláře (kontaktní formulář, newsletter): v nastavení pole zkontrolujte, jestli vyplňujete popisek (label), nebo jen zástupný text. Některé šablony popisky schovávají stylem. Pak je potřeba upravit CSS, ne formulář.
• Hostované platformy (Shoptet, Webnode a podobné): vyhledávání, košík a přihlášení k newsletteru obvykle dodává platforma. Jestli jdou upravit, záleží na šabloně a tarifu. Když to nejde, napište podpoře, které pole nemá popisek, a odkažte na kritéria WCAG 1.3.1 a 3.3.2.

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

Formuláře jsou u e‑shopu i u webu se službami hlavní částí cesty k objednávce. Pokud se na vás zákon č. 424/2023 Sb. vztahuje, musí jít vyplnit i s odečítačem. 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 u jednoduchého kontaktního formuláře nebo newsletteru, kde máte přístup k HTML nebo nastavení pluginu.

Pomoc se vyplatí u košíku a pokladny, které generuje platforma nebo skript, a když chcete vědět, jestli jde celou objednávku dokončit klávesnicí a s odečítačem. To automatická kontrola nezjistí. Opravy děláme za 890 Kč / hod., u větších pevnou cenu řekneme předem. Audit webu za 7 900 Kč projde formuláře i ručně. Nejsme plátci DPH, ceny jsou konečné.

Další návody: Jak opravit tlačítko nebo odkaz bez názvu a Jak opravit nízký kontrast textu.