How to Make Mega Menus Web-Accessible (Squarespace 7.1)
A mega menu has become a staple UX element in many modern websites for good reason: it displays large, copious amounts of user choices in a segmented, more digestible way. This optimizes the user’s ability to navigate your site, and find what they need, fast. However, there are a few extra things that need to be in place to make mega menus accessible for people with disabilities and to make sure websites are ADA-compliant.
Accessible mega menus should open on mouse-click or delayed mouse-hover, include proper ARIA and role attributes for screen readers, and use conventional keyboard triggers that make them easily accessible to people with disabilities.
In this article, I will explain all of the necessary attributes and keyboard functions of a completely web-accessible mega menu, and how you can easily add web-accessible mega menus in Squarespace 7.1 using the mega menu plugin available in my plugin shop.
Why accessible menus are important
You might be thinking, “What is the point of doing all of this extra work?" Despite what popular belief may say, web accessibility is not just a trendy word that was coined to make things harder on web designers and developers - it’s the act of ensuring websites and web tools are properly designed and coded so that people with disabilities can use them (defined by W3C). The consequences of not ensuring your navigation are web-accessible can involve both legal ramifications and inclusivity issues.
Legal Ramifications
Much like physical companies can get sued for not having accessible doors or ramps at their establishments, website owners and online businesses can get sued for not having accessible websites. In fact, in 2020, there were over 2,500 ADA Title III website accessibility lawsuits filed in federal courts (Seyfarth) which is an astonishing 189% increase from the 3 years prior in 2017. Even some of the most well-known corporate entities that we all know and love have been involved in accessibility lawsuits (Title III Lawsuits: 10 Big Companies Sued Over Website Accessibility).
Inclusivity Issues
When web designers and developers neglect to make their coding solutions web-accessible, people with disabilities often suffer the consequences. I’ll admit when I first learned what web accessibility was a few years into front-end web development, I was really frustrated by the fact that I had to go back over a lot of my previous work to make my coding solutions web-accessible, but I soon ditched that sentiment when I realized just how frustrating it can be to use a website you have different abilities that typical mouse interactions don't support. If you’re thinking people with disabilities are just a small percentage of the population, check out these statistics outlined by HubSpot (a popular CRM and web builder platform):
One billion people — approximately 15% of the world’s population — live with some form of disability. (World Health Organization, 2020)
72% of U.S. adults with a disability say they own a desktop or laptop computer, compared with 88% of those without a disability. (Pew Research Center, 2021)
75% of Americans with disabilities report using the internet on a daily basis. (Pew Research Center, 2021)
Could you imagine not being able to easily navigate a website in this age of technology just because of something you oftentimes can’t help? Me neither! We are not living in the dark ages anymore, so it is our responsibility to ensure people of all abilities have adequate access to the world, including the online world.
Important features of an accessible menu
1. Make mega menus appear on mouse click, or optimize the hover functionality
In general, menus that appear on mouse click - which I will refer to as click menus in this article - are more user-friendly because they suggest a clear, intentional action by the user paired with an unambiguous response by the interface.
Click menus also avoid an accessibility issue known as the Diagonal Problem, which is when the user’s mouse has to traverse specific tunnels to make sure the menu doesn’t close. The Diagonal Problem is often exacerbated with mega menus because mega menus take up much more space than normal dropdown menus, so the mouse has to move further to reach certain links.
In terms of keyboard accessibility, click menus give keyboard users more control over the interface by allowing them to decide which menu options they want to expand, instead of forcing them to navigate through every single dropdown menu item on the desktop.
Tips for making hover menus accessible
Although click menus tend to have a better user experience, here are a few tips to make hover menus more user-friendly and accessible:
Add a .35ms-.42ms delay for opening and closing the menu when the mouse hovers over a menu item.
This ensures the user actually intends on opening the menu because they have hovered over it for a short period of time, and if the user accidentally hovers off the menu when they are trying to access a link, they will not accidentally close the menu.
The Squarespace 7.1 mega menu plugin available in my store gives you the option to make your menus appear on click or on hover so that you can choose for yourself which functionality is best suited for your site visitors.
This mega menu with optimized hover delay is achievable with the Mega Menu Plugin for Squarespace 7.1.
2. Create accessible keyboard actions
When keyboard users navigate through a menu, there are a few conventional keyboard functions that they expect to have. Here are the four keyboard actions that a click mega menu should have:
Initially Pressing the Tab key navigates through the top-level menu items
This gives users the freedom to skip over dropdown menus they are not interested in.
Pressing the enter key opens the dropdown menu of the currently focused item or redirects to the currently focused link
This gives users the option to open dropdown menus they are interested in instead of them having to navigate through everyone using the “Tab” key, which is typically how accessible hover menus operate. If the currently focused item is a link, the user can redirect to that page.
Pressing the tab key when a menu is open will navigate through the dropdown menu options
This allows users to search through the currently open menu options. If they press the “Tab” key when the last menu item in the dropdown is focused, navigation will continue to the next top-level menu item.
Pressing the escape key will close the menu and return focus to the top-level menu
This gives users the option to exit a dropdown menu and return to the top-level menu options if they decide they no longer want to search through the rest of the menu options.
Holding down the Shift key while pressing the Tab key
This traverses the menu items backwards
| Key Pressed | Action |
|---|---|
| Tab (when no dropdowns are open) | Navigates top-level menu items |
| Enter | Opens the currently focused dropdown menu or redirects to the currently-focused link |
| Tab (when dropdown is open) | Navigates through dropdown menu options |
| Escape (Esc) | Closes the currently opened dropdown menu, and returns to top-level menu. |
3. Include appropriate ARIA attributes for screen readers
Accessible Rich Internet Applications (ARIA) is a set of HTML attributes that make web applications and websites accessible for people with disabilities. When aria attributes are present, screen readers typically used by people with sight impairments are able to convey to the user what an element represents, whether it can be interacted with, and what action the element will trigger when interacted with.
In the context of dropdown or flyout menus that can be opened on click, there are three aria attributes that need to be present in order for the menu to be accessible:
role="button"
This lets the keyboard user know that the menu item can be opened by selecting/clicking it
aria-controls
This corresponds to the menu that the corresponding parent item opens.
aria-expanded
This signifies to the user if the dropdown menu is currently expanded, or “open”. When the menu is closed, this should be set to false. When the menu is open, this should be set to “true.”
aria-haspopup="true"
This signifies to the user that the currently focused interactive element (the parent menu item) opens a menu when selected.
| ARIA Attribute | Meaning to Screen readers |
|---|---|
| role="button" | This lets the keyboard user know that the menu item can be opened by selecting/clicking it |
| aria-controls | Signifies which menu a parent item will open |
| aria-expanded | Signifies if the dropdown menu is currently expanded, or "open." |
| aria-haspopup="true" | Opens the currently focused menu dropdown |
