声明html单选框组label,可访问性-将HTML'label'标签与单选按钮一起使用

可访问性-将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？

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

Status: 

On Time

Late

这很好。 但是与其他表单控件不同，单选按钮的每个值都有一个单独的字段：

Activity:  Active  

Completed on Time  

Completed Late  

Canceled

该怎么办？

7个解决方案

49 votes

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

是

如果是这样，您如何使用它？

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

您可以给它一个

属性，该属性与控件的相匹配，或者将控件放在label元素内。

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

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

如果要为一组控件添加标题，请使用

和(并为组中的每个控件提供)。

Salutation

Mr.

Mrs.

Quentin answered 2020-07-03T18:10:05Z

18 votes

是的。 运作方式如下。

标记了各个字段，因此每个都有自己的name。

要标记一组字段(例如，多个共享同一name的单选按钮)，请使用带有

标签和元素的标签。

Salutation

Mr

Mrs

Miss

Ms

Paul D. Waite answered 2020-07-03T18:10:33Z

4 votes

您可以使用

来关联控件，而无需使用。这是WCAG 2.0建议的技术之一。

What is your profession?

If dual-classed, selected your highest leveled class

Fighter

Mage

Cleric

Thief

但是，我注意到使用WebAim Wave工具此技术可以发出有关丢失

的警告，因此我不确定对此的AT支持是什么样。

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

3 votes

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

更新

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

Activity:  Active  

[... and so on]

Seza answered 2020-07-03T18:11:27Z

1 votes

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

Mr.

Mrs.

Miss

我确实认为您仍然可以将Salutation包装在元素中，只是不能使用for属性。我的立场是正确的，请参阅下面的评论。 尽管从技术上讲这是可能的，但这并不是的意思。

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

1 votes

我对该主题的2美分，或者说是一个副节点(它不使用隐式关联以便能够放置在任何位置，但可以链接)：分组是通过

1. i 1

2. i 2

3. i 3

属性完成的，链接是通过id属性进行的：

1. i 1

2. i 2

3. i 3

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

0 votes

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

Radio Button 1

希望能帮助到你。

你希望你的看起来像这样...

Salutation

Mr.

Mrs.

Miss.

George answered 2020-07-03T18:12:44Z