Using aria-label to provide an invisible label

From WCAG WG


Status

Editorial note

The title of this technique might be changed to "Using aria-label to provide an invisible label when there is no visible label but the context and visual appearance of the control make its purpose clear" (Loretta) or "Using aria-label to provide a programmatically determinable label" (Adam)

User Agent Notes [To be published separately]

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 divs
    • 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

Applicability

This technique applies to technologies that support WAI-ARIA, such as HTML.

This technique relates to:

Description

In some contexts, 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.

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine their 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 other contexts, the use of native HTML elements such as label for is not possible - 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.

Examples

Example 1: A quiz using divs set to contentEditable

Note: The accessibility support of aria-label on divs with the attribute contentEditable="true" is currently still weak.

On a page, a spelling quiz uses divs with the attribute contentEditable="true".

Since the text input elements used in the quiz are not form elements, label cannot be used. Instead, aria-label is used to provide short labels ("Correct first word", "Correct second word", etc.) to the editable divs. 


<div class="quizbox">
  <h3>The spelling quiz</h3>
  <p id="instruction">Correct the spelling of the four words below. When you are done, press submit!</p>
  <div aria-label="Correct first word" contenteditable="true">ancilary</div>
  <div aria-label="Correct second word" contenteditable="true">parsemonious</div>
  <div aria-label="Correct third word" contenteditable="true">serendipidous</div>
  <div aria-label="Correct fourth and last word" contenteditable="true">voiciferous</div>
  <button type="submit">Submit</button>
</div>

Look at Example spelling quiz, with test results

Example 2: A close button (X) in a pop-up div

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. 

    
<style>
    .box-hidden {
        display: none;
        position: absolute;
        top:20%; left:10%; width:30%; height:20%;
        padding: 10px;
        border: 2px solid black;
        background-color: #ddd;
        z-index:1000;
        overflow: auto;
	}
	
    .close-button {
	float:right;
	}
</style>

<p><a onclick="document.getElementById('box').style.display='block'; return true;" href="#box">Display a div box</a></p>
		
<div id="box" class="box-hidden">
   This is a div box.
   <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>				
</div>

Look at Example close button

Example 3: Donation form with controls to change the value of a text input

A text input is meant to receive the amount the user wants to donate in a multi-step process, with 5 Euros as default. Above and below the text input, buttons allow to increase or decrease the number contained in the text input by 5. The buttons just contain a plus and a minus sign (+ / -), and aria-label attributes provide the labels "step up donation" and "decrease donation". 

	<script type="text/javascript">	
	function changeValue(e) {
		var inputbox = document.getElementById("donated");
		var currentValue = parseFloat(inputbox.value);
		
		if (e.getAttribute("id") == "stepup") inputbox.value = currentValue + 5;
		else {
			if (currentValue >= 10) inputbox.value = currentValue - 5;
			else inputbox.value = 5;		
		}
	}
	</script>	
	

<form action="javascript:void(0);">
	<label for="donated">Donate:</label>
	<br />
	<button id="stepup" role="button" aria-label="step up donation" onclick="changeValue(this); return false;">+</button>
		
		<input id="donated" type="text" value="5" /> Euro
			
	<button id="stepdown" role="button" aria-label="decrease donation" onclick="changeValue(this); return false;">-</button>
	<input type="submit" value="Next step" />
</form>

Look at Example donation form

Resources

WAI ARIA 1.0 Authoring Practices

Related Techniques

Tests

Procedure

For elements that use aria-label

  1. Check that the value of the aria-label attribute properly describes the purpose of the focusable element.

Expected Results

  • Test #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.

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Using_aria-label_to_provide_an_invisible_label&oldid=2631"