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:
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:
- WCAG 2.0 SC 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- WCAG 2.0 SC 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A).
- WCAG 2.0 Techniques ARIA1: Using the aria-describedby property to provide a descriptive label for input controls
- Section 508: Paragraph (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
ARIA LabelledBy
Monday, May 16th, 2011ARIA 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:
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:
- WCAG 2.0 SC 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- WCAG 2.0 SC 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A).
- WCAG 2.0 Techniques ARIA1: Using the aria-describedby property to provide a descriptive label for input controls
- Section 508: Paragraph (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
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:
- WCAG 2.0 SC 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- WCAG 2.0 SC 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A).
- WCAG 2.0 Techniques ARIA1: Using the aria-describedby property to provide a descriptive label for input controls
- Section 508: Paragraph (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
