ARIA LabelledBy

ARIA LabelledBy (aria-labelledby) is used to associate descriptive information to HTML elements. In doing so, the browser makes it available to assistive technology through the MSAA Name value. The aria-labelledby points to a unique id or list of unique ids. It is very useful when providing a “label” for an input field, although it can be used to label almost anything.

The HTML label tag has traditionally been used to associate a text label with an HTML input tag; although, best practice is to provide either a label or a title attribute on the input field itself. And it is still recommended to accomodate older browsers and assistive technology.

Example 1:

Provide the info as it appears on your credit card:




Code


<div id="LabelInstructions">
Provide the info as it appears on your credit card:
</div>
<input type=text id="firstname" aria-labelledby="LabelInstructions FirstName">
<span id="FirstName"><label for="firstname">First Name</label></span>
<input type=text id="lastname" aria-labelledby="LabelInstructions LastName">
<span id="LastName"><label for="lastname">Last Name</label></span>

Example 2:

Search the Category

Code


<button id="searchbutton" aria-labelledby="searchlabel">
Search
</button>
<span id="searchlabel"> Search the Category </span>
</pre>
<p>

Standards:

Tags: , ,

Comments are closed.