18. Accessible Forms

HTML: Скелет. Урок: Accessible Forms

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

Что такое Accessible Forms?

Accessible Forms – это формы, которые спроектированы и разработаны таким образом, чтобы быть понятными и удобными для использования всеми пользователями, независимо от их возможностей. Это включает в себя использование правильных HTML-элементов, добавление соответствующих атрибутов и предоставление четких и понятных инструкций.

Основные принципы Accessible Forms

Использование <label>: Элемент <label> связывает текстовую метку с соответствующим полем ввода. Это позволяет пользователям, использующим скринридеры, понимать, какое значение должно быть введено в поле.
```
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
```
Атрибут aria-label и aria-labelledby: Если текстовая метка не может быть напрямую связана с полем ввода, можно использовать атрибуты aria-label (для предоставления текстового описания) или aria-labelledby (для связывания с существующим элементом на странице).
```
<input type="text" aria-label="Поиск">
```
```
<h2 id="search-title">Поиск</h2>
<input type="text" aria-labelledby="search-title">
```
Атрибуты placeholder и title: Атрибут placeholder может быть использован для предоставления примера значения, но не должен заменять <label>. Атрибут title предоставляет дополнительную информацию о поле ввода, которая отображается при наведении курсора.
```
<input type="text" name="email" placeholder="[email protected]" title="Введите ваш email">
```
Обработка ошибок: Предоставляйте четкие и понятные сообщения об ошибках, если пользователь вводит неверные данные. Используйте атрибуты aria-invalid и aria-describedby для связи поля ввода с сообщением об ошибке.
```
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" aria-invalid="true" aria-describedby="password-error">
<p id="password-error">Пароль должен содержать не менее 8 символов.</p>
```

Группировка полей с <fieldset> и <legend>: Используйте <fieldset> для группировки связанных полей ввода и <legend> для предоставления заголовка для этой группы.

<fieldset>
    <legend>Персональная информация</legend>
    <label for="first_name">Имя:</label>
    <input type="text" id="first_name" name="first_name"><br><br>
    <label for="last_name">Фамилия:</label>
    <input type="text" id="last_name" name="last_name">
</fieldset>

Жизненный пример

Многие современные веб-сайты и фреймворки уделяют большое внимание доступности форм. Например:

Bootstrap: Bootstrap включает в себя стили и компоненты, которые помогают создавать более доступные формы, включая поддержку <label> и визуальное отображение состояний полей (например, фокус, ошибки).
React Aria: React Aria предоставляет набор React хуков для создания accessible UI компонентов, включая формы. Он автоматически управляет атрибутами ARIA и обрабатывает события клавиатуры для обеспечения максимальной доступности.
Gov.uk: Государственный сайт Великобритании (Gov.uk) является отличным примером веб-сайта, который уделяет большое внимание доступности, включая формы. Они предоставляют подробные руководства по созданию доступных форм и используют правильные HTML-элементы и атрибуты.

Ключевые моменты

Всегда используйте <label> для связывания текстовой метки с полем ввода.
Используйте aria-label и aria-labelledby, когда <label> не подходит.
Предоставляйте четкие и понятные сообщения об ошибках.
Группируйте связанные поля ввода с помощью <fieldset> и <legend>.
Тестируйте ваши формы с помощью скринридеров, чтобы убедиться в их доступности.