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

В веб-разработке элемент fieldset объединяет связанные элементы управления формы, а legend задаёт группе короткое название. Используйте эту пару для вопросов с общим контекстом, например выбора способа доставки. Так HTML формы получают ясную структуру, а скринридерам проще сообщать пользователю, к какой теме относятся поля.

Опорные правила группировки полей формы

• Объединяйте поля только тогда, когда между ними есть смысловая связь.
• Добавляйте каждой группе понятный legend; он должен описывать её назначение.
• Не заменяйте fieldset и legend обычными контейнерами и заголовками, если нужна семантическая группа.
• Сохраняйте видимые подписи отдельных полей: название группы не заменяет label.
• Проверяйте форму клавиатурой и скринридером, а не только визуально.

Когда объединять поля с помощью fieldset

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

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

Не объединяйте поля только ради рамки или визуального отступа. Если элементы независимы и у них нет общего смысла, оставьте их отдельными. При создании веб-сайтов группировка должна отражать структуру задачи, а не только макета.

Как связать группу с поясняющим legend

Понадобятся HTML-редактор и возможность проверить готовую страницу в браузере. Специальные библиотеки и дополнительные атрибуты для базовой группировки не нужны: вложите связанные поля в fieldset, а первым дочерним элементом разместите legend.

<fieldset>
  <legend>Как доставить заказ?</legend>

  
  Курьером

  
  Самовывоз
</fieldset>

Для каждого поля оставьте собственную подпись через label. В примере общий вопрос задаёт legend, а варианты доставки подписаны отдельно. Это базовый шаблон для разработки веб-форм, который можно адаптировать под содержание проекта.

Что fieldset меняет для скринридеров и клавиатуры

1. Определите общую тему. Сгруппируйте только те поля, которые относятся к одному вопросу. Например, варианты "Электронная почта" и "СМС" уместно объединить как выбор способа уведомлений.
2. Создайте контейнер группы. Оберните связанные элементы в fieldset. Не меняйте типы полей и их программные имена без необходимости.
3. Добавьте название группы. Вставьте legend первым элементом внутри fieldset и кратко сформулируйте вопрос или назначение группы.
4. Подпишите каждое поле. Свяжите видимый текст с соответствующим элементом через label. Это помогает понять отдельные варианты независимо от названия группы.
5. Проверьте взаимодействие. Пройдите форму клавиатурой и убедитесь, что фокус перемещается по элементам в логичном порядке. Затем проверьте, сообщает ли скринридер название группы и подписи полей.

Быстрый режим

1. Найдите поля с общей темой.
2. Оберните их в fieldset.
3. Добавьте первым элементом короткий legend.
4. Оставьте отдельную подпись у каждого поля.
5. Проверьте форму клавиатурой и скринридером.

При корректной семантике скринридер может передать пользователю контекст группы вместе с информацией о поле. Сам fieldset не меняет порядок клавиатурного перехода и не создаёт отдельный шаг навигации: Tab по-прежнему перемещает фокус между доступными элементами управления.

Как оформить fieldset без потери доступности

• Убедитесь, что в группе есть реальная смысловая связь между полями.
• Сформулируйте legend кратко и понятным языком.
• Разместите legend первым дочерним элементом fieldset.
• Добавьте каждому полю видимую подпись, связанную с ним через label.
• Не используйте заголовок группы вместо подписей конкретных вариантов.
• Проверьте, что стили не скрывают название группы и не мешают чтению текста.
• Убедитесь, что контраст и видимый индикатор фокуса сохраняются.
• Проверьте форму при увеличении масштаба и на узком экране.

Где группировка полей мешает и чем её заменить

• Независимые поля собраны вместе. Не помещайте в одну группу, например, адрес электронной почты и дату рождения, если они не относятся к общему вопросу. Оставьте их отдельными полями с собственными подписями.
• fieldset используется только ради оформления. Для визуальной компоновки без общей семантики применяйте CSS-классы или обычный контейнер.
• У группы нет legend. Без названия пользователю может быть непонятно, почему поля объединены. Добавьте короткое пояснение или не используйте группировку.
• legend слишком длинный. Перепишите его так, чтобы он задавал тему, а не повторял инструкции и описания каждого поля.
• Подписи полей отсутствуют. Добавьте для каждого элемента отдельный label; одного названия группы недостаточно.
• Группировка вложенная без необходимости. Избегайте сложных многоуровневых конструкций, если их смысл нельзя быстро объяснить пользователю.
• Группа повторяет заголовок раздела. Если заголовок лишь делит страницу на смысловые части, используйте заголовок документа, а не fieldset.

Как проверить форму с fieldset вручную

• Проверка клавиатурой. Перемещайтесь клавишей Tab, проверяйте фокус и порядок полей. Она подходит для быстрой проверки базового взаимодействия.
• Проверка скринридером. Прослушайте группу и её элементы с помощью доступного вам скринридера. Это помогает оценить, передаются ли название группы и подписи полей.
• Проверка средствами браузера. Изучите дерево доступности в инструментах разработчика, чтобы увидеть семантическую структуру и доступные названия.
• Проверка с пользователями. Если форма важна для ключевого сценария, попросите людей с разными способами навигации выполнить задачу и зафиксируйте места затруднений.

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

Разбор частых ситуаций при группировке полей

Нужно ли помещать каждое поле в отдельный fieldset?

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

Можно ли использовать fieldset без рамки?

Да. Внешний вид можно изменить CSS, сохранив HTML-семантику. Убедитесь, что стили не скрывают legend и не ухудшают читаемость.

Заменяет ли legend подписи отдельных полей?

Нет. Legend называет группу, а label - конкретный элемент управления. Для понятной формы нужны оба уровня там, где они уместны.

Обязательно ли располагать legend первым?

Да, размещайте его первым дочерним элементом внутри fieldset. Так название группы связано с её содержимым понятным и предсказуемым способом.

Меняет ли fieldset порядок перехода клавишей Tab?

Нет. Порядок определяется последовательностью фокусируемых элементов и другими настройками страницы, а не самим контейнером.

Можно ли скрыть legend визуально?

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

Подходит ли fieldset для группы чекбоксов?

Да, если чекбоксы отвечают на общий вопрос, например позволяют выбрать предпочтительные способы связи. Добавьте общий legend и подпишите каждый вариант отдельно.

Автор: Ирина Белова