label but which label

date December 15, 2009

I would like to add a descriptive label to my widget that is hidden from sited users who don’t need it but is accessible to AT though I’m not sure about the semantics.

I know with ARIA its possible to add a label to an element but I’m not sure which of my choices is the best fit for my widget.

label

aria-label used to set label describing a related element and where a visible tooltip is undesirable and the text IS NOT VISIBLE

aria-labeledby identical to aria-label but this text IS VISIBLE

aria-describedby provides additional information a user may need about an element

W3C Spec Link: http://www.w3.org/TR/wai-aria/states_and_properties#aria-label

Given my options, aria-label is the best solution. Since the widget label is NOT going to be visible the aria-label is the obvious choice vs. aria-labeledby. The aria-describedby is very similar to aria-label but meant more to describe additional state about the element rather than label a related element.

code

<h3 id="label_my_widget" class="hideme">A label for my widget</h3>
<div id="my_widget" aria-label="label_my_widget">
//widget code ...
</div>
Full Running Example of ARIA Code: http://www.overscore.com/ariaexample.html

The code above adds a relationship between the h3 with id=”label_my_widget” and the widget with aria-label=”label_my_widget”. AT now know that the widgets label is the h3 with text A label for my widget. The class “hideme” has a style that positions the label off screen so its not visible to sited users who can probably make out the meaning of the widget without a label but is accessible to users using an AT who could benefit from the label.

Also worth noting, the aria-describedby attribute could have been added to the label or widget, though probably the widget would make more sense. If this widget did something complicated or unexpected adding additional information via the aria-describedby attribute would probably be helpful to all users.

putting it all together

I was able to add an invisible label to my widget via the aria-label attribute which accomplishes the goal of hiding the label to sited users and exposing it to blind users.