При работе с формами мы всегда должны делать выбор в пользу меток формы, описывающих метку.
Однако в современных приложениях многие дизайнеры хотят скрыть эти метки, поскольку они делают все громоздким.
Хорошими примерами форм без меток могут быть:
- поле поиска
- Форма подписки, которая достаточно понятна.
Общее, что мы видим в обоих примерах, – это форма с одним полем и кнопкой.
Часто бывает достаточно ясно, для чего нужна форма и что ожидается от пользователя.
В моем примере для описания этого для визуального читателя я использую подставку. Однако для людей с ослабленным зрением может быть неясно, что это за форма.
Чтобы сделать эту форму доступной, мы должны использовать невидимые метки для описания поля. Есть три варианта, которые мы можем использовать.
Элемент скрытой метки
Это наиболее семантический способ добавления метки для описания поля формы.
Мы устанавливаем его так же, как и обычную метку для поля формы, но используем CSS, чтобы скрыть его от браузера.
Считыватели экрана все равно смогут прочитать его таким образом.
<label class="hidden" for="search">Search</label>
<input type="text" id="search" />
Чтобы сделать элементы скрытыми для читателей экрана, мы должны использовать специальный CSS; я напишу об этом подробнее в следующей статье, поскольку здесь снова есть несколько вариантов.
Атрибут заголовка
Еще один способ сделать так, чтобы читатели экрана знали, для чего предназначено поле ввода, – это добавить к нему атрибут title.
Однако этот способ имеет недостаток – он показывает атрибут заголовка визуальным пользователям.
Решайте сами, приемлемо ли это для вашего случая использования.
<input id="search" type="text" title="Search" />
Атрибут Aria-label
Последний метод – это использование aria-label. Он работает так же, как и метод заголовка, но не отображается для визуальных пользователей.
Это самый безопасный способ добавления описательного текста без использования скрытых стилей.
<input id="search" type="text" aria-label="Search" />
Заключение
Есть три способа сделать поля формы без меток доступными, у всех трех есть свои сценарии использования, и разработчик сам решает, какой из них подходит лучше.
Мне нравится подход с меткой aria, поскольку он наименее навязчив в добавлении элементов, которые никто не увидит, но скрытая метка не менее хороша.
Я бы посоветовал прибегать к заголовку только в том случае, если у вас нет другого выбора.
Примечание: Вы должны использовать только один из трех методов, не комбинируйте их, так как программы чтения с экрана будут считывать информацию дважды.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.