Метка <label> дает элементу управления формой доступное имя и увеличивает область клика. Существует два способа их связывания, и это необходимо для обеспечения доступности.
Способ 1: for + id (явный)
html
Email address
Метка <label> дает элементу управления формой доступное имя и увеличивает область клика. Существует два способа их связывания, и это необходимо для обеспечения доступности.
for + id (явный)Email address
Атрибут for метки соответствует атрибуту id поля ввода. Это работает даже если они не расположены рядом в разметке.
<label>
Email address
<input type="email" />
</label>
Поле ввода вложено внутри метки — id не требуется.
<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 -->
Плейсхолдер placeholder исчезает при вводе текста и не объявляется надежно — никогда не используйте его в качестве единственной метки.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Используйте aria-label (или aria-labelledby) только если видимая метка действительно невозможна.
Правильно связанные метки — одна из наиболее эффективных практик доступности для форм — они дают каждому элементу управления имя для вспомогательных технологий и увеличивают области клика для всех.
Предпочитайте реальную метку <label>; переходите на aria-label только при необходимости и никогда не полагайтесь на placeholder в качестве метки.