mozilla

Revision 66763 of Multipart labels: Using ARIA for labels with embedded fields inside them

  • Revision slug: Accessibility/ARIA/forms/Multipart_labels
  • Revision title: Multipart labels
  • Revision id: 66763
  • Created:
  • Creator: Aaronlev
  • Is current revision? No
  • Comment 63 words added, 15 words removed

Revision Content

Using ARIA for labels with embedded fields inside them

Problem

You have a form where you ask your user a question, but the answer is actually part of the sentence the question is made of. A classic example we all know from our browser settings is the setting “Delete history after x days”. “Delete history after” is to the left of the textbox, x is the number, for example 21, and the word “days” follows the textbox, actually forming a sentence that is easy to understand.

If you’re using a screen reader, have you noticed that, when you go to this setting in Firefox, it actually tells you “Delete history after 21 days”?, followed by the announcement that you’re in a textbox, and that it contains the number 21. Isn’t that cool? You do not need to navigate around to find out the unit. “Days” could easily be “months” or “years”, and in many ordinary dialogs, there is no way to find this out other than navigating around with screen reviewing commands.

The solution is in an ARIA attribute called aria-labelledby. Its parameter is a string that consists of the IDs of the HTML elements you want to concatenate into a single accessible name.

Both aria-labelledby and aria-describedby are specified on the form element that is to be labelled, for example an <input> In both cases, the label for/label control bindings that may also exist, are overridden by aria-labelledby. If on an HTML page you provide aria-labelledby, you should also provide a label for construct to also support older browsers that do not have ARIA support yet. With Firefox 3, your blind users will automatically get the better accessibility of the new attribute, but the users of older browsers are not left in the dark this way.

Example:

Shut down computer after minutes
<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
<span id="labelShutdown">Shut down computer after</span>
<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
<span id="shutdownUnit"> minutes</span>

A Note for JAWS 8 users

JAWS 8.0 has its own logic to find labels, causing it to always override the accessibleName the textbox of an HTML document gets. With JAWS 8, I have not found a way to get it to accept the label from the example above. But NVDA and Window-Eyes do it just fine, and Orca on Linux also has no problems.

TBD: add more compatibility info

Can this be done without ARIA?

Community member Ben Millard has pointed out in a blog post that [ controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some of the techniques that have been available for years escape even us gurus sometimes. This technique does work in Firefox; however, it does not currently work in many other browsers, including IE. Therefore, for labels with embedded form controls, using aria-labelledby is still the best approach.

 

Revision Source

<div> <h1 id="Using_ARIA_for_labels_with_embedded_fields_inside_them">Using ARIA for labels with embedded fields inside them</h1> <h3 id="Problem"><span class="mw-headline" id="Problem">Problem</span></h3> <p>You have a form where you ask your user a question, but the answer is actually part of the sentence the question is made of. A classic example we all know from our browser settings is the setting “Delete history after x days”. “Delete history after” is to the left of the textbox, x is the number, for example 21, and the word “days” follows the textbox, actually forming a sentence that is easy to understand.</p> <p>If you’re using a screen reader, have you noticed that, when you go to this setting in Firefox, it actually tells you “Delete history after 21 days”?, followed by the announcement that you’re in a textbox, and that it contains the number 21. Isn’t that cool? You do not need to navigate around to find out the unit. “Days” could easily be “months” or “years”, and in many ordinary dialogs, there is no way to find this out other than navigating around with screen reviewing commands.</p> <p>The solution is in an ARIA attribute called aria-labelledby. Its parameter is a string that consists of the IDs of the HTML elements you want to concatenate into a single accessible name.</p> <p>Both aria-labelledby and aria-describedby are specified on the form element that is to be labelled, for example an &lt;input&gt; In both cases, the label for/label control bindings that may also exist, are overridden by aria-labelledby. If on an HTML page you provide aria-labelledby, you should also provide a label for construct to also support older browsers that do not have ARIA support yet. With Firefox 3, your blind users will automatically get the better accessibility of the new attribute, but the users of older browsers are not left in the dark this way.</p> <p>Example:</p> <input type="checkbox"><span id="labelShutdown">Shut down computer after</span> <input id="shutdownTime" type="text" value="10"> <span id="shutdownUnit"> minutes</span> <pre class="brush: html">&lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /&gt;
&lt;span id="labelShutdown"&gt;Shut down computer after&lt;/span&gt;
&lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /&gt;
&lt;span id="shutdownUnit"&gt; minutes&lt;/span&gt;
</pre> <h3 id="A_Note_for_JAWS_8_users"><span class="mw-headline" id="A_Note_for_JAWS_8_users">A Note for JAWS 8 users</span></h3> <p>JAWS 8.0 has its own logic to find labels, causing it to always override the accessibleName the textbox of an HTML document gets. With JAWS 8, I have not found a way to get it to accept the label from the example above. But NVDA and Window-Eyes do it just fine, and Orca on Linux also has no problems.</p> <div class="note">TBD: add more compatibility info</div> <h3 id="Can_this_be_done_without_ARIA?"><span class="mw-headline" id="Can_this_be_done_without_ARIA.3F">Can this be done without ARIA?</span></h3> <p>Community member Ben Millard has pointed out in a blog post that [ <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">controls can be embedded in labels as shown in the above example using HTML 4</a>, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some of the techniques that have been available for years escape even us gurus sometimes. This technique does work in Firefox; however, it does not currently work in many other browsers, including IE. Therefore, for labels with embedded form controls, using aria-labelledby is still the best approach.</p> <p> </p>
</div>
Revert to this revision