Introduction to aria-expanded
In the realm of web accessibility, ARIA (Accessible Rich Internet Applications) attributes play a crucial role in making web content usable for people with disabilities. Among these, ‘aria-expanded’ is a key attribute, particularly when dealing with interactive elements that expand or collapse. This blog post will delve deep into ‘aria-expanded’, explaining its purpose, usage, and importance with practical examples.
What is aria-expanded?
The ‘aria-expanded’ attribute is used to indicate whether an element that controls the visibility of another element is currently expanded or collapsed. It’s primarily used for interactive components like menus, accordions, or any other UI element that toggles between showing and hiding content. The attribute can have one of two values:
- true: Indicates that the controlled content is currently visible (expanded).
- false: Indicates that the controlled content is currently hidden (collapsed).
It’s important to note that ‘aria-expanded’ is used on the element that controls the expansion/collapse, not on the content itself. For example, on a menu button, the attribute should be on the button, not the menu.
Why is aria-expanded Important?
For screen reader users, understanding the state of interactive elements is crucial. When an element expands or collapses, the visual change alone isn’t communicated to screen reader users without additional context. ‘aria-expanded’ provides that context, ensuring that they know whether a section is open or closed. This context is vital for effective navigation and usability.
Practical Examples of aria-expanded
Example 1: Accordion Menu
Consider an accordion menu where each section can be expanded or collapsed. Here’s how ‘aria-expanded’ would be used:
<button aria-expanded="false" aria-controls="section1">Section 1</button> <div id="section1" style="display:none"> Content of Section 1 </div> <button aria-expanded="true" aria-controls="section2">Section 2</button> <div id="section2"> Content of Section 2 </div>In this example, the buttons control the visibility of the associated divs. The initial value of aria-expanded shows if the content is initially visible or hidden. Note that the aria-controls is important to link both elements.
Example 2: Navigation Menu
Here’s a basic example of a navigation menu with a submenu:
<button aria-expanded="false" aria-controls="submenu">Menu</button> <ul id="submenu" style="display:none"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul>When the menu button is clicked, a JavaScript function should toggle the ‘aria-expanded’ attribute between true and false and show/hide the submenu accordingly. You can see that ‘aria-expanded’ always goes into the button that controls the content visibility.
JavaScript Integration
To make ‘aria-expanded’ dynamic, you’ll need to update it using JavaScript whenever the state changes. Here’s a simplified example of how you might do this:
const button = document.querySelector('button[aria-controls="submenu"]'); const submenu = document.getElementById('submenu'); button.addEventListener('click', () => { const isExpanded = button.getAttribute('aria-expanded') === 'true'; button.setAttribute('aria-expanded', !isExpanded); submenu.style.display = isExpanded ? 'none' : 'block'; });This script toggles the value of ‘aria-expanded’ and the visibility of the controlled content based on the current state. The use of aria-controls is also critical, because it is the way for the screen readers to understand the relationship between the elements.
Best Practices for aria-expanded
- Use on interactive elements that control the display of other content.
- Always pair it with aria-controls to indicate which element it affects.
- Keep the attribute’s value up-to-date using JavaScript when the element’s state changes.
- Ensure the functionality is keyboard accessible, because it also makes the site more accesible for disabled people.
Conclusion
‘aria-expanded’ is an indispensable ARIA attribute that significantly improves the accessibility of interactive components. By using it correctly and keeping its value synchronized with the state of your UI, you can ensure a much more accessible experience for all users, including those who rely on assistive technologies. Remember that accessibility is not just about compliance; it’s about creating a better web for everyone.