Обтекание переключателей в элементе Fieldset для лучшей доступности
Следующая тема охватывает доступность переключателей. Каждый выбор дается label с for атрибутом привязки к id соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег fieldset окружает всю группу переключателей для достижения этого. Он часто использует тег legend чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе fieldset. fieldset и тег legend не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование label с for атрибута для каждого переключателя достаточно. Вот пример:
<form>
<fieldset>
<legend> Выберите один из этих трех элементов: </ legend>
<input id = "one" type = "radio" name = "items" value = "one">
<label for = "one"> Выбор 1 </ label> <br>
<input id = "two" type = "radio" name = "items" value = "two">
<label for = "two"> Выбор 2 </ label> <br>
<input id = "three" type = "radio" name = "items" value = "three">
<label for = "three"> Choice Three </ label>
</ fieldset>
</ form>
Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток for атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег div окружающий радиокнопки, на тег fieldset и измените тег p внутри него на legend.