ARIA-Expanded - Enhancing Accessibility with State Information

Shawn Sandy (Ally.Cafe) ~ June 26, 2024

ARIA (Accessible Rich Internet Applications) attributes help enhance accessibility for web applications. One such attribute is aria-expanded. This attribute is crucial for users relying on assistive technologies, providing them with important information about the state of UI components that can expand or collapse content.

What is `aria-expanded`?

The aria-expanded attribute indicates whether a control, such as a button, a link, or a toggle, is expanded or collapsed. It is commonly used in components like accordions, menus, and dropdown lists. The attribute can have three possible values:

true: The element is expanded and its content is visible.
false: The element is collapsed and its content is hidden.
undefined (or omitted): The default state when the element does not control expandable content.

Why `aria-expanded` Matters

For users with visual impairments who rely on screen readers, knowing the state of interactive elements is vital for navigating and understanding web content. The aria-expanded attribute helps communicate whether additional content is available and visible, providing a better user experience.

Applying `aria-expanded` in Practice

Here are some best practices for using aria-expanded:

Match with Visible State: Ensure the value of aria-expanded always matches the visual state of the element. If the content is visible, aria-expanded should be true. If the content is hidden, aria-expanded should be false.
Update Dynamically: When the state of the element changes (e.g., a menu opens or closes), dynamically update the aria-expanded attribute to reflect the new state.
Use with Appropriate Roles: aria-expanded should be used with elements that have roles like button, link, or menuitem to ensure that the intended functionality is clear.

Example Code

Here’s a simple example of how to use aria-expanded in a button that controls the visibility of a panel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ARIA-Expanded Example</title>
    <style>
        #panel {
            display: none;
        }
        #panel[aria-expanded="true"] {
            display: block;
        }
    </style>
</head>
<body>
    <button id="toggleButton" aria-expanded="false" aria-controls="panel">Show More</button>
    <div id="panel" role="region" aria-expanded="false">
        <p>This is the expandable content.</p>
    </div>

    <script>
        document.getElementById('toggleButton').addEventListener('click', function() {
            var button = this;
            var panel = document.getElementById('panel');
            var isExpanded = button.getAttribute('aria-expanded') === 'true';

            // Toggle the state
            button.setAttribute('aria-expanded', !isExpanded);
            panel.setAttribute('aria-expanded', !isExpanded);

            // Optionally change button text
            button.textContent = isExpanded ? 'Show More' : 'Show Less';
        });
    </script>
</body>
</html>

In this example:

The button has an aria-expanded attribute set to false initially, indicating the panel is collapsed.
The panel has a corresponding aria-expanded attribute that also starts as false.
When the button is clicked, both aria-expanded attributes are toggled between true and false, and the panel’s visibility is adjusted accordingly.

Why `aria-expanded` Matters for VoiceOver Users

VoiceOver users rely on auditory cues to navigate and understand web content. When aria-expanded is used correctly, it provides essential feedback about the state of expandable sections, making it easier for users to interact with and comprehend the content.

Implementing `aria-expanded` for VoiceOver

Here are best practices for using aria-expanded to ensure compatibility with VoiceOver:

Consistent State Updates: Always update the aria-expanded attribute dynamically to match the visual state of the element.
Keyboard Accessibility: Ensure that elements with aria-expanded can be activated using the keyboard.
Role and Labeling: Use appropriate ARIA roles and labels to provide context about the expandable content.

Example Code

Here’s an example of how to implement an accessible expandable section using aria-expanded:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ARIA Expanded Example</title>
    <style>
        #content {
            display: none;
        }
        #content[aria-expanded="true"] {
            display: block;
        }
    </style>
</head>
<body>
    <button id="toggleButton" aria-expanded="false" aria-controls="content">Show More</button>
    <div id="content" role="region" aria-expanded="false">
        <p>This is the expandable content.</p>
    </div>

    <script>
        document.getElementById('toggleButton').addEventListener('click', function() {
            var button = this;
            var content = document.getElementById('content');
            var isExpanded = button.getAttribute('aria-expanded') === 'true';

            // Toggle the state
            button.setAttribute('aria-expanded', !isExpanded);
            content.setAttribute('aria-expanded', !isExpanded);

            // Optionally change button text
            button.textContent = isExpanded ? 'Show More' : 'Show Less';
        });
    </script>
</body>
</html>

In this example:

The button has aria-expanded="false" initially, indicating that the content is collapsed.
The div element representing the expandable content also uses aria-expanded to indicate its current state.
When the button is clicked, the aria-expanded attribute of both the button and the content is toggled, and the visibility of the content is adjusted accordingly.

VoiceOver Interaction

When a VoiceOver user navigates to the button:

VoiceOver will announce the button’s label and its aria-expanded state (e.g., “Show More, collapsed”).
After clicking the button, VoiceOver will announce the new state (e.g., “Show Less, expanded”), providing clear feedback that the content has been revealed.

Sufficient Techniques and Failures

Techniques:

Using aria-expanded on a button to control the visibility of a panel or section.
Updating the aria-expanded attribute dynamically with JavaScript when the controlled content’s visibility changes.

Failures:

Not updating the aria-expanded attribute when the state of the content changes, leading to a mismatch between the visual state and the ARIA state.
Using aria-expanded on elements that do not control expandable content, causing confusion for assistive technology users.

Further Resources

For more information on ARIA and accessibility best practices, visit these resources:

W3C ARIA Authoring Practices - A comprehensive guide to implementing ARIA.
MDN Web Docs: ARIA: aria-expanded - Detailed documentation on the aria-expanded attribute.
WebAIM: Accessible Rich Internet Applications (ARIA) - A practical guide to ARIA techniques and considerations.

Feel free to ask any further questions about accessibility or specific ARIA attributes!

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue