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

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

placeholder !== label

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

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

<!-- WRONG: missing label -->
<input type="text" placeholder="enter your email">

<!-- CORRECT: option1 Use label or aria-label -->
<label for="email">Enter your email</label>
<input type="text" id="email" placeholder="enter your email">

<!-- CORRECT: option2 -->
<input type="text" aria-label="enter your email" placeholder="enter your email">

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

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

<!-- WRONG: wrong use of the input(s)' type -->
<input type="text" placeholder="enter your mobile number">
<input type="text" placeholder="enter your password">

<!-- CORRECT: Use correct input type -->
<input type="tel" placeholder="enter your mobile number">
<input type="password" placeholder="enter your password">

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

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

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

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

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

<!-- WRONG: Screen readers won't able to pick the "Enter your prefer meals"-->
<div>
  <h2>Enter your prefer meals</h2>

  <input type="checkbox" for="c1">
  <label id="c1">Veg</label>

  <input type="checkbox" for="c2">
  <label id="c2">Non-veg</label>

  <input type="checkbox" for="c3">
  <label id="c3">Vegan</label>

  <input type="checkbox" for="c4">
  <label id="c4">Fruit salad</label>

<div>
    
<!-- CORRECT: Use fieldset & legend to support Screen Readers-->
<fieldset>
  <legend>Enter your prefer meals</legend>

  <input type="checkbox" for="c1">
  <label id="c1">Veg</label>

  <input type="checkbox" for="c2">
  <label id="c2">Non-veg</label>

  <input type="checkbox" for="c3">
  <label id="c3">Vegan</label>

  <input type="checkbox" for="c4">
  <label id="c4">Fruit salad</label>

<fieldset>

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

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

<!-- WRONG: link is getting used as button-->
<a href="#" onClick="submitForm()">Submit</a>


<!-- CORRECT: Semantic tag -->
<button onClick="submitForm()">Submit</button>

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

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

aria-atomic

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

<!-- WRONG: total-price will not be picked by the screen readers when the price will be changed.-->
<!-- This will announce the $ 100 when it will change  -->
<div class="totalPrice" aria-live="polite">
  <span>Total Price:</span> <h2>$ 100</h2>
</div>

<!-- CORRECT: This will announce the "Total price $ 100" whenever the price will change -->
<div class="totalPrice" aria-atomic="true" aria-live="polite">
  <span>Total Price:</span> <h2>$ 100</h2>
</div>

aria-describedby

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

<!-- WRONG: Additional information regarding field email will be missed by the screen readers -->
<input type="email" aria-label="Enter your email">
<p>We will use your email for marketing</p>


<!-- CORRECT: describedby -->
<input type="email" aria-label="Enter your email" aria-describedby="emailInfo">
<p id="emailInfo">We will use your email for marketing</p>

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

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

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

<!-- WRONG: Only visual cue to required field -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription" />


<!-- CORRECT: Use of required for non-visual users too -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription" aria-required/>

Ошибки

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

Поэтому:

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

optgroup

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

<!-- WRONG:No grouping of the option. -->
<select>
  <option>Chicken</option>
  <option>Fishe</option>
  <option>Spinanch</option>
  <option>onion</option>
  <option>Kale</option>
  <option>Meat</option>
</select>


<!-- CORRECT: Use optgroup to group the same fields-->
<select>
  <optgroup label="non-veg">
    <option>Chicken</option>
    <option>Fishe</option>
    <option>Meat</option>
  </optgroup>
  <optgroup label="veg">
    <option>onion</option>
    <option>Kale</option>
    <option>Spinanch</option>
   </optgroup>
</select>

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”.