Каждому input нужен настоящий label
Связывайте подписи и поля, чтобы нажатия и чтение работали корректно
«Каждому input нужен настоящий label» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Почему метки важны
Поле формы без названия — это загадочная коробка. Настоящая метка точно сообщает каждому пользователю, зрячему или нет, что нужно ввести. 🏷️
Элемент label
Элемент label — встроенный в HTML способ назвать поле. Браузер, программы чтения с экрана и области нажатия понимают его автоматически.
Свяжите элементы с помощью for и id
Самый понятный способ связать элементы — указать for у метки, совпадающий с id поля ввода. Теперь они официально связаны.
<label for="email">Email</label>
<input id="email" type="email">Идентификаторы должны быть уникальными
id, на который вы ссылаетесь, должен быть уникальным на странице. Если два поля используют один id, связь незаметно перестаёт работать.
Можно также вложить поле
Можно также вложить поле ввода в метку. Идентификатор не нужен, поскольку вложенность ясно устанавливает связь.
<label>Email
<input type="email">
</label>Больше области для нажатия
Связанная метка предоставляет пользователям большую область для нажатия. Нажатие на текст переводит фокус на поле или отмечает его, что особенно удобно при неточных движениях и на небольших экранах.
Программы чтения с экрана её озвучивают
Когда фокус переходит на связанное поле, программа чтения с экрана сначала произносит метку. Без неё пользователь слышит только тип поля.
Одного title недостаточно
Атрибут title может отображаться при наведении, но ненадёжен на сенсорных устройствах и при навигации с клавиатуры. Он не заменяет настоящую метку.
Флажкам тоже нужны метки
Флажки и переключатели кажутся очевидными визуально, но именно метка делает их доступными для нажатия и озвучивания. Никогда не оставляйте их без меток.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Видимая метка лучше скрытой
По возможности оставляйте метки видимыми. Зрячие пользователи с высокой когнитивной нагрузкой получают от этого не меньшую пользу, чем пользователи программ чтения с экрана.
Когда метку необходимо скрыть
Если для текста в поле поиска нет места, скройте метку с помощью класса visually-hidden, но не используйте display none, чтобы она по-прежнему была доступна вспомогательным технологиям.
Быстрая проверка
Как метка понимает, какое поле ввода она называет?
Итоги
Каждому полю ввода нужна настоящая метка, связанная через for и id или вложением. Одна эта привычка делает формы удобными для нажатия, понятными и доступными для чтения. ✅
Часто задаваемые вопросы
Урок «Каждому input нужен настоящий label» бесплатный?
Да — полный текст урока «Каждому input нужен настоящий label» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Каждому input нужен настоящий label»?
Связывайте подписи и поля, чтобы нажатия и чтение работали корректно Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Каждому input нужен настоящий label»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Каждому input нужен настоящий label
- Placeholder — не подпись
- Группировка полей с помощью fieldset и legend
- Объявление справочного текста и обязательных полей