Talk:Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions
Comments from Sailesh (7/7/2013) Refer to Example 1: Using a button to collapse and expand a region on the Wiki page
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 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.