Prvek <label> poskytuje ovládacímu prvku formuláře přístupný název a větší cílovou oblast pro kliknutí. Existují dva způsoby jejich přidružení a jejich správné propojení je pro přístupnost nezbytné.
for + id (explicitní)Email address
Atribut for popisku odpovídá atributu id vstupu. Funguje to i když si nejsou v markupu sousední.
<label>
Email address
<input type="email" />
</label>
Vstup je vnořen uvnitř popisku — id není potřeba.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Zástupný placeholder zmizí, když uživatel píše, a není spolehlivě vyhlášen — nikdy jej nepoužívejte jako jediný popisek.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Používejte aria-label (nebo aria-labelledby) pouze pokud viditelný popisek opravdu není možný.
Správ provázané popisky jsou jednou z nejdůležitějších praktik přístupnosti formulářů — poskytují každému ovládacímu prvku jméno pro asistenční technologie a zvětšují cílové oblasti kliknutí pro všechny.
Dávejte přednost skutečné <label>; vraťte se k aria-label pouze když je to nezbytné a nikdy se nepolhbujte na placeholder jako na popisek.