Практика: компактное поле с доступной скрытой подписью
Иногда назначение компактного поля понятно по окружающему интерфейсу, но поле всё равно нуждается в программно связанной подписи. Упражнение показывает визуальное скрытие label с сохранением его в дереве доступности.
Назначение
Иногда назначение компактного поля понятно по окружающему интерфейсу, но поле всё равно нуждается в программно связанной подписи. Упражнение показывает визуальное скрытие label с сохранением его в дереве доступности.
Как это работает
Свяжите for и id. Специальный CSS уменьшает и обрезает только подпись, не применяя display:none. Видимая подпись обычно предпочтительнее; скрытый вариант используйте только когда контекст уже даёт понятное название зрячему пользователю.
Пример
<style>.sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}</style>
<section><h2>Поиск по урокам</h2><label class="sr-label" for="lesson-search">Поиск по урокам</label><input id="lesson-search" type="search" name="q"></section>Что должно получиться
Поле остаётся видимым и доступным для ввода. Подпись визуально скрыта, но должна участвовать в вычислении доступного имени. Кнопки отправки и обработчика поиска здесь нет: это упражнение по разметке поля.
Граница применения и частая ошибка
Placeholder не заменяет label и исчезает при вводе. Не применяйте этот класс к интерактивным элементам без отдельного поведения при фокусе: невидимая фокусируемая кнопка запутает пользователя. Не скрывайте единственную понятную инструкцию.
Самостоятельная проверка
Проверьте доступное имя поля в инструментах браузера, затем отключите CSS. Сравните с display:none на копии подписи. После этого оцените реальный макет: если контекст неоднозначен, верните видимый label.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.