menu-expand
Ensure that menus with submenus or dropdowns dynamically update the aria-expanded attribute to true when the menu is open and false when closed.
Rule Severity : Serious
Description
If a menu has a dropdown or submenu, authors should configure the aria-expanded attribute to true when the menu is open and false when closed. Assistive technologies can detect whether the menu is closed or open using the aria-expanded attribute and simplify the user experience of its users.
Example
In this example, the menu includes a submenu under “Services”, but it lacks the aria-expanded attribute to indicate if the menu is open or closed, violating the menu-expand rule.
In the following example, the submenu under “Services” has the aria-expanded attribute dynamically set as true or false depending on whether the submenu is open or closed. So, this example doesn’t break the menu-expand rule.
How to fix?
You can follow these steps to fix issues if this rule gets flagged:
- Check if your site has menus with submenus and dropdowns.
- If so, use the
aria-expandedattribute to indicate if the submenu is open or closed by dynamically modifying it totrueorfalse.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!