skip to content
Primary navigation
Keyboard

News

WCAG 2.1 – Improving Digital Accessibility

Improving Navigation Menus and Focus Indicators

3/28/2023 12:00:00 PM

Hand holding a smartphone. Onscreen: Minnesota Council on Disability webpage, displaying menu navigation.

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.)

Minnesota Council on Disability

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.

Navigation Menu

What did you have before? 

Initially, we had a navigation sidebar containing links to the landing pages and a few subpages we wanted to feature.

Why did it need to change to meet WCAG 2.1?

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.

What steps did you follow to make the change?

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.

How did you test to validate that it now met 2.1?

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.

Focus Indicator

What did you have before? 

We had a single solid blue focus indicator.

Why did it need to change to meet WCAG 2.1?

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.

What steps did you follow to make the change?

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.

How did you test to validate that it now met 2.1?

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!


Subscribe to our Newsletter

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.

Subscribe Today

Accessibility

Accessibility

back to top