什么是可标记元素？

Question

我曾经 reading on accessibility 并且偶然发现了一个我无法找到准确信息的概念：HTML 可标记元素。

我理解可标记元素背后的概念是可以被 <label> 正确包装或引用的元素，例如：

<label>
    Enter some data
    <input type="text"/>
</label>

或者例如：

<label for="anInputField">
    Enter some data
</label>

<input type="text" id="anInputField"/>

有谁知道什么是可标记 HTML 元素，哪些不是？

奖励回合！ 您能否详细说明为什么 ARIA 使用的 fifth rule 正在进行中？在我自己的网站上，我希望能够说明未来对此的更改，但我不知道为什么它不是一成不变的（似乎应该如此）。

Answer 1

根据 MDN，以下元素是可标记的。

摘自Content categories：

labelable Elements that can be associated with elements. Contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

Answer 2

当前 HTML 5 recommendation 中的 link（与您 link 的 ARIA 草案中 HTML 5.1 草案不同）没有损坏。它说：

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

button input (if the type attribute is not in the hidden state) keygen meter output progress select textarea

Answer 3

labelable element的定义必须从HTML51 Semantics

中包含的定义来理解

These are elements that can be associated with a label element.

奖金：这条规则仍在进行中，因为正如您所料，这条规则仍然是草案（并且完全不完整）。

只要这个易于访问的名称不是给定元素的正确替代名称，拥有 accessible name 是不够的。

例如，下面的代码在 title 属性中有一个 可访问的名称 ，它没有传达足够的信息来理解该字段。

 <input type="text" name="firstname" value="" title="name001" />
 <input type="text" name="fullname" value="" title="name002" />

您不必以牺牲可访问性为代价来使用可访问的名称

以下示例有一个可访问的名称，这将为 Assistive Technologies 提供一个正确的替代方案，但不会使不使用这些给定技术的用户受益。

 <input type="text" name="firstname" value="" aria-label="First Name" />

参见第一条规则：

If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

什么是可标记元素？

What is a labelable element?

html

css

accessibility

wai-aria