How to Disable aria-expanded

To "disable" aria-expanded effectively means communicating that a collapsible element is currently collapsed or hidden. This is achieved by either setting its value to false or, in certain contexts, by omitting the attribute entirely.

aria-expanded is an ARIA (Accessible Rich Internet Applications) attribute that informs assistive technologies, such as screen readers, whether a collapsible region, like a menu, accordion panel, or dropdown, is currently expanded (visible) or collapsed (hidden).

Methods to Indicate a Collapsed State

There are two primary ways to convey that an element controlled by aria-expanded is not expanded:

Set aria-expanded="false":
This is the most common and recommended method when the element that aria-expanded controls (e.g., a menu or a section) is hidden.
- When the associated content is not visible, the aria-expanded attribute on the controlling element should be set to "false". This explicitly tells assistive technologies that the item is currently collapsed.
- For instance, if you have a button that toggles a menu, when the menu is hidden, the button should have aria-expanded="false".
Example HTML:
```
<button aria-controls="myMenu" aria-expanded="false">Toggle Menu</button>
<div id="myMenu" hidden>
    
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>
```
Omit the aria-expanded attribute:
When the controlled content (like a menu) is hidden, aria-expanded can sometimes be omitted from the controlling element. However, if you choose to specify the attribute when the content is hidden, it must be set to aria-expanded="false".
- This method is generally less explicit than setting aria-expanded="false" but is technically valid when the content is hidden and the attribute is not specified at all.
- It implies a default collapsed state if the attribute is absent, but setting it explicitly to false provides clearer communication to assistive technologies.

Context for Parent/Child Menus

In scenarios with nested menus (e.g., a menu item that reveals a submenu), aria-expanded also plays a crucial role:

When a child menu is not visible, its parent menu item should still include the aria-expanded attribute, typically set to "false", to indicate that its submenu is currently hidden.
When that child menu becomes visible, the parent menu item's aria-expanded attribute should then be updated to "true".

Practical Implementation with JavaScript

Dynamically updating the aria-expanded attribute is crucial for accessibility when elements toggle their visibility.

HTML Setup:

<button id="menuButton" aria-controls="mainMenu" aria-expanded="false">
    Menu
</button>
<nav id="mainMenu" class="hidden">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<style>
    .hidden {
        display: none;
    }
</style>

JavaScript for Toggling:

document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menuButton');
    const mainMenu = document.getElementById('mainMenu');

    menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';

        // Toggle the visibility of the menu
        mainMenu.classList.toggle('hidden');

        // Update aria-expanded based on the new state
        menuButton.setAttribute('aria-expanded', !isExpanded);

        // Optionally, manage focus for accessibility
        if (!isExpanded) {
            mainMenu.focus(); // Focus on the menu when it opens
        }
    });
});

Why is `aria-expanded` Important?

Using aria-expanded correctly is vital for web accessibility:

Screen Reader Users: It provides essential information to users who cannot see the visual state of the interface. They hear "Menu, collapsed" or "Menu, expanded" and understand whether content is hidden or visible.
User Experience: It enhances the experience for all users by ensuring consistent and predictable behavior across different assistive technologies.
Compliance: Adhering to ARIA guidelines contributes to WCAG (Web Content Accessibility Guidelines) compliance.

`aria-expanded` States Summary

`aria-expanded` Value	Meaning (for Assistive Technology)	Visual State (Typical)
`true`	Element is currently expanded.	Visible
`false`	Element is currently collapsed.	Hidden
`undefined` (omitted)	Element's state is unknown or it doesn't control expansion. For a hidden menu, it can be omitted, but `false` is more explicit.	Hidden (often implies default)

Best Practices

Always Pair with aria-controls: Use aria-controls on the toggling element (e.g., button) to specify the ID of the element it controls. This creates a programmatic link for assistive technologies.
- Example: <button aria-controls="mySection" aria-expanded="false">Toggle Section</button>
Ensure Visual and ARIA State Match: The visual state (hidden/visible) of the content must always correspond to the value of aria-expanded. If the content is visually hidden, aria-expanded must be false.
Dynamic Updates: aria-expanded must be updated programmatically via JavaScript when the state changes.
Focus Management: When an element expands, consider moving focus appropriately, for example, to the first interactive element within the newly expanded section.

For more detailed information on ARIA attributes and their usage, consult resources like the W3C ARIA Authoring Practices Guide and MDN Web Docs on ARIA.