Практическое руководство по созданию доступных форм

Перевод статьи «A practical guide to accessibility for forms».

При изучении программирования одной из особенно сложных тем является получение данных от пользователей. Для сбора данных нужны формы того или иного вида.

Формы мы используем везде: для сбора отзывов, регистрации, входа в систему, совершения покупок и т. д. Формы это очень важная часть веба, а значит, нужно позаботиться о том, чтобы взаимодействовать с ними мог каждый, независимо от физических возможностей и их ограниченности.

Почему это важно

Доступность сайтов и приложений часто воспринимают только как приспособленность для слепых пользователей, но на самом деле это куда более широкое понятие. У людей бывают очень разная ограниченность физических возможностей. Это могут быть временные ограничения, например, вследствие травм рук, ситуационные ограничения вроде медленного интернета и постоянные, такие как слепота.

Нам нужно сделать так, чтобы формы наших сайтов и приложений были доступны и удобны для всех пользователей и чтобы пользователю приходилось совершать как можно меньше действий. Когда формы доступны, ими легче пользоваться всем, не только людям с ограниченными возможностями.

Следует учитывать, что во многих странах (в частности, в США, Великобритании и Канаде) бизнес обязан обеспечивать соответствие своих продуктов стандартам доступности.

В 2016 году корпорация Target выплатила Национальной федерации слепых сумму, исчисляющуюся миллионами, за то, что на ее сайте не было alt-текста для изображений продуктов (помимо наличия прочих проблем с доступностью) и, соответственно, скринридеры пользователей не могли прочесть описание картинок. Суды США удовлетворяют и другие аналогичные иски.

Постепенно все больше стран будет принимать подобные законы и создавать новые стандарты, это лишь вопрос времени.

Что нужно учитывать

При создании новых или улучшении уже существующих форм, чтобы понять, какие шаги предпринять дальше, нужно проанализировать следующие вещи:

• Легко ли пользователю определить, какую информацию он должен предоставить и в каком формате?
• Какие сложности при использовании форм могут возникнуть у людей со слабым зрением?
• Хорошо ли форма обрабатывается скринридерами?
• Логично ли составлена форма, легко ли в ней разобраться?
• Могут ли пользователи заполнить форму, используя только клавиатуру?

Как создавать доступные формы

Есть много способов улучшить формы и приблизить их к полной доступности для каждого. Вот несколько рекомендаций.

Пишите семантический HTML

Этот пункт идет первым в нашем списке, потому что многие проблемы доступности можно решить уже благодаря использованию правильных HTML-элементов. Таких элементов существует больше сотни, и каждый имеет свое уникальное назначение, выполняет свою задачу. Благодаря постоянным улучшениям HTML, как правило, не возникает необходимости «украшать» какой-нибудь элемент пользовательским JavaScript-кодом, чтобы заставить его работать в качестве другого элемента.

Не пытайтесь сделать так, чтобы элемент div выглядел и функционировал в качестве кнопки: используйте в нужных местах элемент button. Благодаря этому скринридерам будет гораздо проще предоставить пользователям больше информации об этом элементе.

Используйте подходящие атрибуты элемента input

Для элемента input есть много видов атрибутов. Все они созданы, чтобы получать от пользователя данные определенного типа. Если атрибуты type и name указаны правильно, например, type="password" (чтобы вводимые в поле символы заменялись на звездочки) или type="email" (для адреса электронной почты), браузер оптимизируется для получения указанных данных, а также предлагает пользователю варианты автозаполнения.

Благодаря использованию правильных атрибутов элемента input в продуктах для мобильных устройств пользователю показывается подходящая клавиатура. Например, если указано type="tel", отображается клавиатура для ввода телефонных номеров, а если type="email" — клавиатура с клавишей @.

Также, пожалуйста, используйте <input type="submit"> при создании кнопок подтверждения в ваших формах. Таким образом пользователь сможет отправить форму, просто нажав клавишу enter на клавиатуре.

Связывайте атрибуты input с относящимися к ним элементами label

Я считаю, что label («метка») это один из самых недооцененных элементов в HTML. Между тем, благодаря ему многие вещи работают гораздо лучше. Ведь этот элемент способен не только сообщать пользователю о том, какие данные запрашиваются.

Мы можем существенно улучшить доступность формы, привязывая label к input при помощи атрибута for.

<label for="hungry">Are you hungry?:</label>
<input type="checkbox" name="hungry" id="hungry">

Благодаря этому приему клик по метке помещает элемент в фокус, в результате чего мы получаем гораздо более крупный размер для каждого элемента ввода. Это полезно для людей с нарушенной мелкой моторикой, особенно когда речь идет о маленьких элементах вроде радио или чекбоксов. Скринридеры также читают прикрепленные метки input вместо того чтобы просто называть вид input, когда он в фокусе.

Чтобы привязать метку к элементу, атрибут for тега label должен быть таким же, как атрибут id в нужном элементе (см. пример выше).

Пользователям с нормальным зрением тоже будет легко визуально связать метку с полем формы.

Используйте плейсхолдеры только для описания нужного значения

В некоторых случаях пользователям поясняют, что нужно ввести в каждое поле, только при помощи плейсхолдеров, без использования меток. Проблема этого подхода в том, что когда пользователь начинает ввод текста, плейсхолдер исчезает.

Кроме того, у людей с когнитивными расстройствами возникают проблемы с использованием плейсхолдеров, поскольку им кажется, что поле уже заполнено. Пожалуйста, старайтесь не использовать плейсхолдеры для инструктирования пользователей, они не являются подходящей заменой для меток.

Предоставляйте дополнительный вспомогательный текст

В зависимости от типа данных, которые нужно ввести в форму, может быть удачной мыслью добавить вверху формы инструкции по заполнению.

Элемент label доступен только один для одного поля. Поэтому в ситуациях, когда необходимо добавить более описательный текст, можно связать его с полем формы при помощи атрибута aria-describedby. Скринридеры будут оглашать и метку, и этот вспомогательный текст, когда поле окажется в фокусе.

<label for="employment_date">Employment date:</label>
<input type="date" name="employment_date" id="employment_date" aria-describedby="employment_date_help">
<span id="employment_date_help">MM/DD/YYYY</span>

Также рекомендуется вместо длинных описаний делать примеры заполнения — это проще и понятнее для пользователей.

Вспомогательный текст для форм с вариантами выбора

В ситуациях, когда нужно дать пользователю несколько вариантов выбора, например, в радио-кнопках или чекбоксах, настоятельно рекомендуется использовать элемент <fieldset></fieldset> для группировки предлагаемых вариантов, а затем <legend></legend> для вставки описывающего текста.

Благодаря использованию <fieldset></fieldset> и <legend></legend> описывающий текст будет читаться скринридерами только единожды, при попадании группы в фокус.

Доступность валидации

Валидация форм выполняется либо на сервере, либо на стороне клиента (при помощи JavaScript). HTML5 предоставляет целый набор встроенного функционала для валидации введенных данных, например, для проверки email-адресов.

Если обнаружена ошибка, важно показать ее пользователю доступным способом, в том числе сделать так, чтобы сообщение об ошибке было доступно пользователям со скринридерами.

Для этого сообщения об ошибках должны отображаться с применением атрибута role="alert" — в скринридерах есть поддержка этого атрибута, так что они смогут сразу уведомить пользователя об ошибке. Сообщения об ошибках также могут включать рекомендации или примеры заполнения поля формы, чтобы помочь пользователю исправить допущенную ошибку.

Распространенной практикой является суммирование всех ошибок и размещение информации о них вверху формы, но лучше все же размещать сообщения прямо возле полей, где допущены ошибки. Добавляйте сообщения об ошибках внизу полей, связывайте их с aria- и помечайте визуально, в каких именно полях допущены ошибки.

Поля формы, обязательные для заполнения, должны быть помечены при помощи атрибута required. Этот атрибут поддерживается современными браузерами и сообщает пользователям, какие поля являются обязательными для заполнения.

Заключение

Формы имеют огромное значение для юзабилити веб-приложения в целом, поскольку они используются для самых разных взаимодействий. Использование правильных HTML-элементов немного приближает нас к обеспечению доступности форм. Но если при этом мы будем еще и осознанно размещать дополнительные элементы, каждый пользователь, независимо от своих физических возможностей, гарантированно сможет использовать наши формы.

Больше информации по повышению доступности продуктов разработки для пользователей можно найти в руководстве Web Content Accessibility Guidelines (WCAG) 2.0.

Не забывайте, что от улучшения доступности и повышения удобства использования наших форм выигрывают в конечном счете все пользователи.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]