Re: About aria-expanded example on Wiki page

Sailesh,
These pages are all works in progress as noted at the top of the page 
"This Wiki page is edited by participants of the WCAG Working Group. It 
does not necessarily represent consensus and it may have incorrect 
information or information that is not supported by other Working Group 
participants, WAI, or W3C. It may also have some very useful information."

  I'll make sure the comments get addressed before these are submitted 
for review by the WCAG working group. So they don't get forgotten I have 
added them to the wiki discussion page.
regards,
James

On 7/7/2013 3:44 AM, Sailesh Panchang wrote:
> 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/
>
>
>