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(
, idElementToDisplayOrHide) {
idElementWithAriaExpandedvar 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') {
.style.display = 'none';
elementToDisplayOrHide.setAttribute(
elementWithAriaExpanded'aria-expanded', 'false');
.textContent = "Collapsed";
elementWithAriaExpandedelse {
} .style.display = '';
elementToDisplayOrHide.setAttribute(
elementWithAriaExpanded'aria-expanded', 'true');
.textContent = "Expanded";
elementWithAriaExpanded
}return true;
}
function ariaExpandedExampleOnKeyDown(
event, idElementWithAriaExpanded, idElementToDisplayOrHide) {
switch (event.keyCode) {
case keyCodeEnter:
case keyCodeSpace:
ariaExpandedExampleToggle(
, idElementToDisplayOrHide);
idElementWithAriaExpandedreturn 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
- 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.
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.
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.
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
- 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
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
- Operating System
- Windows 10 Pro version 1909 build 18363.657 64-bit
- Screen Readers
- JAWS 2020.2001.70
- NVDA 2019.3.1
- Microsoft Narrator
- Web Browsers
- Google Chrome version 80.0.3987.106 (Official Build) (64-bit)
- Internet Explorer 11 version 11.657.18362.0
- Mozilla Firefox 73.0 (64-bit)