Заполнить форму можно разными способами. Люди могут использовать вашу форму на своем смартфоне, стоя в переполненном автобусе, с помощью программы чтения с экрана или со старого ноутбука. Давайте посмотрим, как можно обеспечить работу формы на разных устройствах и в разных контекстах.
Убедитесь, что ваша форма работает для пользователей клавиатуры.
Хорошей первой проверкой, чтобы убедиться, что ваша форма доступна, является ее заполнение, используя только клавиатуру. Откройте форму и попробуйте перемещаться с помощью клавиши tab . Понятно, какое поле формы сейчас активно? Чтобы помочь пользователям понять, какое поле формы активно, вы можете использовать индикаторы фокуса.
Попробуйте . Используйте клавишу tab , чтобы перейти к вводу. Видите ли вы контур, когда вход активен? Это индикатор фокуса. Вы можете добавить индикаторы фокуса, используя псевдокласс CSS :focus .
input:focus {
outline: 4px solid #222;
}
Узнайте больше о разработке доступных индикаторов фокуса .
Помогите пользователям перемещаться по вашей форме
Еще один хороший тест на удобство использования и доступность — убедиться, что логический порядок табуляции соответствует визуальному порядку табуляции. Как проверить порядок табуляции? Полностью пройдите через форму. Замечаете ли вы какие-нибудь нелогичные переходы в навигации? Убедитесь, что порядок DOM соответствует визуальному порядку.
Узнайте больше о том, как обеспечить, чтобы визуальный порядок на странице соответствовал порядку DOM .
Помогите пользователям заполнить форму на сенсорных устройствах.
Большой! Вы убедились, что ваша форма работает с клавиатурой. Теперь давайте посмотрим, как можно обеспечить его работу и на сенсорных устройствах, таких как мобильные телефоны.
Откройте форму на сенсорном устройстве, заполните все поля и отправьте форму. Вам приходилось нажимать несколько раз, чтобы выбрать элемент управления формой? Проблема может заключаться в том, что области касания слишком малы. Убедитесь, что целевой размер кнопки составляет не менее 48 пикселей и что каждый <input> и <select> достаточно велик, чтобы на него можно было нажать. Вы также можете помочь пользователям перемещаться по форме на сенсорных устройствах, добавив достаточное пространство между элементами управления формой.
Убедитесь, что пользователи получают оптимизированную клавиатуру
В предыдущих модулях вы узнали, как активировать другую экранную клавиатуру с помощью атрибутов type или inputmode .
Откройте демо-версию на своем телефоне и коснитесь поля номера телефона. Обратите внимание, что по умолчанию на экранной клавиатуре отображаются цифры вместе с другими символами, которые могут понадобиться для номера телефона. Используйте type="tel" чтобы оптимизировать экранную клавиатуру для ввода телефонных номеров.