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

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

placeholder !== label

Для элементов форм атрибут label часто отсутствует. Разработчики и специалисты по разработке пользовательских интерфейсов обычно считают, что плейсхолдеры покрывают потребности конечных пользователей. Но это не так. Ведь placeholder и label - не одно и тоже.

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

Enter your email

Типы полей ввода

В HTML5 очень важно правильно указывать type для элемента input.

Правильно указанный тип нужен для:

1. скрин-ридера,
2. пользователей мобильных версий ресурса,
3. обработчиков ошибок,
4. безопасности,
5. корректного нативного поведения поля ввода, так type = "color" открывает палитру.

Группировка чек-боксов и радио кнопок

Группируйте check-box и radio с помощью fieldset и давайте группам имя с помощью legend.

Скрин-ридер сможет прочитать такой заголовок. В противном случае порядок взимодействия с чек-боксами и радио кнопками понятен не будет.

  
Enter your prefer meals
  
  Veg
  
  Non-veg
  
  Vegan
  
  Fruit salad



  
Enter your prefer meals
  
  Veg
  
  Non-veg
  
  Vegan
  
  Fruit salad

Кнопки и ссылки

Кнопки button нужны для действий, а ссылки link необходимы для перехода по указанному адресу. И эти условия нужно понимать и соблюдать.

Submit

Submit

При несоблюдении таких условий:

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

aria-atomic

атрибут aria-live указывает скрин-ридеру, что нужно читать только измененную часть динамического контента, в то время, как наличие атрибута aria-atomic вынудит скрин-ридер озвучить весь контент.

  Total Price: 
$ 100



  Total Price: 
$ 100

aria-describedby

Для точного описания порядка взаимодействия с определенными элементами форм мы используем подстрочный текст или всплывающие подсказки. Но для скрин-ридеров такой функционал недоступен. В таких случаях на помощь приходит атрибут aria-describedby.

We will use your email for marketing


We will use your email for marketing

Обязательные поля

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

Для скрин-ридеров нужно использовать атрибут aria-required.

Enter your email*


Enter your email*

Ошибки

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

Поэтому:

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

optgroup

Элемент optgroup позволяет группировать свойства, объединенные единым смыслом.

  Chicken
  Fishe
  Spinanch
  onion
  Kale
  Meat



  
    Chicken
    Fishe
    Meat
  
  
    onion
    Kale
    Spinanch
   

focus или outline

Четкое визуальное представление порядка взаимодействия с элементами формы очень важно при использовании клавиатуры. В этом случае на первый план выходят CSS-свойствоoutline и псевдокласс :focus.

Поэтому старайтесь избегать outline: 0. Если значение свойства outlineравно 0, необходимо использовать другие свойства, четко указывающие на элемент формы, получивший фокус ввода.

/* WRONG: Do not  turn off the outline */
*:focus{
   outline: 0;
}
/* OPTION 1: Custom focus/outline can be added */
*:focus{
    border: 1px solid pink;
    box-shadow: 0 0 10px pink
    outline: 0;
}
/* OPTION 2: customizing outline value */
*:focus{
    outline: 1px solid blue;
}

Спасибо за внимание.

Перевод статьи Neha Sharma “10 ways to improve your forms accessibility”.