Форма, которую вы создаете, предназначена для людей. Люди используют разные устройства. Кто-то использует мышь, кто-то сенсорное устройство, кто-то клавиатуру, кто-то устройство, управляемое движениями глаз. Некоторые используют программу чтения с экрана, некоторые — небольшой экран, некоторые — программное обеспечение для увеличения текста. Все хотят использовать вашу форму. Узнайте, как сделать форму доступной и удобной для всех.
Убедитесь, что пользователи понимают назначение поля формы.
Существует множество элементов управления формой, которые вы можете выбрать. Что у них общего? Каждый элемент управления формой должен иметь связанный элемент <label> . Элемент <label> описывает назначение элемента управления формой. Текст <label> визуально связан с элементом управления формой и считывается средствами чтения с экрана.
Кроме того, нажатие или щелчок <label> фокусирует соответствующий элемент управления формой, делая его более крупной целью.
Используйте осмысленный HTML для доступа к встроенным функциям браузера.
Теоретически вы можете создать форму, используя только элементы <div> . Вы даже можете сделать его похожим на родную <form> . В чем проблема с использованием несемантических элементов?
Встроенные элементы формы предоставляют множество встроенных функций. Давайте посмотрим на пример.
Визуально <input> (первый в примере) и <div> выглядят одинаково. Вы даже можете вставить текст для обоих, поскольку <div> имеет атрибут contenteditable . Однако существует множество различий между использованием соответствующего элемента <input> и <div> , похожего на <input> .
Пользователь программы чтения с экрана не распознает <div> как элемент ввода и не может заполнить форму. Все, что слышит пользователь программы чтения с экрана, — это «Имя», без указания того, что элемент является элементом управления формой для добавления текста.
При нажатии на <div>Name</div> не фокусируется связанный с ним <div> , тогда как <label> и <input> соединяются с помощью атрибутов for и id .
После отправки формы данные, введенные в <div> , не включаются в запрос. Хотя прикрепление данных с помощью JavaScript возможно, <input> делает это по умолчанию.
Встроенные элементы формы имеют и другие особенности. Например, при наличии соответствующих элементов формы и правильного inputmode или type экранная клавиатура отображает соответствующие символы. Использование атрибута inputmode в <div> не может этого сделать.
Убедитесь, что пользователи знают об ожидаемом формате данных.
Вы можете определить различные правила проверки для элемента управления формой. Например, скажем, поле формы всегда должно содержать не менее восьми символов. Вы используете атрибут minlength , указывающий браузерам правило проверки. Как вы можете гарантировать, что пользователи также знают о правиле проверки? Скажи им.
Добавьте информацию об ожидаемом формате непосредственно под элементом управления формой. Чтобы прояснить ситуацию со вспомогательными устройствами, используйте атрибут aria-describedby в элементе управления формой и id в сообщении об ошибке с тем же значением, чтобы соединить оба.
Помогите пользователям найти сообщение об ошибке для элемента управления формой.
В предыдущем модуле о проверке вы узнали, как отображать сообщения об ошибках в случае ввода неверных данных.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Например, если поле имеет required атрибут и введены недопустимые данные, браузер отображает сообщение об ошибке рядом с элементом управления формой при отправке формы. Программы чтения с экрана также выводят сообщение об ошибке.
Вы также можете определить собственное сообщение об ошибке:
В этом примере необходимо внести дополнительные изменения, чтобы связать сообщение об ошибке с элементом управления формой.
Простой подход — использовать атрибут aria-describedby в элементе управления формой, который соответствует id в элементе сообщения об ошибке. Затем используйте aria-live="assertive" для сообщения об ошибке. Живые регионы ARIA сообщают пользователям программ чтения с экрана об ошибке в тот момент, когда ошибка отображается.
Проблема с этим подходом для форм с несколькими полями заключается в том, что aria-live обычно объявляет только о первой ошибке в случае нескольких ошибок. Как объясняется в этой статье о нескольких объявлениях aria-live об одном и том же действии, вы можете создать одно сообщение, объединив все ошибки. Другой подход — объявить об ошибках, а затем объявить об отдельных ошибках, когда поле находится в фокусе.
Убедитесь, что пользователи распознают ошибки
Иногда дизайнеры окрашивают недопустимое состояние в красный цвет, используя псевдокласс :invalid . Однако, чтобы сообщить об ошибке или успехе, никогда не следует полагаться только на цвет. Для людей с красно-зеленой цветовой слепотой зеленая и красная кайма выглядят почти одинаково. Невозможно определить, связано ли сообщение с ошибкой.
Помимо цвета, используйте значок или добавляйте к сообщениям об ошибках тип ошибки.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Помогите пользователям ориентироваться в вашей форме
Вы можете изменить визуальный порядок элементов управления формы с помощью CSS. Разрыв между визуальным порядком и навигацией с помощью клавиатуры (порядок DOM) является проблематичным для пользователей программ чтения с экрана и клавиатуры.
Узнайте больше о том, как обеспечить, чтобы визуальный порядок на странице соответствовал порядку DOM .
Помогите пользователям определить элемент управления формой, на котором они сейчас сосредоточены.
Используйте клавиатуру для навигации по этой форме . Заметили ли вы, что стиль элементов управления формы изменился, когда они стали активными? Это стиль фокусировки по умолчанию. Вы можете переопределить его с помощью псевдокласса CSS :focus . Какие бы стили вы ни использовали внутри :focus , всегда убедитесь, что визуальная разница между состоянием по умолчанию и состоянием фокуса распознаваема.
Узнайте больше о разработке индикаторов фокуса .
Убедитесь, что ваша форма удобна для использования
Вы можете выявить множество распространенных проблем, заполнив форму на разных устройствах. Используйте только клавиатуру, используйте программу чтения с экрана (например, NVDA в Windows или VoiceOver на Mac) или увеличьте страницу до 200%. Всегда проверяйте свои формы на разных платформах, особенно на устройствах или настройках, которые вы не используете каждый день. Знаете ли вы кого-нибудь, использующего программу чтения с экрана, или кого-то, кто использует программное обеспечение для увеличения текста? Попросите их заполнить вашу форму. Обзоры доступности — это здорово, а тестирование на реальных пользователях — еще лучше.
Узнайте больше о проверке доступности и о том, как проводить тестирование на реальных пользователях .