Sample web page for the aria-expanded attribute.

"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');
    elementWithAriaExpanded.textContent = "Collapsed";
  } else {
    elementToDisplayOrHide.style.display = '';
    elementWithAriaExpanded.setAttribute(
      'aria-expanded', 'true');
    elementWithAriaExpanded.textContent = "Expanded";
  }
  return true;
}

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

Expanded

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

Pros

• It works, more or less.

Cons

• You need to remember to use both the onclick event and the onkeydown event in order for it to work properly; otherwise it will not be possible to expand or collapse the DIV element using the keyboard. If it is not possible to expand or collapse the DIV element using the keyboard it would be a violation of WCAG Guideline 2.1 Keyboard Accessible.
• None of the three main screen readers used on Microsoft Windows work correctly with the DIV-with-aria-expanded element. The screen readers do not speak the expanded or collapsed state when the element gains focus. The screen readers do not speak in responses to changes to the expanded or collapsed state of the element.
• Microsoft Narrator will speak the “item has no primary action” error message when the Enter key is pressed while the DIV-with-aria-expanded element has focus.
• I have noticed some odd behavior when the Enter key is pressed to expand or collapse the DIV-with-aria-expanded element in Mozilla Firefox.
• This is not how the W3C recommends you implement the aria-expanded attribute.

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

Pros

• It works, more or less.
• It follows W3C recommendations.
• The three main screen readers used on Microsoft Windows all work with the A-with-aria-expanded element correctly. The screen readers do speak the expanded or collapsed state when the element gains focus. The screen readers do speak in responses to changes to the expanded or collapsed state of the element.
• Microsoft Narrator does not speak an error message when the Enter key is pressed while the A-with-aria-expanded element has focus.
• You do not need to remember to use both onclick and onkeydown. That is because the A element natively supports onkeydown; pressing Enter or Space when the A-with-aria-expanded element has focus will result in the onclick handler for the element being called.

Cons

• There is a school of thought that links should only be used when loading a new web page. They should not be used as user interface elements that trigger events.
• I have noticed some odd behavior when the Enter key is pressed to expand or collapse the A-with-aria-expanded element in Mozilla Firefox.

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

Pros

• It works.
• It follows W3C recommendations.
• The three main screen readers used on Microsoft Windows all work with the BUTTON-with-aria-expanded element correctly. The screen readers do speak the expanded or collapsed state when the element gains focus. The screen readers do speak in responses to changes to the expanded or collapsed state of the element.
• Microsoft Narrator does not speak an error message when the Enter key is pressed while the BUTTON-with-aria-expanded element has focus.
• You do not need to remember to use both onclick and onkeydown. That is because the A element natively supports onkeydown; pressing Enter or Space when the BUTTON-with-aria-expanded element has focus will result in the onclick handler for the element being called.
• No one will complain about you using user interface elements for anything other than their intended purpose since this is what buttons are meant to be used for.
• I did not notice the same odd behavior in Mozilla Firefox with the BUTTON-with-aria-expanded element that I did with the A-with-aria-expanded element and the DIV-with-aria-expanded element.

Cons

• None