About aria-expanded example on Wiki page

Refer to Example 1: Using a button to collapse and expand a region on the Wiki page[1]
 The description states,
"... aria-expanded state indicates whether the subtree  can be expanded or collapsed, as well as whether or not it is currently expanded or collapsed." 
This supposedly means the subtree is a UI element that can be expanded/collapsed.
However in example 1, aria-expanded is used on the element with role=region and not on the button element.
The latter is the UI element whose  show/hide functionality as well as current state is exposed by the text toggeled within the SPAN and not by aria-expanded.  
The visual rendering of the element with role=region is toggled by CSS 'display' property and  setting aria-expanded on it does not seem to accomplish much. 
When it is rendered, it is there for all to perceive.
Most of all, as it is not a UI element the state does not get exposed at all. 
Even if it did get exposed, it will get exposed only in expanded state; in collapsed state it has display:none!
However, on the other hand if  aria-expanded is set on the button element , it will accomplish what is described in the technique's objective on the Wiki page: it will convey that the button has hide/show functionality as well as its current state.
The SPAN with show/hide may be unnecessary. An HTML (or CSS) image may be used to reinforce the functionality visually.
That aria-expanded and aria-controls are to be used on the same element is the interpretation of another accessibility practitioner too: 
Easy ARIA tip #5: Marco’s accessibility blog[2]  
Finally, is it right to toggle CSS display (or aria-expanded for that matter)  on an element with role=region?
An element with role=region is meant to be a perceivable section of the Web page (as per its definition).
In the example#1 on the Wiki page, the element with role=region has no heading i.e. accessible name. 

I appreciate your clarifications / explanations.

Thanks,
Sailesh Panchang
www.deque.com

[1] http://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions
[2] http://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/

Received on Sunday, 7 July 2013 10:44:45 UTC