What is a labelable element?

问题

I have been reading on accessibility and a concept I cannot find accurate information on stumbled upon me: HTML labelable elements.

I understand that the concept behind a labelable element is one that can be properly wrapped or referenced by a <label>, for example:

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

Or for example:

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

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

Does anyone know exactly what labeable HTML elements are and which are not?

Bonus Round! Can you elaborate on why the fifth rule of ARIA use is a work in progress? In my own websites, I would like to be able to account for future changes to that, but I don't know why it's not set in stone (seems like it should be).

回答1:

According to MDN, the following elements are labelable.

Excerpt from Content categories:

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

回答2:

The link in the current HTML 5 recommendation (unlike the one to the HTML 5.1 draft in the ARIA draft you link to) isn't broken. It says:

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

回答3:

The definition of a labelable element has to be understood from the definition contained inside HTML51 Semantics

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

Bonus: This rule is still a work in progress because, as you expected, this rule is still a draft (and is totally incomplete).

1. To have an accessible name won't be enough as long as this accessible name is not a correct alternative for the given element.

For instance, the following code has an accessible name, inside the title attribute which does not convey enough information to understand the field.

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

2. You do not have to use the accessible name at the expense of accessibility

The following example has an accessible name which will give Assistive Technologies a correct alternative, but won't benefit to users not using those given technologies.

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

See First rule:

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.

来源：https://stackoverflow.com/questions/34322466/what-is-a-labelable-element