OpenAQ Provides Easy Access to Air Quality Data, But What About Easy Access to OpenAQ?
By Maria Jonasson, Medieinstitutet
Web accessibility is the idea that anyone should be able to use and access the web regardless of ability. When we create websites, we have to make special accommodations to ensure this equal access. Accessibility often goes unnoticed since it’s not visible to the naked eye when you look at a website, and it might be put on the backburner when developing a site, but for a user it could make a huge difference.
Something often mentioned when talking about web accessibility is the “curb cut effect.” It’s a phenomenon where changes made to ensure disability accessibility are used by a larger group, named after the mini ramps you find on sidewalks. Curb cuts got popular after World War II to accommodate disabled war veterans, but they were quickly embraced by lots of people–parents walking with strollers, the elderly, and bicyclists, to name a few. Today, they are seen as a natural part of the cityscape. Similarly, we get lots of added benefits from accessible websites.
An Audit of the OpenAQ Site
As an intern for OpenAQ through the Medieinstitutet in Stockholm, Sweden, I conducted an accessibility audit of the OpenAQ website. This was important to OpenAQ for a few reasons. The site recently migrated frameworks, which could impact accessibility, and there hadn’t been a general accessibility audit to ensure the site complies with accessible best practices.
The OpenAQ.org site is at the center of several sites, and describes the organization and its mission. It links to the API and its documentation, the AQI Hub, the Explorer web app, as well as the other different initiatives and projects that OpenAQ is a part of.
First, I reviewed the OpenAQ.org site using a few different tools: the A11y Project’s checklist (https://www.a11yproject.com/checklist/), the built-in accessibility tools in Firefox and Chrome, some test runs with a screen reader, and the Pa11y tool (https://pa11y.org/) to check for and highlight accessibility issues.
Pa11y found 619 errors, which are presented in the graph below. Because Pa11y is an automatic testing tool, it didn’t catch every issue on the site, but gives good insights nevertheless. The chart below shows the different categories of errors across the pages; we can see some issues that recur again and again.
Missing text content
The red areas consist mostly of links that are missing text content, particularly images that are links. Why is this an issue?
If you go to a website and see an icon of a social media company, you don’t need any text to understand the meaning. You know instinctively that this is probably an image that you can click to take you to the company’s social media page. A quick glance at the page and you already know what all of this means. So far, so good, right?
Now, imagine a user who is blind or has partial loss of vision. They can’t see the icon, so how would they know that it’s even there in the first place? They might use a screen reader to navigate the web by text-to-speech, and as the screen reader encounters the icon, it has no way of knowing what the image is supposed to represent. It could read the file name of the image (which may or may not give the user a clue of what all of this means), or read the whole URL of the link. The meaning of the icon, which a sighted user can decipher by a quick glance, suddenly becomes time-consuming and frustrating for someone with visual impairment to understand.
Images missing alt text
In a similar vein, the green areas of the graph warn us that there are several images that are missing an alt text. An alt text could be shown for several reasons: the image might not load properly because of a slow internet connection, or the image has stopped working for one reason or another. Alt text is also used to help screen readers describe the image for the user.
The graph indicates other recurring issues like missing form labels (which makes it easier to target the correct input fields and helps screen readers), and insufficient color contrast (which makes it harder for users with loss of vision to see).
Issues not shown
Missing from the graph are headings structure and keyboard navigation, which I also looked into. Proper headings structure is important since it helps screen reader users navigate the site quicker. As for keyboard navigation, users with mobility issues might have a hard time using a mouse or a laptop touchpad, and for this reason a website should be structured so users are able to navigate the page with a keyboard alone.
Results
After identifying these issues, I got to work fixing them. Some were easy fixes, like adding alt=”{title}” to an image element, and some were trickier–really, what is the best way to create clickable and accessible cards on a page?
Running Pa11y after the changes I made, and putting the data from all pages together as two bars to compare the before and after, we can see the progress in the chart below. Pa11y’s automatic review caught some false positives that didn’t show up in other accessibility tools such as Chrome Lighthouse, so I removed them to give a more realistic view of the state of the site.
Instead of the 619 errors Pa11y found at first, 194 issues remain. We eliminated all errors relating to missing form labels, images missing alt texts, missing html language and title, as well as empty headings.
141 of the remaining errors are related to insufficient color contrast, which would require changing the design system.
Web accessibility isn’t something you solve in a day or two, it’s an ongoing process that’s always changing because of new technology. I’m very happy to have improved accessibility on the OpenAQ site, and to describe what more could be done.
If you go to the OpenAQ.org website today, it won’t look that different. Very few of these changes are visible unless you read the code behind the page. But hopefully, these invisible changes have made OpenAQ’s mission to provide easy access to air quality data just a little easier and a little more accessible for everyone.
OpenAQ greatly appreciates Maria for her work to improve the accessibility of our website, and we highly recommend the Medieinstitutet’s “learning on the job” internship programme.
