This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using aria-labelledby to concatenate a label from several text nodes

From WCAG WG
Revision as of 16:21, 20 April 2013 by Dfischer (Talk | contribs)

Jump to: navigation, search


Status

User Agent Notes

Note: In order to support IE, the attribute tabindex="-1" may need to be provided on non-interactive elements that are referenced by aria-labelledby attributes. For more details see Using WAI-ARIA in HTML.

  • Full support:
    • WIN7 / FF16 / NVDA 2012.2.1 (Example 2: also reads column headers)
    • WIN7 / FF16 / JAWS 13 (Example 2: also reads column headers)
    • WIN7 / IE9 / JAWS 13
    • WIN XP /FF16 / NVDA 2011.3
    • iOS X / VoiceOver
  • Partial support:
    • WIN7 / IE9 / NVDA 2012.2.1 (Example 1: drops default text of text field: "Extend time-out to minutes edit selected 20")
  • Not supported:
    • WIN XP / IE8 / NVDA 2001.3 Example 1: Does not read text referenced by aria-labelledby ('20','minutes'): "Extend time-out to edit selected 20"
    • System Access To Go (IE8)

Applicability

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

This technique relates to:

Description

The aria-labelledby property can be used to label all visual objects. Applied to inputs, the aria-labelledby property can be used to label native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".

One particular use of aria-labelledby is for text inputs in situations where a meaningful label should consist of more than one label string. The native HTML label element falls short here because its for attribute allows just one label string to be associated to the text input.

Authors assign unique ids to the label strings to be concatenated as the label for the input element. The value of the aria-labelledby attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous label of the input.

The concatenation of label strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated label at the right position.

Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as label for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into labels for the text input elements inside the table.

Note: ARIA best practices (where?? Cannot find any mention of this in http://www.w3.org/TR/wai-aria-practices/ ) specify that he string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.

Examples

Example 1: A time-out input field with concatenated label

A text input allows users to extend the default time before a time-out occurs.

The string "Extend time-out to" is contained in a native label element.

The aria-labelledby attribute on the text input references three elements: (1) the native label, (2) the text input containing the default text '20', and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full label for the text input.

<form>
<p><span id="timeout-label"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20" 
    aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit"> minutes</span></p>
</form>

(Adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe in 2008)

Look at Time-out input field with concatenated label

Example 2: A simple data table with text inputs

A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.

<table cellpadding="0">
	<tr>
		<td></td>
		<th id="tpayer">Taxpayer</th>
		<th id="sp">Spouse</th>
	</tr>

	<tr>
		<th id="gross">W2 Gross</th>
		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
	</tr>
	
	<tr>
		<th id="div">Dividends</th>
		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
	</tr>
</table>

(Based on an example by Jim Thatcher.)

Look at Using aria-labelledby for simple table with text inputs

Example 3: A conference workshop booking table

A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated label for the checkboxes via aria-labelledby.

Some browser / screen reader combinations (e.g. Mozilla Firefox and NVDA) will in addition speak the relevant table cell headers.

    

<h1>Conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>

<table>
<caption>Conference workshop booking table</caption>
<tr>
	<td rowspan="2"></td>
	<th colspan="2" scope="colgroup">Thursday</th>
	<th colspan="2" scope="colgroup">Friday</th>
</tr>

<tr>
	<th scope="col" id="am1">9 to 12 AM</th>
	<th scope="col" id="pm1">2 to 5 PM</th>
	<th scope="col" id="am2">9 to 12 AM</th>
	<th scope="col" id="pm2">2 to 5 PM</th>
</tr>

<tr>
	<th id="track1" scope="row">track 1</th>
	<td>
		<h2 id="title-TM1">Memoirs of a justified coder
                <span class="hide">by</span>
		<em>Maud McRae</em></h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
                <label id="TM1-att" for="TM1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA1">Pride and Vendor Prefixes 
                <span class="hide">by</span>
		<em>Cassandra Barnave</em></h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
                <label id="TA1-att" for="TA1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM1">Cutting corners with code: Crime and Punishment 
                <span class="hide">by</span>
		<em>Chuck Myers</em></h2>
		<p>1 place left</p>
		<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
                <label id="FM1-att" for="FM1">Attend</label></p>

	</td>
	
	<td>
		<h2 id="title-FA1">Dead souls: The perils of memory leaks 
                <span class="hide">by</span>
                <em lang="de">Gunther von Westendorff</em></h2>
		<p>11 places left</p>
		<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
                <label id="FA1-att" for="FA1">Attend</label></p>
	</td>
</tr>


<tr>
	<th id="track2" scope="row">track 2</th>
	<td>
		<h2 id="title-TM2">Carrots and Sticks: The impact of Mandate 376 
                <span class="hide">by </span>
		<em lang="fr">Jacqueline Carnet</em></h2>
		<p>18 places left</p>
		<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
                <label id="TM2-att" for="TM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA2">Far from the madding Flash: Native Video in HTML5 
                <span class="hide">by</span>
		<em lang="ru">Sergej Leontiev</em></h2>
		<p>2 places left</p>
		<p><input  type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
                <label id="TA2-att" for="TA2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM2">Of mice and pen: the battle for smart input 
                <span class="hide">by</span>
		<em>Jake Ziegler</em></h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
                <label id="FM2-att" for="FM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FA2">A hitchhiker's guide to conformance 
                <span class="hide">by</span>
                <em>Emily Chan</em></h2>
		<p>19 places left</p>
		<p><input  type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
                <label id="FA2-att" for="FA2">Attend</label></p>
	</td>
</tr>
</table>


Look at Conference workshop booking timetable

Resources

Related Techniques

Tests

Procedure

For inputs that use aria-labelledby

  1. Check that IDs referenced in aria-labelledby are unique and match the IDs of the text nodes that together provide the label
  2. Check that the concatenated content of elements referenced by aria-labelledby is descriptive for the purpose or function of the element labeled

Expected Results

  • Test #1 and #2 are 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.