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[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.