可访问性-将HTML'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.等”。 进入option标签。

我一直是可访问性和语义网的粉丝,但是这种设计对我来说没有意义。 label标记显式声明标签。 option标签选择选项。 如何在一组单选按钮的实际标签上声明label

更新:这是带有代码的示例:

<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>

该怎么办?

GlenPeterson asked 2020-07-03T18:09:25Z
7个解决方案
49 votes

标签标签可以与单选按钮一起使用吗?

如果是这样,您如何使用它?

与任何其他窗体控件相同。

您可以给它一个<fieldset>属性,该属性与控件的<legend>相匹配,或者将控件放在label元素内。

我想在左侧栏中为每个标签使用标签标签

标签用于控件,而不是控件集。

如果要为一组控件添加标题,请使用<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>
Quentin answered 2020-07-03T18:10:05Z
18 votes

是的。 运作方式如下。

<label>标记了各个字段,因此每个<input type="radio">都有自己的name

要标记一组字段(例如,多个共享同一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>
Paul D. Waite answered 2020-07-03T18:10:33Z
4 votes

您可以使用<fieldset>来关联控件,而无需使用<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支持是什么样。

Scribblemacher answered 2020-07-03T18:10:58Z
3 votes

您不能为一组按钮声明标签,而是为每个按钮声明标签。在这种情况下,标签为“先生”,“先生”。 和“小姐”,而不是“ Salutation”。

更新
也许您应该只为该标签使用另一个标签-因为它并不是真正的标签。

<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>
Seza answered 2020-07-03T18:11:27Z
1 votes

要回答您的问题:不,您不能将Salutation连接到单选按钮之一。 如果您单击“称呼”,将不会选择其中一个选项,这没有任何意义。 取而代之的是,您可以给Mr,Mrs和Miss加上自己的标签,因此,如果有人单击这些单词之一,则会选择相应的单选按钮。

<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>的意思。

Nic Wortel answered 2020-07-03T18:11:56Z
1 votes

我对该主题的2美分,或者说是一个副节点(它不使用隐式关联以便能够放置在任何位置,但可以链接):分组是通过<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>属性完成的,链接是通过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>

BananaAcid answered 2020-07-03T18:12:16Z
0 votes

标签的“ for”属性对应于单选按钮ID。 所以...

<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" />
George answered 2020-07-03T18:12:44Z
translate from https://stackoverflow.com:/questions/13273806/using-the-html-label-tag-with-radio-buttons