PF/ARIA/BestPractices/LabelDescribe

From W3C Wiki
< PF‎ | ARIA‎ | BestPractices
Jump to: navigation, search


Category - Aria Best Practices

Labeling and Describing


Purpose

Marked up content or widgets will often need additional context to make clear what the meaning or purpose is. It is also reasonable that some content media types will need additional descriptions in another format to give clarity to those who are unable to consume the origin format. These additional meta-content sections are linked together by tagging them as labels or descriptions. ARIA provides the labelledby and describedby attributes to signal the browser to feed these relationships into the accessibility layer. This layer is then used by screen readers and other accessibility technology (AT) to gain awareness of how disparate regions are actually contextually connected to each other. With this awareness the AT can then present a meaningful navigation model for discovery and presentation of these additional content sections. The user agent itself can also choose to present these insights in a meaningful way. Generally you should always add these attributes to any widgets on your site as they are often merely a construct of HTML and JavaScript which provides no obvious insight as to what the widget's behavior or interactivity is.

Labelled By

A labelledby section needs to indicate what the object it labels does. For example, you could have a button in a webmail client which will erase a selected message. This button could be constructed out of any kind of HTML but with with the ARIA roles, states and other attributes the user will know it is a button. The button itself should have a basic behavioral explanation, such as "erase mail" but the user might not be familiar with this feature or webmail in general, so providing additional behavioral labeling will reduce fear and make the page more user friendly. The markup could look like this

<div role="wairole:button" aaa:labelledby="eraseButton" tabindex="0">Erase Message</div>

and elsewhere in the markup

<div id="eraseButton">Permanently erase the currently selected message titled "Nigerian Lottery"</div>

This would give the user and any running AT additional information about the expected behavior if the button widget is activated. In this particular case, the div content has been updated to reflect the current context to make it more obvious exactly what the effect of the action will be. The section doing the labeling might be referenced by multiple widgets or objects as these need only reference the same id, so contextual description may not always be viable. The labelledby attribute can have multiple ids specified as a space separated list much like applying multiple classes to a single DOM object. labelledby does not accept a className specification so all relationships are by specific and unique id only.

Described By

A describedby section provides further information about a given object or widget, which may not be intuitively obvious from the context, content or other attributes. For example, a fake window is a common widget used in web applications and is often constructed using a div absolute positioned in a layer above other content. To simulate common window behavior look and feel there is often an X box in the corner which, when activated, dismisses the window widget. One common way to make this X box is to simply make a link whose content is an X. This doesn't give a non-visual user much to go on and belies the real purpose of the X link. To help we add more descriptive text stored elsewhere in the page like this:

<a role="wairole:button" aaa:describedby="winClose" href="#" onclick="fakewin.close()">X</a>

and then elsewhere in the HTML

<div id="winClose">Closing this window will discard any information entered and return you back to the main page</div>

Like labelledby, describedby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets. In our contrived example we would also want a good labelledby section to fully explain what the window does and how closing will effect the task being worked on. If an object or widget lacks describedby the user agent or AT may try to extract information from the label or th tags, if present. The label and th tags have limited use in that they can only be applied to forms or tables, respectively.

ARIA also defines the description and tooltip roles to which describedby may reference to assign a description (which could span multiple document elements) and a author defined tooltip. The assistive technology can can tell from the type of object describing the document element what that the purpose of that element is. For example, a screen reader could announce the tooltip without the user having to waive the mouse over the element by following the describedby relationship to a document area with a tooltip role.

Here is a code snippet showing a set of the tooltip:

...

<div class="text">
     <label for="first">First Name:</label> 
	 <input type="text"
	     id="first"
         name="first" 
         size="20"
         onfocus="tooltipShow(tooltip1)"
         onblur="tooltipHide(tooltip1)"
         onmouseover="tooltipShow(tooltip1)"
         onmouseout="tooltipHide(tooltip1)"
         aaa:describedby="tp1"
	  />
     <div id="tp1" class="tooltip" role="tooltip">Your first name is a optional</div>

</div>

...