Группировка полей с помощью fieldset и legend
Правильно объединяйте связанные элементы управления, например наборы радиокнопок
«Группировка полей с помощью fieldset и legend» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Некоторые поля относятся к одной группе
Набор переключателей или связанных флажков — это один вопрос, а не несколько. Элемент fieldset объединяет их в одну группу. 🧩
Группе нужно название
У каждого элемента управления есть собственная метка, но название нужно и всей группе. Элемент legend задаёт общий вопрос для этого набора.
legend идёт первым
Элемент legend должен быть первым дочерним элементом fieldset. Он служит заголовком, который экранные дикторы связывают со всеми элементами управления внутри.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>Полная группа переключателей
Здесь fieldset оборачивает варианты, а legend задаёт вопрос. У каждого переключателя по-прежнему есть собственная метка.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>Что слышат пользователи экранных дикторов
При переходе к переключателю в группе экранный диктор озвучивает legend и вариант, например «Размер, маленький». Контекст появляется автоматически.
Переключатели — классический пример
Переключатели с одним именем — хрестоматийный пример. Без fieldset пользователь слышит варианты, но не понимает, на какой вопрос они отвечают.
Наборы флажков тоже
Список с множественным выбором, например «Выберите интересы», также является группой. fieldset связывает флажки с одним общим вопросом.
Разделённые отдельные поля
Поля адреса, разбитые на несколько элементов ввода, тоже выигрывают от группировки. legend, например «Платёжный адрес», задаёт контекст для всего раздела.
Не используйте без необходимости
Для одного текстового поля fieldset не нужен. Группируйте только поля, которые действительно вместе отвечают на один вопрос.
Оформление можно менять
Стандартная рамка выглядит устаревшей, но её можно свободно переоформить с помощью CSS. Семантика сохраняется независимо от внешнего вида.
ARIA — крайняя мера
Если использовать настоящий fieldset невозможно, роль group вместе с aria-labelledby имитирует его. По возможности отдавайте предпочтение встроенному элементу.
Быстрая проверка
Какой элемент задаёт название fieldset для вспомогательных технологий?
Итоги
Оборачивайте связанные элементы управления в fieldset и добавляйте к ним заголовок с помощью legend. Наборы переключателей и флажков получают контекст, на который может рассчитывать каждый пользователь. ✅
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Группировка полей с помощью fieldset и legend» бесплатный?
Да — полный текст урока «Группировка полей с помощью fieldset и legend» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Группировка полей с помощью fieldset и legend»?
Правильно объединяйте связанные элементы управления, например наборы радиокнопок Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Группировка полей с помощью fieldset и legend»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Каждому input нужен настоящий label
- Placeholder — не подпись
- Группировка полей с помощью fieldset и legend
- Объявление справочного текста и обязательных полей