Perplexed Owl Random Ponderings

Ben Key:

Sample web page for the aria-expanded attribute.

This web page contains a detailed analysis of various techniques that can be used to implement the aria-expanded attribute and and a discussion of the pros and cons of each technique. It was motivated by a JAWS Customer Support Request sent to The Paciello Group (TPG).

The options discussed in this page are as follows.

JavaScript code used by the examples

The examples use the following JavaScript code to implement the required functionality.

"use strict";

var keyCodeEnter = 13;
var keyCodeSpace = 32;

function ariaExpandedExampleToggle(
  idElementWithAriaExpanded, idElementToDisplayOrHide) {
  var functionName = "ariaExpandedExampleToggle";
  var elementToDisplayOrHide = document.getElementById(
    idElementToDisplayOrHide);
  if (!elementToDisplayOrHide) {
    var logMessage = functionName + "Warning: Could not find a document element with the id '" + idElementToDisplayOrHide + "'.";
    console.log(logMessage);
    return false;
  }
  var elementWithAriaExpanded = document.getElementById(
    idElementWithAriaExpanded);
  if (!elementWithAriaExpanded) {
    var _logMessage = functionName + "Warning: Could not find a document element with the id '" + idElementWithAriaExpanded + "'.";
    console.log(_logMessage);
    return false;
  }
  if (elementToDisplayOrHide.style.display != 'none') {
    elementToDisplayOrHide.style.display = 'none';
    elementWithAriaExpanded.setAttribute(
      'aria-expanded', 'false');
  } else {
    elementToDisplayOrHide.style.display = '';
    elementWithAriaExpanded.setAttribute(
      'aria-expanded', 'true');
  }
  return true;
}

function ariaExpandedExampleOnKeyDown(
  event, idElementWithAriaExpanded, idElementToDisplayOrHide) {
  switch (event.keyCode) {
    case keyCodeEnter:
    case keyCodeSpace:
      ariaExpandedExampleToggle(
        idElementWithAriaExpanded, idElementToDisplayOrHide);
      return false;
    default:
      return true;
  }
}

The DIV element

The DIV-with-aria-expanded element is a DIV element that has the aria-expanded attribute. The value of the aria-expanded attribute is initially set to true. Clicking on the DIV-with-aria-expanded element or pressing either the Enter key or the Space key while the DIV-with-aria-expanded element has focus will toggle the aria-expanded attribute for the element and toggle the display state of DIV-with-aria-expanded-controlled-region element.

Expanded

This paragraph is only visible if the aria-expanded attribute of the DIV-with-aria-expanded element is true.

Pros

Cons

The A element

The Using aria-expanded to indicate the state of a collapsible element page suggests using the A element for this purpose.

The A-with-aria-expanded element is an A element that functions much like the DIV-with-aria-expanded element.

Expanded

This paragraph is only visible if the aria-expanded attribute of the A-with-aria-expanded element is true.

Pros

Cons

The BUTTON element

The Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions page recommends using a BUTTON element for this purpose.

The BUTTON-with-aria-expanded element is a BUTTON element that functions much like the DIV-with-aria-expanded element.

This paragraph is only visible if the aria-expanded attribute of the BUTTON-with-aria-expanded element is true.

Pros

Cons

Summary

You should use either the A element or the BUTTON element with the aria-expanded attribute. Of these two, the BUTTON element is the preferred option. If you choose to use another element, the results may not be what you expect.

Test Environment