Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 477
AGE Avatar asked Dec 16 '15 21:12

AGE


People also ask

What is form label element?

The <label> HTML element represents a caption for an item in a user interface.

Is label a block element?

According to the MDN pages, label elements "are simple inline elements".

What is htmlFor?

The htmlFor property sets or returns the value of the for attribute of a label. The for attribute specifies which form element a label is bound to.

What is an associated label in HTML?

A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute.


2 Answers

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

like image 87
Alexander O'Mara Avatar answered Oct 21 '22 23:10

Alexander O'Mara


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

like image 40
Quentin Avatar answered Oct 22 '22 01:10

Quentin