The main menu is usually the cornerstone of every website. It is often the key to accessing every page on the site. The markup varies vastly across platforms and themes due to the varying functional and design requirements. There are many considerations towards developing accessible navigation menus which should be key to website developers, designers and maintainers.
Navigation menus range at the simplest to a single level of hierarchy. A moderate level of complexity may include more than one level of hierarchy. And at the most difficult range are mega-dropdowns of varying complexity that surface deeply nested pages.
Further complicating things, websites tend to want to present minimal, vertical layouts for menus on mobile devices, versus full-featured horizontal layouts for desktop menus. This is sometimes implemented within the same markup using @media rules to change the presentation layer for different devices. Alternatively, the menus can differ so drastically that entirely different markup is used to present the menus at different viewports.
Some of the accessibility issues found in many implementations include:
Not Keyboard Accessible
Success Criterion 2.1.1 Keyboard
All functionality of the content is required to be operable through a keyboard interface. This means that you should be able to use Tab or Shift+Tab as well as the arrow keys to navigate the website.
This is even more critically important for the navigation menu where inability to access a particular subpage may lead to a frustrating experience for many users. Implementations that rely purely on hover behaviour without accounting for keyboard focus are common cause of the inability to operate the navigation by keyboard.
Ensure that parent elements which do not correspond to an actual page allow for keyboard focus that allows for access to all subpages.
Content or Functionality Lost at Small Viewports
Success Criterion 1.4.10 Reflow
This is another source of frustration when mobile devices are used and the developer has not accounted for small enough viewports. This means both vertical and horizontal dimensions. Vertical scrolling content should work at a width of at least 320px and horizontal scrolling content should work at a height equivalent to 256px.
No Visual Indicator when Focused
Success Criterion 2.4.7 Focus Visible
Native elements tend to have a focus outline by default. Focus outlines can go missing when developers use poor markup such as non-standard elements with a Javascript-based click action. Alternatively it may be explicitly prevented by designers for aesthetic reasons, without providing for an alternative focus indicator.
Without a focus indicator, keyboard users cannot tell which element is currently in focus.
This means that users may not know when or how to engage with desired elements.
Custom focus indicators should have a contrast ratio of at least 3:1 against the background.
No Navigation Landmark Used
<nav> landmarks provide a way to identify groups of links that are used for website or page content navigation.
Poor Contrast
Success Criterion 1.4.3 Contrast (Minimum)
Navigation menus can tend to be sticky hovering over different background colours. Ensure that in this case, either the navigation menu has its own solid background that is contrastful, or ensure that the content that it overlays always meets the minimum contrast requirements. You can use one of the following ACHECKS contrast checkers to ensure that your colours meet the requirements:
Conclusion
These cover some of the typical issues that should be considered when developing accessible navigation menus. It’s not an exhaustive list and typically all of the other web accessibility considerations should be applied when developing navigation menus intentionally towards accessibility. Be wary of using plugins or themes where accessibility is not an explicitly stated consideration of the developers.
If your organization needs support in developing its website accessibly, our experienced designers and web developers can help you, or provide training and accessibility auditing/reporting services for existing websites. Connect with us to set up a quick call and discuss your requirements.