Using aria-expanded to indicate the state of a collapsible element

This is an outdated draft.

Current information is available from the WAI website: w3.org/WAI

Status

This is an outdated draft.

Current information is available from the WAI website: w3.org/WAI

Editorial note

The title of this technique is just a draft - it may become integrated in a more encompassing technique (e.g., Using ARIA for collapsable content).

User Agent Notes

Screen reader support is decent on desktop and Android, no support in iOS (Mac OSX not yet tested)

Full testing results at Using aria-expanded to indicate the state of a collapsible element

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

• Success Criterion 2.4.1 Bypass Blocks
• Success Criterion 4.1.2 Name, Role, Value

Description

When authors use collapsible content, for example, to hide navigation menus or lists of content, the triggering link or button should indicate to screen reader users whether the collapsable content below is in the expanded or in the collapsed state. The aria-expanded attribute is used for this purpose.

Examples

Example 1: Toggle navigation menu

A link "Toggle navigation menu" collapses and expands the menu contents. In this example, contents are expanded by default.

<a aria-expanded="true" id="TLink1" href="#" onclick="toggle('navbar', 'TLink1')">Toggle Navigation Bar 1</a>
  <ul style="" id="navbar">
  <li><a href="http://example.com/target1.html">Link 1</a></li>
  <li><a href="http://example.com/target2.html">Link 2</a></li>
  <li><a href="http://example.com/target3.html">Link 3</a></li>
  <li><a href="http://example.com/target4.html">Link 4</a></li>
  </ul>

<p>Here is some content below the collapsible section.</p>

Style and Script in head section of page:

<style type="text/css" media="screen">
#navbar li, #navbar2 li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
</style>

<script type="text/javascript">
  function toggle(id, id2) {
    var n = document.getElementById(id);
	if (n.style.display != 'none') 
	  {
	  n.style.display = 'none';
      document.getElementById(id2).setAttribute('aria-expanded', 'false');
  }
  else
  {
  n.style.display = '';
  document.getElementById(id2).setAttribute('aria-expanded', 'true');
	  }
  }
</script>

Look at script of aria-expanded (code only)

Resources

• WAI ARIA 1.0 Authoring Practices
• Making an accessible dialog box by Nicholas C. Zakas
• Custom-Built Dialogs by Gez Lemon

Related Techniques

Using WAI-ARIA state and property attributes to expose the state of a user interface component

Tests

Procedure

For elements that use aria-expanded

1. Check that aria-expanded is used on elements a or button (** not sure if this is required)
2. Check that the toggling action correctly changes the state of the aria-expanded attribute (i.e. when content gets hidden (removed from the DOM or set to display:none via CSS), aria-expanded is set to false)

Expected Results

Test #1 and test #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.