Building accessible menus for Indivisible.org

When the team at Indivisible decided to prioritize accessibility for their primary navigation late last year, I was excited to help them make it happen. Accessibility on the web has enjoyed increasing attention in the last few years, thanks to a widening recognition that users navigate and consume web content differently depending on what works best for them.

The process began with an accessibility audit performed by Michaela Blackham, our resident Accessibility and QA specialist. Michaela manually tested Indivisible.org for keyboard navigability — whether content and links can be accessed via the keyboard — which is a key indicator of how effectively other tools like screen readers will perform.

Michaela also used discovery tools like WAVE (Web Accessibility Evaluation Tool) to further clarify opportunities for improvement. WAVE helps to clearly itemize shortcomings in the hierarchical structure of HTML elements, as well as missing or incorrect attributes in various markup tags that facilitate a browser’s native accessibility tools.

With Michaela’s accessibility audit in hand, I was able to get to work addressing a few aspects of the top priorities we identified — mostly dealing with Indivisible’s primary navigation. Here’s what I focused on:

• Color contrast. Some of the color schemes that Indivisible.org was using were a little low on contrast. Red text on a blue background, for example, while absolutely in line with the look and feel of the site, can be difficult to read for some. Re-thinking those color schemes — like by moving to white on blue for the In the News page primary callouts — established a sharp and clear look without compromising the design. Other small changes like swapping out hero image background colors from white to black ensured the readability of white text in the foreground, even for users who opt not to load the images or load them more slowly due to poor internet connections.
• Alternate text for images. Indivisible.org is a grassroots organization with a huge focus on activism at scale. Their website places a lot of emphasis on group imagery and features photos of large groups of people on regular pages, in navigational callouts, and even in the primary menu. Knowing when, whether, and how to add alternate text for images was key to pulling off a seamless experience for site visitors using screen readers. While photos in content need descriptive alternative text, images in menu items, used as icons, or implemented as design elements needed to be ignored to avoid a halting screen reader experience in which the browser reads out “image” over and over.
• Keyboard navigation. The ability to cruise through a website’s structure and links with a keyboard (often using Tab for forward, Shift+Tab for backward, Space and Enter to expand and click) is a critical feature for users who make limited use of a mouse or trackpad, as well as a general indicator of “accessibility health.” Especially in the case of Indivisible’s roll-over menus, measures needed to be taken for keyboard focused users. Implementing custom, JavaScript driven keyboard navigation did the trick. Keyboard navigation for Indivisible.org now includes forward, backward, expand and collapse navigation, as well as dropdown buttons visible only to those using the keyboard to browse menus.

There’s more to do for Indivisible, but I’m thrilled we were able to take the first big steps. Ensuring a website is accessible to all requires an ongoing application of accessibility concepts and technologies, but major hurdles can often be cleared with relatively low effort. In the case of Indivisible, for example, identifying and addressing principal accessibility opportunities — from audit through implementation — only took a couple of days.

Accessibility issues with web content probably affect more people than you think. In 2019 I lost a portion of my vision to a condition known as ocular neuritis. I found out the hard way that lots of websites aren’t accessible. I had to adapt and started relying on new accessibility tools I’d never used before, many of which weren’t even properly implemented on a majority of websites. As you can probably imagine, I spend a lot of time in front of a computer. It was incredibly terrifying and frustrating to feel suddenly excluded from so many digital spaces I wanted — and needed — access to. Today my vision has mostly recovered, but nearly nine months of vision loss left me with a new appreciation for accessibility on the web and elsewhere.

About one in four adults in the United States live with some kind of disability. That translates into a pretty massive opportunity for inclusion on the web. And considering taking the first steps towards a more accessible website can be pretty painless, today is as good a day as any to get started.

Interested in learning more? Check out WebAIM for excellent web accessibility material, install their Chrome extension to begin to see how your website stacks up, or get in touch with us to learn more about making your website accessible to the widest audience possible.