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:


<div id="LabelInstructions">
Provide the info as it appears on your credit card:
<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


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


Tags: , ,

Comments are closed.