Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
See User Agent Support for WAI-ARIA for general information on user agent support.
Screen reader support varies depending on browser:
System Access To Go (IE8) does not recognise aria-label
Using NVDA with Firefox (FF), aria-label
is only spoken on custom controls
Using NVDA with Internet Explorer (IE), aria-label
is only spoken on native controls
JAWS has the best support of aria-label
Here are the results of some detailed testing:
JAWS 13 (WIN7, FF13)
Example 1: JAWS speaks aria-label
of div
set to contentEditable
but not the content of the div (the word to be corrected)
Example 2: JAWS speaks aria-label
: "close button"
Example 3: JAWS does not speak the aria-label
, just says "button"
JAWS 13 (WIN7, IE9)
Example 1: JAWS speaks aria-label
, but the content of div
boxes is only spoken in Virtual PC cursor mode, not when tabbing to the div
s
Example 2: JAWS speaks content of div
box (focus is being moved to its beginning through the skip link) followed by aria-label
: "close button"
Example 3: JAWS speaks the aria-label
NVDA 2011.3 (XP, FF13)
Example 1: NVDA speaks specified aria-label
of div
set to contentEditable
, followed by announcing "section editable" and, for mis-spelled words, "spelling error"
Example 2: NVDA does not speak the aria-label
, just "X button"
Example 3: NVDA does not speak the aria-label
, just "button" (- and + are dropped, but this may be customizable in screen reader settings)
NVDA 2011.3 (XP, IE8)
Example 1: Browser focuses div contentEditable
but apparently does not expose them to the accessibility API so NVDA does not speak associated contents of aria-label
Example 2: NVDA speaks the aria-label
content, "button close", instead of the text included in the button (X)
Example 3: NVDA speaks the aria-label
content
NVDA 2012.2.1 (WIN7, IE9)
Example 1: Same as under (XP, IE8): div contentEditable
received focus but aria-label
is not exposed to accessibilty API
Example 2: NVDA speaks aria-label
"This is a div box button close" in browse mode and "close button" in focus mode
Example 3: Content of aria-label
spoken
NVDA 2012.2.1 (WIN7, FF13)
Example 1: NVDA speaks specified aria-label
for custom div set to contentEditable, followed by announcing "section editable" (but no announcement of mis-spelled words here)
Example:2 Does not speak aria-label
of X-button
Example 3: NVDA does not speak aria-label
for + and - button (- and + are dropped, but this may be customizable in screen reader settings)
System Access To Go (XP, IE8): In all three examples, SAToGo does not recognise aria-label
Example 1: SAToGo speaks "editable text" followed by the text in div contentEditable
Example 2: After activating Link, SAToGo speaks content of the pop-up div
followed by "button X
Example 3: By default, SAToGo speaks "plus button" and "hyphen button" - not the content of aria-label
For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.
In some situations, elements can be given the attribute aria-label
to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.
In other situations, elements can be given the attribute aria-label
to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div
set to contentEditable
is used instead of native form elements such as input type="text"
or textarea
in order to provide a richer text editing experience.
On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'x'. The property aria-label="close"
is used to provide an accessible name to the button.
<div id="box">
This is a pop-up box.
<button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>
</div>
Example from Example close button
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Work Phone</span>
+<input type="number" aria-label="country code">
<input type="number" aria-label="area code">
<input type="number" aria-label="subscriber number">
</div>
Resources are for information purposes only, no endorsement implied.
For elements that use aria-label
:
Check that the value of the aria-label
attribute properly describes the purpose of an element where user input is required
#1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.