Navigation Menu Accessibility and Why that is Important

Laura Dahl, PhD, UX Researcher
August 18, 2021

Person sitting at a computer and typing — Photo by Christin Hume on Unsplash

I recently made updates to the navigation menu on the UDRC website. The navigation menu is the horizontal list of links at the top of every page on our website. These links are meant to help you get around the site and help you understand the overall structure. Based on usability tests earlier this year, we updated the navigation structure to help you better understand how to get around and what to find on the site.

Although you cannot see the changes with a standard browser, for those using a keyboard or screen reader to use the navigation, the usability and accessibility have improved. Because the navigation bar is a critical part of the website, users exit the site early if it is confusing and inaccessible. Accessibility means several things for our navigation bar, and I have addressed general accessibility principles in another blog post (https://udrc.utah.gov/news/2021/ux/20210413Accessibility.html)

Accessibility for a navigation bar means that it needs to accommodate for several types of computer inputs:

Computer mouse users: Users with fine motor control difficulties need larger targets to click.
Touch screen users: Users on a phone, tablet, or computer with a touch screen also need larger targets to accommodate for big or shaky fingers.
Screen reader and keyboard users: Users unable to use a mouse or finger input depend on a keyboard to get around a website.

Users can interact with the main elements in the navigation bar and links on the pages through the tab key when accessing the navigation bar with a keyboard or screen reader. I have programmed it on the navigation bar so that when using a keyboard, you do not have to tab through every option in the dropdowns (until you want to); just keep tabbing through the linked elements on the navigation bar and on the page.

Published Research link selected on navigation — Figure 1: Published Research link selected while using the Tab key

To go backward through the tab options, hold down Shift-Tab keys.

About Us link selected on navigation bar — Figure 2: About Us link selected after using Shift-Tab key combination

To open a dropdown menu on the navigation bar, use either the Enter or Down Arrow key on your keyboard. In addition, you can use the tab key or the Up and Down Arrow keys to select the specific link you want.

About Us dropdown menu on navigation bar — Figure 3: About Us dropdown menu selected after using the Enter key

Once you have moved the selection to the link that you want, hit the Enter key. The browser will load the new page.

Updating the navigation bars to be more accessible to keyboard and screen readers is just the latest update to our website. Additionally, we are planning more usability, accessibility, and security enhancements. For example, in addition to the other exciting technology updates at UDRC, we will be updating the server technology for our website. This update will be happening in the next few weeks. As a result, you might see some hiccups with the site here and there but be assured that we are working hard to make sure the website stays up and available for you.