Navigation menus are key to the core functionality of almost all modern websites. Usually expandable from a button in the top left or right corner of the page, these menus can house direct links to the homepage, options for account management and customer service, shopping category links on e-commerce sites, and other essential features.
I interact with navigation menus frequently during my daily internet use. In this post, I discuss some of the most common accessibility challenges that screen reader users face when interacting with menus on desktop websites.
Button Labels
Navigation menus are almost always denoted by an icon-based button placed in the top navigation bar. For example, a graphic of three horizontal lines may indicate the presence of a menu to sighted users.
I have found that these graphic-based buttons often lack corresponding code-based text labels. As a result, screen readers may not recognize the button at all, or they may speak it as something meaningless, such as “Icon” or “Button, Image.” The effect is that screen reader users cannot locate or open the navigation menu.
Many modern designs use the same icon button to both open and close the navigation menu. The button visually slides to make room for the enclosed options once the menu opens. I have recently encountered a strange issue where the button, correctly labeled for menu opening on the homepage, is missing the appropriate label to signify a “Close Menu” action once the menu is expanded. When this happens, I can open the menu without any problem, but I cannot dismiss it without taking action on one of the enclosed options.
Expandable Menu Sections
Many modern navigation menus contain entries that expand to reveal more options when activated. These interfaces are often problematic for users of screen readers.
Sometimes the new options that appear after a category is activated are not recognized by the screen reader at all. In other cases, there is no verbal feedback that indicates that a menu entry is expandable. Without that, I will not know there are hidden options as I move through the list.
I am then forced to activate each item and hope I am told if additional content appears below the current focus point. In other instances, screen reader focus becomes erratic when more than one category is expanded. Focus jumps to random points in the list without verbal feedback, making it impossible to navigate the options in order.
Focus Bleed-Through
Another accessibility flaw I frequently experience with navigation menus is a sort of focus bleed through between the menu options and the content on the main page. As I navigate from top to bottom, I hear a combination of content from both the navigation menu and the page I was browsing before opening the menu.
This creates several problems. If I activate an item that is actually part of the main site, thinking it is a menu option, the menu closes, and I have to reopen it to return to my previous spot. Since many navigation options are condensed versions of content on the main page, I also hear duplicates as I move through the menu. It can take twice as long to explore a menu as it would if the accessibility were where it should be.
Why Navigation Menu Accessibility Matters
Navigation menus are ubiquitous on the web and are essential for practical internet usage. Accessibility must be a top priority when considering navigation menus as part of any improvement campaign. Maximum digital inclusion depends on it.
