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.

Talk:Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions

From WCAG WG
Jump to: navigation, search

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.