Results from the Chrome Lighthouse Accessibility test, comparing the live site running the old version to the test site which has the updates installed.

Hi all, Jer the GV Tech Lead here with another update on development progress, this time about our long-term goal of getting the Global Voices site 100% accessible to all visitors. As a 20-year-old site, the GV theme has a lot of “tech debt” in this regard, little things to clean up carefully so we can meet modern standards. Today I'm updating the live sites with a set of changes that make a big dent in that tech debt!

Specifically, as you can see in the screenshot above, these changes get us to a nice milestone, a 100 score on the Chrome Lighthouse Accessibility test, which does an automated assessment of the site to look for common problems. Of course, this “perfect score” doesn't mean the site has perfect accessibility. Far from it, in fact, because the test is unable to identify many of the worst problems that users with keyboard navigation and speech-to-text browsers face. But still, it's great to have fixed a bunch of the problems it can identify, and be able to use this test quickly in the future to identify new problems that might pop up!

Updated color contrast, in particular on the Lingua languages menu

Comparison of the old and new languages menu background color, which do you prefer?

The first change you're likely to notice is the change to the teal color on the translations menu at the top of the site. It's a lot darker than it used to be, a change that ensures there's adequate contrast between the teal background and the white text. When foreground and background colors aren't different enough, many people struggle to read text, especially when it's small like the language links.

Personally I resisted this particular change while making similar updates in the past, because I didn't want to take anything away from the fun, lighthearted aesthetic that the bright teal brought to the GV header. That shade has been part of the “Lingua brand” for a long time, and I know a lot of us appreciate how unique it is. In the end, I pushed myself to get over this emotional hurdle because accessibility is a human right, and ensuring the site is useful for everyone has to come first. Either way, the more I look at the new version, the more it doesn't feel like a big deal. It's still a bright, 100% saturated color that few sites use the way we do, and it still has our amazing list of languages on it, which is inspiring no matter what color it's on!

In addition to the languages header banner, I also updated a bunch of other colors to be a little darker and higher contrast, like translation links on posts, and the color of normal blue links when you hover over them. At this point, pretty much all text should be high-contrast and passing the automated tests.

New languages pop-up dialog

One thing the accessibility test complained about was not just the background color of the languages menu, but the whole way it worked. The old design, which toggled open to reveal the rest of the languages that were hidden by default, was a total nightmare for keyboard and screen-reader users, because they had to tab one by one through every language whether they were actually looking for a language or not. The languages were also “out of order”, because we sort them by most-recently-updated in the visual display of the menu. Sorting by recency is a nice way to promote the sites with active volunteers, but looking for a specific site in that list is a horrible experience, whether you're using your eyes and a mouse, or text-to-speech with a keyboard.

The update I made was to convert this “recently updated” list to be purely decorative, and adding a whole new overlay menu that opens when you push the icon in the corner:

Left: What happened when you pushed the toggle button on the old design. Right: New design that opens a popup menu.

As you can see, the new popup menu is much easier to use when you want to find a specific language, and it matches the other similar popups we have for the main site “hamburger” menu and lists of categories and monthly archives, which we upgraded to be more accessible last year. The new tool standardizes how the site works, making it easier to use for everyone, while also making it infinitely more appropriate for users with special needs.

To test it out, head over to Global Voices English and use the icon to open the languages menu, then let me know if you find any problems!

Underline style on links

Before and after underlining all links in paragraphs to ensure they are visible to everyone.

Another stylistic decision that the automated testing complained about was the lack of contrast between our blue links and the surrounding paragraphs. While many people can see the difference between the blue and black text, many others can't distinguish between them and wouldn't be able to identify which text is clickable without hovering their mouse to see the cursor change.

The fix here is simple, and points back to the origins of the web: Underline all links. Once links are underlined, anyone who can read the text can tell they are clickable. Simple and timeless, underlined links might look a little “messy” sometimes, but they serve an important purpose.

Miscellaneous other changes

Those are the big ones you're likely to notice, but here are a few other tweaks I made to reach that 100 score:

• Update our use of Semantic HTML tags, specifically <main> and <footer>, so screen reader software can find it's footing more easily.
• Add aria-label values for form items that don't have a visible label, like on the comment <textarea>, so screen readers have an explicit description to read.
• Mark the links around some images (post featured images and user avatars) as aria-hidden so that they get skipped by screen readers when there's no alt text on the image and a better link that immediately follows (the post title or user name).
• Add invisible <h2> elements to the featured posts block to ensure the page has a coherent structure of <h1>, <h2>, <h3> etc. headings.
• Review styles to ensure we can use <h2> tags inside widgets when needed for the same reason as above.

Wow sounds like a lot, but in some ways it's all still just the beginning! There's still lots of work for me to do on the site to fix issues that the automated tests can't spot, and I'll keep striving to get all GV sites working smoothly for all our readers, no matter how they read us.

As always please get in touch if you notice anything not working like it should!