Доступность форм в веб-разработке: лучшие практики

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

Содержание

Основы доступности форм
Заполнитель ! = Метка
Типы полей ввода
Группировка чекбоксов и радиокнопок
Кнопки и ссылки
ARIA-атрибуты
aria-атомарный
aria-описано
Обязательные поля
Обработка ошибок
Группировка с optgroup
Фокус и outline
Заключение
Визуальный пример

Основы доступности форм

Заполнитель ! = Метка

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

Пример неправильного использования:

<!-- Неправильно: отсутствует label -->
<input type="text" placeholder="enter your email">

Правильный вариант:

<!-- Используйте label или aria-label -->
<label for="email">Enter your email</label>
<input type="text" id="email" placeholder="enter your email">

<!-- Либо -->
<input type="text" aria-label="enter your email" placeholder="enter your email">

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

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

Пример неправильного использования:

<!-- Неправильно: неправильно указан тип поля ввода -->
<input type="text" placeholder="enter your mobile number">
<input type="text" placeholder="enter your password">

Правильный вариант:

<!-- Используйте правильный тип input -->
<input type="tel" placeholder="enter your mobile number">
<input type="password" placeholder="enter your password">

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

Группируйте чекбоксы и радиокнопки с помощью fieldset и legend, чтобы обеспечить правильное чтение скрин-ридерами.

Пример неправильного использования:

<!-- Неправильно: скрин-ридеры не смогут определить заголовок группы -->
<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>

Правильный вариант:

<!-- Используйте fieldset и legend -->
<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) для переходов по указанному адресу.

Пример неправильного использования:

<!-- Неправильно: ссылка используется как кнопка -->
<a href="#" onClick="submitForm()">Submit</a>

Правильный вариант:

<!-- Используйте семантический тег -->
<button onClick="submitForm()">Submit</button>

ARIA-атрибуты

aria-атомарный

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

Пример неправильного использования:

<!-- Неправильно: скрин-ридеры не озвучат полное изменение -->
<div class="totalPrice" aria-live="polite">
<span>Total Price:</span> <h2>$ 100</h2>
</div>

Правильный вариант:

<!-- Используйте aria-atomic для полного озвучивания -->
<div class="totalPrice" aria-atomic="true" aria-live="polite">
<span>Total Price:</span> <h2>$ 100</h2>
</div>

aria-описано

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

Пример неправильного использования:

<!-- Неправильно: дополнительная информация не будет доступна скрин-ридерам -->
<input type="email" aria-label="Enter your email">
<p>We will use your email for marketing</p>

Правильный вариант:

<!-- Используйте aria-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.

Пример неправильного использования:

<!-- Неправильно: только визуальное указание на обязательное поле -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription">

Правильный вариант:

<!-- Используйте required для не визуальных пользователей -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription" aria-required>

Обработка ошибок

Ошибки должны быть четко и однозначно определены в контентной части формы, а также получать фокус.

Группировка с optgroup

Используйте элемент optgroup для группировки связанных опций в выпадающем списке.

Пример неправильного использования:

<!-- Неправильно: отсутствие группировки опций -->
<select>
<option>Chicken</option>
<option>Fish</option>
<option>Spinach</option>
<option>Onion</option>
<option>Kale</option>
<option>Meat</option>
</select>

Правильный вариант:

<!-- Используйте optgroup для группировки связанных полей -->
<select>
<optgroup label="Non-veg">
<option>Chicken</option>
<option>Fish</option>
<option>Meat</option>
</optgroup>
<optgroup label="Veg">
<option>Onion</option>
<option>Kale</option>
<option>Spinach</option>
</optgroup>
</select>

Фокус и outline

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

Пример неправильного использования:

/* Неправильно: не отключайте outline */
*:focus {
outline: 0;
}

Правильный вариант:

/* Опция 1: Кастомизация focus/outline */
*:focus {
border: 1px solid pink;
box-shadow: 0 0 10px pink;
outline: 0;
}

/* Опция 2: Кастомизация значения outline */
*:focus {
outline: 1px solid blue;
}

Заключение

Доступность форм — это неотъемлемая часть веб-разработки. Следование лучшим практикам помогает создавать удобные и инклюзивные интерфейсы, обеспечивая равные возможности для всех пользователей.

Визуальный пример

Вот наглядная иллюстрация, отражающая концепцию доступных форм:

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