In my role as lead developer and web designer for Global Voices I'm always trying to make the site look good and work well for all our readers, which involves keeping web accessibility in mind. Read on to learn more about the latest change that improves accessibility for our visitors.

You can see the new design in the header of this site! Click the “hamburger” menu icon in the top right to experience how the new menu works.

From many small menus to one big one

The old header with the “About Us” menu opened.

On desktop, the old site header had a complicated layout. Besides the GV logo, there were the social subscribe icons, a “Newsletter” button that opened a menu, an “About Us” button that opened another menu, and the search form. On mobile, in contrast, there was just the logo and a “Menu” button which led to one big messy menu with everything in it.

Those old menus looked ok, but they didn't work well. On mobile they were finnicky, and for those using screen readers, they didn't work well at all, so we're replacing the code behind them entirely.

Fixing color contrast: No more pale grey!

On top of the issues the old menus caused for screen readers, the old design also relied on shades of pale grey that violated the accessibility rules around color contrast. These rules state that text has to be sufficiently darker or lighter than it's background, so that people with relevant visual challenges can still read them easily.

We've been fixing color contrast issues across the site for a while now, and the complicated old header design was one of the last examples of us breaking the rules. The new design ensures that all text is easy to read for everyone, while still looking good because there are less things overall to clutter up the space.

The new layout: Simple and accessible

The new header design, with only the “hamburger” menu icon and list of categories.

The new menus use an open source library that promises to make them much more reliable for people with disabilities, and in the process it also makes them work better for everyone else!

When you click the “hamburger icon” button –the three lines that universally represent a menu on the web these days– it opens a full-screen “popup” that offers all the information at once, and can be closed with the “x” close button, or by pushing the escape key on your keyboard. The fact that it's a full-screen “takeover” ensures that the menu works consistently for everyone no matter how they're visiting the site.

The new menu when it's opened.

The new mobile layout works and looks similar to the desktop version.

As you can see above, we've also re-organized the menu contents to have the most important things (social icons and search) first, which should make it easier to find what you need, especially on mobile.

Now that the header is updated, I'll be going through other parts of the sites with “pop up menus” and making them work the same way, improving the accessibility of GV one little piece at a time.

What do you think? Is it an improvement? Can you find any bugs or things that don't work how they should? Please get in touch with me in the comments here, or over the GV Slack, if you have suggestions!