Archive for the ‘ARIA’ Category

ARIA LABEL, LABELLEDBY and DESCRIBEDBY

Tuesday, May 17th, 2011

ARIA DescribedBy (aria-describedby), aria-labelledby and aria-label are all very similar and all can be used to communicate with the screen reader.

Example 1:

Aria Label
Aria Labelled By
Aria Described By

Code


<table>
<tr><td><span id="my_desc1">Aria Label</span></td><td><button aria-label="Aria Label">submit</button></td></tr>
<tr><td><span id="my_desc2">Aria Labelled By</span></td><td><button aria-labelledby="my_desc2">submit</button></td></tr>
<tr><td><span id="my_desc3">Aria Described By</span></td><td><button aria-describedby="my_desc3">submit</button></td></tr>
</table>

Standards:

ARIA DescribedBy

Tuesday, May 17th, 2011

ARIA DescribedBy (aria-describedby) is used to associate descriptive information to HTML elements. In doing so, the browser makes it available to assistive technology through the MSAA Description value. The aria-describedby points to a unique id or list of unique ids. It is very useful when providing a additional descriptions, and as an example, can point to a paragraph or a span encompassing a group of paragraphs. aria-describedby is very similiar to aria-labelledby

At the time of writing this document, I am not sure how well it is supported. Try the following example and find out.

Example 1:

Aria Described By

Code:


<span id="my_desc3">Aria Described By</span></td><td><button aria-describedby="my_desc3">submit</button><br />

Example 2:

Rublev's Trinity

This is a long paragraph containing the long description for the image.

It includes as much description as you need.

Code:


<img src="http://www.donaldevans.com/images/trinity.jpg" 
    aria-labelledby="long_alt" 
    aria-describedby="long_alt2"  
    alt="Rublev's Trinity" />
<div id="long_alt">
<p>
This is a long paragraph containing the long description for the image.
</p>
</div>
<div id="long_alt2">
<p>
It includes as much description as you need.
</p>
</div>

Standards:

ARIA LabelledBy

Monday, May 16th, 2011

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:

ARIA Label

Monday, May 16th, 2011

ARIA Label (aria-label), is used to create a label from a text string. It takes the form of aria-label="text string". This could be useful when there is no on screen text to use for a label.

Example 1:


<button aria-label="Aria Label">submit</button>

Example 2:


<input type="text" aria-label="Aria Label">

Example 3:

Code:


<button aria-label="ARIA Label"><img src="http://www.donaldevans.com/images/trinity.jpg" alt="Rublev's Trinity" /></button>

Standards: