Форма — это элемент, который позволяет пользователю вводить данные в поле или группу полей. Формы могут быть простыми, например, с одним полем, или сложными, например, многоэтапным элементом формы с несколькими полями на странице, проверкой ввода и иногда 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>