使用带有单选按钮的HTML"标签"标签

Question

label标签是否适用于单选按钮？如果是这样,你如何使用它？我有一个显示如下的表单:

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

我想使用label左列中每个标签的标签来定义它与右列中相应控件的连接.但是,如果我用一个单选按钮,该规范似乎表明,突然实际的"称呼"标签的形式控制不再是属于label标签,而是选择"先生,太太,等等." 进入label标签.

我一直是可访问性和语义网的粉丝,但这种设计对我来说没有意义.该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>

该怎么办？

Answer 1

标签标签是否适用于单选按钮？

是

如果是这样,你如何使用它？

与任何其他表单控件相同.

您可以为其指定for与id控件匹配的属性,也可以将控件放在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>

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

Answer 3

您可以使用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 对此的支持是什么样的。