Creating our first accessible web interactive experience for people with disabilities

Over one billion people experience some form of disability globally. So when we talk about making things accessible, it’s usually in relation to the physical world, like public spaces, transport and homes. But how do the visually and hearing impaired navigate the web? The internet, which is a basic human right according to the United Nations, has become an indispensable part of our lives when communicating with others, obtaining information, and working. Yet, almost 97% of the top one million home pages detected Web Content Accessibility Guidelines (WCAG) failures, according to the US-based non-profit organization WebAIM.

Web accessibility also referred to as “a11y,” means that “websites, tools, and technologies are designed and developed so that people with disabilities can use them,” according to the Web Accessibility Initiative (W3C). That being said, different countries follow specific guidelines based on their local regulations. These are meant to establish a set of technical and design-related rules that, if followed correctly, ensure that a website can be accessed by users with a wide range of disabilities, such as visual, auditory, motor and cognitive, as well as those affected by situational circumstances (in case an individual is temporarily unable to use the mouse, or has a poor internet connection, for instance). Currently, due to the highly inaccessible web, many people with disabilities are unable to consume digital media. They end up being excluded from public discussions, and cannot receive crucial information. This becomes an even more pressing issue when our interactions and life, in general, go virtual during pandemics, conflicts, and natural disasters.

“If we’re not mindful of [web accessibility guidelines], we will end up creating a more digital world with even less accessibility for people with disabilities. And we’re facing this in our everyday lives,” says Nidhi Goyal, a 36-year-old blind disability and gender rights activist, and a comedian from Mumbai, India. She is one of the three women with disabilities we featured in our latest project, Inaccessible Cities — a web interactive experience that is fully accessible to people with disabilities. It is one of the first digital news interactives to do so.

For our small AJ Contrast team, this was our first time working on a fully accessible online project. While incredibly rewarding, it is a task that’s time-consuming, expensive, and requires specialized technical skills. We followed the 2.1 AA level of the Web Content Accessibility Guidelines (WCAG), which comprises the American set of rules since our team operates in the US. But what are some of the elements of an accessible web interactive multimedia experience? And what do terms such as “alternative text” and “audio description” even mean?

#1: Creating accessible multimedia content

We spent several months working on Inaccessible Cities and told the stories of Rebecca Lamorte, Nidhi Goyal, and Olajumoke Olajide using a variety of media such as images, audio excerpts, video, GIFs, infographics, and more. The usage of multimedia content can pose an accessibility challenge since it requires alternative versions like audio descriptions for videos and alternative text descriptions for still images among other things.

It is not just a matter of describing the image of a woman in a wheelchair, for instance. In order to give blind users a deeper understanding of the context in which the story takes place, it is important to mention in the image description that “Olajumoke sits in her wheelchair in the middle of a poorly maintained street in Lagos with her back to the camera. The street is crowded with vendors, vehicles, and goats.”

Image Description: Olajumoke sits in her wheelchair in the middle of a poorly maintained street in Lagos with her back to the camera. The street is crowded with vendors, vehicles, and goats.

We worked with US-based SeeWriteHear in order to create accessibility assets that were compliant with the web content accessibility guidelines. Below are the different types of assets they assisted us with:

• Transcripts (for audio and video): Text for every video and audio snippet, including dialogue or voice-over, as well as descriptions of visuals and important sounds.

• Closed Captions (for video): Subtitles that display the dialogue along with relevant sounds.

• Audio description (for video): Recorded audio descriptions of the visuals in the footage. The descriptions include important information about the character and surroundings that are visible. When working to create the audio descriptions, we had to make adjustments to earlier versions of the edited videos to make sure there was enough room for verbal descriptions needed for users to fully understand the story.

• Alternative Text (for content like photos, infographics, GIFs, games etc.): Written descriptions for each non-text element of Inaccessible Cities. The descriptions should be factual and should convey information that helps users fully understand the stories. These descriptions are integrated into the web page’s HTML code, which is not visible to those who are not using assistive technology. The alternative text (or alt-text) is read aloud by a text-to-speech synthesizer.

#2: Making the navigation, structure, and design accessible

An important lesson we learned is to be mindful of our narrative language. Always use an intuitive story structure with clear instructions so that users can easily navigate the experience.

Visual descriptions should be consistent and design elements such as buttons and color schemes should follow the best practices since pre-production.

Overall, working on this piece was a learning curve for the AJ Contrast team due to the extensive list of accessibility requirements, and the jargon we had to familiarize ourselves with. But first and foremost, we focused on the most essential elements of navigation, structure, and design:

• Content Heading: Each new section of the experience should have a clear title to help users identify the content without straining their vision.

• Keyboard Navigation: Users should be able to navigate the website using the keyboard only. The tabbing order (hitting the “Tab” key to jump through the links/clickable options on the page) should be thought through thoroughly so that interactive elements are activated in a logical order, from left to right, top to bottom.

• “Go to main content” link: We added a “go to main content” link to the top of the page that lets users tab to an anchor link at the start of the main content of each page. This means that the “skip” link allows users to easily bypass content that is present at the top, such as the navigation menu options.

• Labeling buttons: Buttons should be as descriptive and concise as possible, giving users enough information about what the action of clicking on that element entails.

• Contrasting colors: Color of the text boxes and other website elements should have a strong contrast to the background images and tones in order to ensure easier readability and to provide a good user experience.

It is important to mention that the use of widgets, such as extensions that promise to make websites accessible to all, has been proven to be ineffective. So we worked with our developers to code the experience in a way that includes all the above-mentioned elements and more, for the best possible experience for most users.

#3: Integrating creative visual storytelling into an accessible format

How do we make sure that adding accessibility doesn’t take away from our creative storytelling? It is important to understand that the story comes first and good accessible design enhances the user experience for non-disabled users too. That is why it is important to design the structure, navigation, and interactions by taking into account marginalized audiences from the start. Make sure the experience is intuitive for people with disabilities as much as for an able-bodied person.

We worked with AKUFEN, a Canadian web design and development company, for the implementation of the accessibility features and development of the website. They advised us on the general design and structural adjustments needed to make our web experience fully accessible and more user-friendly.

Additionally, it is always helpful to have conversations with experts to understand the many different aspects that need to be included to make a website ADA compliant. So a large part of creating image descriptions, for instance, should be considered as an important part of storytelling.

#4: Reviewing and quality control

Once we completed the initial development of the website, it was time to review the project thoroughly not only from an accessibility compliance point of view but also from a user experience standpoint. The WCAG list is extensive, so it was crucial to have the AKUFEN team responsible for cross-checking every single point included in the requirements.

Additionally, we should be mindful that users with disabilities who will access the website have a wide variety of disabilities or impairments. So while quality checking the project, we not only focused on the visually impaired as those who will be needing assistive technology to navigate the web experience but we also took into consideration people with intellectual, motor, or sensory disabilities who would be interacting with it. As an example, we discussed if it would make sense to auto play audio descriptions, as the visually impaired might not immediately find where to toggle such an option in the video settings. However, having too much sound could disorient users that have sound sensitivity.

In terms of testing the project, we used several online tools that help us check if the page was compliant. Google Chrome extensions such as WAVE Evaluation Tool and axe DevTools are quite convenient — they scan the page or specific parts of it and detail what requirements the site is not meeting. Other online tools such as WebAIM Contrast Checker and Color Palette Contrast Checker, for example, helped us double-check if some design elements were properly created. We also reached out to several people with disabilities, including Kelechuwu Ogu, a blind journalist based in Lagos who we collaborated with to review the page and provide feedback.

Nidhi Goyal holds her phone inside a cab, and a screen reader reads the Google Maps directions.

Our big takeaways after working on this project are:

1. Web accessibility should not be treated as an overlay or afterthought.

2. Web accessibility guidelines and inclusive design should be prioritized from day one of creating a new website.

3. Don’t underestimate the time and resources needed to accomplish such a project.

4. Budget enough time and money for the testing phase because it’s crucial to gather feedback for an optimal user experience.

Even though this project took more time and resources than we initially anticipated, we are committed to ensuring all our future projects are accessible and inclusive of millions of people with permanent or temporary disabilities. By creating an accessible web interactive project, we aim to spearhead discussions about online media accessibility and set the standard for digital news content that’s fully inclusive of people with disabilities⁠ — a significant part of our audience currently shut out from digital media inclusion.