Формы

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

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

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

Поля

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

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

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<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 получат сообщение, если вы не добавите дополнительный код, чтобы сделать сообщение видимым для всех пользователей.

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

Проверьте свое понимание

Проверьте свои знания доступных форм