Форма — это элемент, который позволяет пользователю вводить данные в поле или группу полей. Формы могут быть простыми, например, с одним полем, или сложными, например, многоэтапным элементом формы с несколькими полями на странице, проверкой ввода и иногда CAPTCHA.
Формы считаются одним из самых сложных элементов для правильной реализации с точки зрения доступности, поскольку они требуют знания всех элементов, которые мы уже рассмотрели, а также дополнительных правил, специфичных только для форм. Приложив некоторое понимание и время, вы можете создать доступную форму, которая подойдет вам и вашим пользователям.
Forms — это последний модуль в этом курсе, посвященный конкретным компонентам. В этом модуле основное внимание будет уделено рекомендациям, специфичным для форм, но все остальные рекомендации, о которых вы узнали в предыдущих модулях, такие как структура контента , фокус клавиатуры и цветовой контраст , также применимы к элементам формы.
Поля
Основой форм являются поля. Поля — это небольшие интерактивные шаблоны, такие как элемент ввода или переключатель, которые позволяют пользователям вводить контент или делать выбор. На выбор предлагается широкий выбор полей формы .
Рекомендация по умолчанию — использовать установленные шаблоны HTML вместо создания чего-то собственного с помощью ARIA, поскольку определенные функции и функции, такие как состояния полей, свойства и значения, по своей сути встроены в элементы HTML. Настраиваемые поля требуют добавления ARIA вручную.
Не рекомендуется — собственный HTML с ARIA.
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Рекомендуется — стандартный HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
Помимо выбора наиболее доступных шаблонов полей формы, где это применимо, вам также следует добавить в поля атрибуты автозаполнения HTML . Добавление атрибутов автозаполнения позволяет более детально определить или определить назначение пользовательских агентов и вспомогательных технологий (AT).
Атрибуты автозаполнения позволяют пользователям персонализировать визуальные презентации, например отображать значок праздничного торта в поле с назначенным ему атрибутом автозаполнения дня рождения ( bday ). В более общем плане атрибуты автозаполнения упрощают и ускоряют заполнение форм. Это особенно полезно для людей с когнитивными нарушениями и нарушениями чтения, а также для тех, кто использует АТ, например программы чтения с экрана.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Наконец, поля формы не должны вызывать контекстуальные изменения, когда они получают фокус или пользовательский ввод, если только пользователь не был предупрежден об этом поведении перед использованием компонента. Например, форма не должна автоматически отправляться, когда поле получает фокус или когда пользователь добавляет в поле содержимое.
Этикетки
Метки информируют пользователя о назначении поля, если оно является обязательным, а также могут предоставлять информацию о требованиях к полю, например о формате ввода. Метки должны быть всегда видны и точно описывать поля формы для пользователей.
Одним из основополагающих принципов доступных форм является установление четкой и точной связи между полем и его меткой. Это верно как визуально, так и программно. Без этого контекста пользователь может не понять, как заполнять поля формы.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Кроме того, связанные поля формы, такие как почтовый адрес, необходимо программно и визуально сгруппировать. Один из методов — использовать набор полей и шаблон легенды для группировки похожих элементов.
Описания
Описания полей по назначению аналогичны меткам, поскольку они используются для предоставления большего контекста полю и требованиям. Описания полей не требуются для обеспечения доступности, если метки или инструкции формы достаточно информативны.
Однако есть ситуации, в которых добавление дополнительной информации полезно во избежание ошибок в форме, например, передача информации о минимальной длине ввода для поля пароля или указание пользователю, какой формат календаря использовать (например, ММ-ДД-ГГГГ).
Существует множество различных методов, которые можно использовать для добавления описаний полей в формы. Один из лучших способов — добавить к элементу формы атрибут aria-describedby в дополнение к элементу <label> . Программа чтения с экрана прочитает и описание, и метку.
Если вы добавите атрибут aria-labeledby к своему элементу, значение атрибута переопределяет текст внутри вашего <label> . Как всегда, обязательно протестируйте окончательный код со всеми AT, которые вы планируете поддерживать.
Ошибки
При создании доступных форм вы можете многое сделать, чтобы пользователи не допускали ошибок в формах. Ранее в этом модуле мы рассмотрели четкую разметку полей, создание идентифицирующих меток и добавление подробных описаний, когда это возможно. Но какой бы ясной вы ни считали свою форму, в конечном итоге пользователь допустит ошибку.
Когда пользователь сталкивается с ошибкой формы, первым делом необходимо сообщить об ошибке . Поле, в котором произошла ошибка, должно быть четко указано, а сама ошибка должна быть описана пользователю в текстовом виде.
Существуют различные методы отображения сообщений об ошибках , например:
- Модальное, встроенное рядом с местом возникновения ошибки.
- Коллекция ошибок, сгруппированных в одно большое сообщение вверху страницы.
При сообщении об ошибках обязательно обращайте внимание на фокус клавиатуры и параметры живой области ARIA .
По возможности предлагайте пользователю подробное предложение, как исправить ошибку. Для уведомления пользователей об ошибках доступны два атрибута.
- Вы можете использовать обязательный атрибут HTML. Браузер выдаст общее сообщение об ошибке на основе заданных параметров проверки.
- Или вы можете использовать атрибут aria-required , чтобы поделиться настроенным сообщением об ошибке с AT. Только AT получат сообщение, если вы не добавите дополнительный код, чтобы сделать сообщение видимым для всех пользователей.
Как только пользователь посчитает, что все ошибки устранены, позвольте ему повторно отправить форму и оставить отзыв о результатах отправки. Сообщение об ошибке сообщает пользователю, что ему нужно внести дополнительные обновления, а сообщение об успехе подтверждает, что он устранил все ошибки и успешно отправил форму.
Дополнительные критерии успеха
WCAG 2.2 представил следующие критерии успеха, ориентированные на более доступные формы:
Проверьте свое понимание
Проверьте свои знания доступных форм
Какая из следующих форм является наиболее доступной для ввода формы?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>