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:
Aria Described By
Example 2:
This is a long paragraph containing the long description for the image.
It includes as much description as you need.
Code:
![]()
This is a long paragraph containing the long description for the image.
It includes as much description as you need.
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
Provide the info as it appears on your credit card:
Example 2:
Search the Category
Code
Search the Category
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:
Example 2:
Example 3:
Code:
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.