Форма — это элемент, позволяющий пользователю вводить данные в поле или группу полей. Формы могут быть как простыми, состоящими из одного поля, так и сложными, многошаговыми, с несколькими полями на странице, проверкой введенных данных и иногда CAPTCHA.
Формы считаются одним из самых сложных элементов с точки зрения доступности, поскольку требуют знания всех рассмотренных нами аспектов, а также дополнительных правил, специфичных именно для форм. Однако, при наличии необходимых знаний и времени, вы сможете создать доступную форму, подходящую как вам, так и вашим пользователям.
Модуль «Формы» — последний модуль в этом курсе, посвященный конкретным компонентам. В этом модуле основное внимание будет уделено рекомендациям, специфичным для форм, но все остальные рекомендации, изученные в предыдущих модулях, такие как структура контента , фокусировка клавиатуры и цветовой контраст , также применимы к элементам форм.
Поля
Основой форм являются поля. Поля — это небольшие интерактивные элементы, такие как поле ввода или переключатель, которые позволяют пользователям вводить контент или делать выбор. Существует множество различных типов полей для форм .
Рекомендуется по умолчанию использовать устоявшиеся 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 . Добавление атрибутов автозаполнения позволяет более точно определить или идентифицировать назначение полей для пользовательских агентов и вспомогательных технологий (АТ).
Атрибуты автозаполнения позволяют пользователям персонализировать визуальное представление, например, отображать значок именинного торта в поле, которому присвоен атрибут автозаполнения «день рождения» ( 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>
Кроме того, связанные поля формы, такие как почтовый адрес, необходимо программно и визуально сгруппировать. Один из методов — использование шаблонов fieldset и legend для группировки похожих элементов.
Описания
Описания полей по своему назначению схожи с метками, поскольку используются для предоставления дополнительного контекста полю и требованиям. Описания полей не требуются для обеспечения доступности, если метки или инструкции к форме достаточно информативны.
Однако существуют ситуации, когда добавление дополнительной информации полезно для предотвращения ошибок в форме, например, передача информации о минимальной длине поля ввода пароля или указание пользователю, какой формат календаря следует использовать (например, MM-DD-YYYY).
Существует множество различных способов добавления описаний полей в формы. Один из лучших способов — добавить атрибут `aria-describedby` к элементу формы в дополнение к элементу <label> . Программа чтения с экрана будет считывать как описание, так и метку.
Если вы добавите атрибут aria-labelledby к своему элементу, значение атрибута переопределит текст внутри вашего <label> . Как всегда, обязательно протестируйте окончательный код со всеми вспомогательными технологиями, которые вы планируете поддерживать.
Ошибки
При создании доступных форм можно многое сделать, чтобы предотвратить ошибки пользователей. Ранее в этом модуле мы рассмотрели четкую разметку полей, создание идентифицирующих меток и добавление подробных описаний, где это возможно. Но как бы понятна ни была ваша форма, рано или поздно пользователь все равно допустит ошибку.
Когда пользователь сталкивается с ошибкой в форме, первым шагом является информирование о ней . Необходимо четко указать поле, в котором произошла ошибка, и описать саму ошибку в текстовом виде.
Существуют различные методы отображения сообщений об ошибках , например:
- Модальное окно, расположенное непосредственно в месте возникновения ошибки.
- Совокупность ошибок, объединенных в одно большое сообщение в верхней части страницы.
При сообщении об ошибках обязательно обращайте внимание на параметры фокусировки клавиатуры и области действия ARIA .
По возможности, предложите пользователю подробное руководство по устранению ошибки. Для уведомления пользователей об ошибках доступны два параметра.
- Вы можете использовать атрибут `required` в HTML. Браузер выдаст общее сообщение об ошибке, основанное на параметрах проверки полей.
- Или вы можете использовать атрибут aria-required , чтобы отправить пользовательское сообщение об ошибке вспомогательным технологиям. Сообщение получат только вспомогательные технологии, если вы не добавите дополнительный код, чтобы сделать сообщение видимым для всех пользователей.
После того как пользователь посчитает, что все ошибки устранены, позвольте ему повторно отправить форму и оставить отзыв о результатах отправки. Сообщение об ошибке укажет пользователю на необходимость внесения дополнительных изменений, а сообщение об успешной отправке подтвердит, что все ошибки исправлены и форма успешно отправлена.
Дополнительные критерии успеха
В стандарте WCAG 2.2 были введены следующие критерии успеха, ориентированные на повышение доступности форм: