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).
The <label> HTML element represents a caption for an item in a user interface.
According to the MDN pages, label elements "are simple inline elements".
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.
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.
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>
.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With