Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Если вы правильно пишите HTML, то вы можете сразу сделать формы в ваших проектах доступными и удобными. Я подобрал несколько кейсов, чтобы показать вам, как можно улучшить UX форм только с помощью HTML.
Паттерн скрыть и показать пароль
В последнее время паттерн показать и скрыть пароль является очень популярным. Но иногда я встречаю ошибку в выборе HTML элемента, которая ухудшает удобство взаимодействия.
Многие думают, что пользователи только используют мышь при взаимодействии с элементом. Но это только один из кейсов.
Мы также можем подумать о людях, которые используют только клавиатуру. Удобно же, при вводе пароля быстро переключиться на кнопку с помощью клавиши tab, чтобы показать пароль.
Также мы можем подумать о пользователях скринридеров, которым также надо распознать элемент, а для этого он должен быть интерактивным.
И только один элемент отвечает всем этим требованиям — это элемент button.
Отображение удобной виртуальной клавиатуры при вводе кода авторизации
Если мы хотим делать удобные для пользователя формы, то нам следует правильно отображать виртуальную клавиатуру, с помощью которой осуществляется ввод. Для решения этой задачи обычно хватает атрибута type.
Например, при вводе номера телефона часто используется type="tel", чтобы у пользователя отображалась клавиатура с цифрами и специальным символами.
Но бывают ситуации, когда значений атрибута type не хватает. Например, при вводе цифрового кода авторизации пользователю нужны только цифры, а такого значения для атрибута type не существует. Поэтому часто приходится использовать type="tel".
Но пользователю в этой ситуации не нужны специальные символы для ввода номера телефона. И здесь нам может помочь атрибут inputmode, который также помогает браузеру правильно отображать виртуальную клавиатуру.
Для случая ввода цифрового кода нам достаточно использовать значение numeric, и пользователь увидит клавиатуру только с цифрами.
P.S. Если у вас есть вопросы по доступности, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле Хабра.
