Использование тега 'label' с переключателями

Работает ли тэг label с помощью переключателей? Если да, то как вы его используете? У меня есть форма, которая выглядит так:

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

Я бы хотел использовать тег label для каждой метки в левом столбце, чтобы определить его подключение к соответствующему элементу управления в правом столбце. Но если я использую радиокнопку, спецификация, похоже, указывает на то, что фактическая метка "Salutation" для управления формой больше не принадлежит тегу label, а скорее варианты "Mr., Mrs. и т.д.", войдите в тег label.

Я всегда был поклонником доступности и семантической сети, но этот дизайн для меня не имеет смысла. Тег label явно объявляет метки. Параметры выбора тега option. Как вы объявляете label на фактической метке для набора переключателей?

UPDATE: Вот пример с кодом:

<tr><th><label for"sc">Status:</label></th>
    <td>&#160;</td>
    <td><select name="statusCode" id="sc">
            <option value="ON_TIME">On Time</option>
            <option value="LATE">Late</option>
        </select></td></tr>

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

<tr><th align="right"><label for="???">Activity:</label></th>
    <td>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

Что делать?

Ответы

Ответ 1

Работает ли ярлык с помощью переключателей?

Да

Если да, то как вы его используете?

То же, что и для любого другого элемента управления формой.

Вы либо присваиваете ему атрибут for, который соответствует элементу id элемента управления, либо вы помещаете элемент управления внутри элемента метки.

Я хотел бы использовать тег метки для каждой метки в левом столбце

Метка для элемента a, а не набора элементов управления.

Если вы хотите подписать набор элементов управления, используйте <fieldset> с <legend> (и дайте <label> каждому элементу управления в наборе).

<fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>

Ответ 2

Ах да. Вот как это работает.

<label> маркирует отдельные поля, поэтому каждый <input type="radio"> получает свой собственный <label>.

Чтобы пометить группу полей (например, несколько переключателей, которые имеют один и тот же name), вы используете тег <fieldset> с элементом <legend>.

<fieldset>
    <legend>Salutation</legend>

    <label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>

    <label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>

    <label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>

    <label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>

Ответ 3

Вы не можете объявить ярлык для набора кнопок, но для каждой кнопки. В этом случае наклейками являются "Mr.", "Mrs." и "Мисс", а не "Приветствие".

ОБНОВЛЕНИЕ
Возможно, вам нужно просто использовать другой тег для этого "ярлыка" вашего, поскольку он не является ярлыком.

<tr>
    <th align="right" scope="row"><span class="label">Activity:</span></th>
    <td>&#160;</td>
    <td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active &#160;</label>
    [... and so on]
</tr>

Ответ 4

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

<input id="salutation_mr" type="radio" value="mr" name="salutation">
<label for="salutation_mr">Mr.</label>
<input id="salutation_mrs" type="radio" value="mrs" name="salutation">
<label for="salutation_mrs">Mrs.</label>
<input id="salutation_miss" type="radio" value="miss" name="salutation">
<label for="salutation_miss">Miss</label>

Я думаю, что вы все равно можете поместить Salutation внутри элемента <label>, вы просто не можете использовать атрибут for. Я исправляюсь, см. комментарии ниже. Хотя это технически возможно, для него не предназначался <label>.

Ответ 5

Атрибут Label 'for' соответствует идентификатору кнопок радио. Так что...

<label for="thisRad">Radio Button 1</label>
<input type="radio" id="thisRad" />

Надеюсь, что это поможет.

Вы хотите, чтобы ваш выглядел примерно так...

Salutation<br />
<label for="radMr">Mr.</label><input type="radio" id="radMr" />
<label for="radMrs">Mrs.</label><input type="radio" id="radMrs" />
<label for="radMiss">Miss.</label><input type="radio" id="radMiss" />

Ответ 6

Вы можете использовать aria-role="radiogroup", чтобы связать элементы управления, не используя <fieldset>. Это один из методов, предложенных WCAG 2.0.

<div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
  <p id="profession_label">What is your profession?</p>
  <p id="profession_help">If dual-classed, selected your highest leveled class</p>
  <label><input name="profession" type="radio" value="fighter"> Fighter</label>
  <label><input name="profession" type="radio" value="mage"> Mage</label>
  <label><input name="profession" type="radio" value="cleric"> Cleric</label>
  <label><input name="profession" type="radio" value="theif"> Thief</label>
</div>

Однако я заметил, что с помощью этой технологии инструмент WebAim Wave дает предупреждение о отсутствующем <fieldset>, поэтому я не уверен, что такое поддержка AT для этого.

Ответ 7

мои 2 цента к теме, или, скорее, сторона node (она не использует неявные ассоциации, чтобы их можно было размещать где угодно, но связывать): группировка выполняется с помощью атрибута name и привязки к атрибуту id:

<ol>
    <li>
        <input type="radio" name="faqList" id="faqListItem1" checked />
        <div>
            <label for="faqListItem1">i 1</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem2" />
        <div>
            <label for="faqListItem2">i 2</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem3" />
        <div>
            <label for="faqListItem3">i 3</label>
        </div>
    </li>
</ol>