Improving Navigation Menus and Focus Indicators
3/28/2023 12:00:00 PM
Editor’s note: We are beginning a series of articles called WCAG 2.1 – Improving Digital Accessibility. This month, we hear from a digital accessibility coordinator about work done in Minnesota to improve the accessibility of state websites. These are works in progress. Subscribe to be sure you get each installment in this series! (The link is at the bottom of this page.)
Chad Miller, CPACC, Digital Access Coordinator for the Minnesota Council on Disability, shares information about ongoing work on their website. They have been working on two specific areas of their website – the navigation menu and the focus indicator.
Initially, we had a navigation sidebar containing links to the landing pages and a few subpages we wanted to feature.
The reflow (Understanding document for SC 1.4.10) needed to change. When the page was resized or used on a mobile device, the navigation menu would move to the bottom of the page. That didn’t meet user expectations for main navigation behavior.
Our developer and I researched various types of menus, with a focus on expected keyboard behavior. He was working with another disability organization at the time and was able to get additional feedback and direct user input. Eventually, we found a workable menu we could use with our content management system.
I started with a combination of WAVE, ANDI, and Accessibility Insights for Web for automated testing. Then manual testing guided by those results. I focused on keyboard interactions and going through the site with JAWS on the desktop. For mobile testing, the Accessibility Oz Mobile Site Accessibility Testing Methodology resources were very helpful.
We had a single solid blue focus indicator.
A staff member asked if we could add a dark mode to the site. Dark mode plus the new navigation menu led us to think about more background and foreground color combinations and the WCAG 2.1 Non-text Contrast requirements.
I spent a good deal of time on the Understanding SC 1.4.11 page and contacted other Digital Accessibility Coordinators. Thank you to David Miller (Minnesota IT Services partnering with the Department of Corrections) for some feedback and examples. We ended up using different indicator styles for different parts of the page, including a multicolored one.
I did much of the testing with the Colour Contrast Analyser and the contrast information in Chrome DevTools. I tested various combinations of the light and dark themes and the menu reflow points to account for potential background changes.
Don’t miss next month’s edition! Subscribe using the link below to make sure you get each installment in this series!
Would you like to learn more about the accessibility work being done by Minnesota IT Services and the State of Minnesota? Once a month we will bring you more tips, articles, and ways to learn more about digital accessibility.
Accessibility
Accessibility