Ally, the accessible web assistant.

Using universal design and W3C/WCAG compliance

“When UX doesn't consider ALL users, shouldn't it be known as Some User Experience or SUX?” - Billy Gregory
Blog 1

Universal Design and A11y Research

Part 1

Blog 2

Problem Definition

Part 2

Blog 3

Design and Prototype

Part 3

Blog 4

Conclusion and Last Comments

Part 4

Universal Design and Accessibility Research

The objective

Do you know that 98.2% of the most popular websites don't achieve AA level of WCAG 2.1 compliance? This project aims to research and understand accessibility issues on the web, and design a solution to make the web a more accessible place for everyone.

Empathizing with people

Universal Design Principles

Aiming to create inclusive, equitable and accessible design, a group of product designers, architects and engineers established the 7 universal design principles in 1997.

The 7 Universal Design Principles.
Figure 1.0: The 7 Universal Design Principles.

Understanding about impairments

According to the NDA (National Disability Authority), around 13.5% of people have some kind of disability in Ireland. In the world the numbers are very similar, and that means that around 1 billion people have a type of disability.

1 in 7 title with an illustration on the background showing a park with disabled people
Figure 1.1: 1 in 7 title with an illustration on the background showing a park with people.

As mentioned by Cindy Li on a web accessibility talk:

"We’re all just temporarily abled."

If you don't already have an impairment, the chances are that at some point in your life you will develop some kind of disability. It could be something like moving to another country and being unable to speak the local language, or developing a visual, hearing or cognitive impairment. According to the NDA (National Disability Authority), about 60% of people will develop at least 1 disability by the age of 85, and that increases to 80% by the age of 93. Those are the most common types of disability according to the NDA:

Graph with common types of impairments. Most common to less common are: Other/Chronic, Physical, Learning/Memory, Psychological, Hearing, Intelectual, and Visual.
Figure 1.2: Graph showing the common types of impairment.

The state of web accessibility

WebAIM conducted a comprehensive research on a million websites which revealed that the average website had around 60 accessibility errors (barriers) which makes them an exclusionary experience for about 12% of the world's population.

WebAIM Website Screenshot
Figure 1.3: WebAIM Website Screenshot

The most common web accessibility failures

As demonstrated by Figure 1.4 below, the most common WCAG errors indicate a big problem for visually impaired users where low contrast and missing alt text are the two biggest issues.

Graph with most common WCAG errors. Most common to last common: Low contrast, missing alt text, empty links, missing labels, empty buttons, and missing document language.
Figure 1.4: Graph with most common WCAG errors

Using the web with a visual impairment

In order to understand how people with visually impairments use the web, I looked into accessibility tools, and according to WebAIM the most popular screen readers are:

Most used screen readers. NVDA as first and JAWS as second.
Figure 1.5: Most used screen readers

And the most common types of devices used by the visually impaired are:

Most used screen readers. NVDA as first and JAWS as second.
Figure 1.6: Most used devices

What are the most common uses for the web?

With or without a disability, people usually use the web for the same things. However, how people use the internet changes according to their age. According to AgeUK, the most common use cases for the web are:

Most used screen readers. NVDA as first and JAWS as second.
Figure 1.7: Most used devices

Problem Definition

Defining the users

During the research made previously, it became clear that the main accessibility problems on the web affect disproportionally visually impaired people. In order to help me create user focused solutions, I created two user personas that are different in age and type of visual disability.

User Personas

Image of a User Persona named Connor
Figure 1.8: User Persona - Connor.
Image of a User Persona named Sandra
Figure 1.9: User Persona - Sandra.

Empathy Maps

Image of an Empathy Map for Connor
Figure 2.0: Empathy Map - Connor.
Image of an Empathy Map for Sandra
Figure 2.1: Empathy Map - Sandra.

Storyboards

The storyboards below depict the current scenario with the pain points that our personas Connor and Sandra encounter when accessing the web.

Image of a Storyboard for Connor and his user journey
Figure 2.2: Storyboard (As-is) - Connor.
Image of a Storyboard for Sandra and his user journey
Figure 2.3: Storyboard (As-is) - Sandra.

Connor's Journey Map

To understand better how Connor uses the web, I have created a Journey Map with his current flow. In this case he wants to use the web to get more information about an Election.

Image depicting Connor's Journey Map through
Figure 2.4: Connor's Journey Map.

Defining the problem

People that have an impairment face accessibility barriers on the web because pages aren't built with them in mind.

Ideation and Prototype

Ideation

During the ideation phase I did some research on assistants and ways I could help people with impairments use the web. On the picture below you can see a mood board with some ideas.

Mood board and Visual Research

Mood board depicting digital assistants and web technology for disabilities
Figure 2.5: Mood board for Accessibility.

After researching ideas and ways to improve accessibility on the web, I decided to create a web assistant that would bring help make the web more universal.

Wireframes

First Draft of the Wireframes
Figure 2.6: First Draft of the Wireframes (Onboarding and Main).
First Draft of the Wireframes
Figure 2.7: First Draft of the Wireframes (News Page)
Digital Wireframes
Figure 2.8: Wireframes/Ideas on Digital

Design System

The design system and style chosen for this project is the Carbon Design System by IBM. Carbon is system based on 5 principles: Openess, Inclusiveness, Modularity, User First, and Consistency.

Carbon Design System by IBM
Figure 2.9: Carbon Design System by IBM.
Avatar image of Ally, the web assistant

Designing Ally

Ally is the name I have chosen for the web assistant bot. It derives from the numeronym "A11y" which means accessibility (there are 11 letters from A to y). The type of avatar I chose was an astronaut because in space everyone is equally impaired: it's hard to move, there is no sound and almost everything you see is dark.

User Interface Design

Design iterations

Design iterations
Figure 3.0: Design iterations.

Final design

User Interface Design
Figure 3.1: User Interface Design.
Conversational Design
Figure 3.2: Conversational Design with Ally.
Skip to Content
Figure 3.3: Skip to content and focus.
Accessibility Tools
Figure 3.4: Tools available for better accessibility and suggestions.
Artificial Intelligence Alt text generator and Web Scraper
Figure 3.5: Artificial Intelligence Alt text generator and Web Scraper.

Conclusion and Last Comments

Solving the user's problem

Design Details

Ally is a web assistant that transforms non-accessible information into accessible information using web scraping technology. Users will be able to interact with the assistant through a chat interface and get things done on the web without having to worry about lack of accessibility. Ally was designed based on universal design principles and is compliant with WCAG and W3C guidelines.

The prototype created for Ally contains session storage to remember your name and data, responsive support, flexibility in navigation (keyboard support), and compliance with the WCAG 2.1 guidelines.

Prototype Features

Tab key illutration

Tab Navigation

The whole prototype can be navigated with keyboard only without using any functionality.

Reduced motion illutration

Reduced Motion

Compatible with reduced motion mode (iOS) blocking animations to prevent motion sickness.

Accessibility settings illustration

Accessibility Settings

Adjust accessibility according to your needs.

ARIA text illutration

ARIA Labels

Usage of accessibility friendly HTML for screen readers.

Laptop icon illutration

Responsive Design

Design compatible with desktop and mobile devices.

PWA text illustration

Progressive Web App

Save it to your home screen to use it like a native app.

AI Computer Vision illustration

Artificial Intelligence

As a technology to help create a more accessible web, I have implemented Microsoft Azure's Computer Vision API to try to identify image titles for when the alt text is missing from an image. See it in action on the GIF below:

AI Generating an image title
Figure 3.2: AI generating a title for a random image.

Accessibility Testing

Audit by Chrome Lighthouse

Ally was tested by the Chrome Lighthouse Audit and got the maximum score of 100 points for accessibility. It passed all the contrast, ARIA, font-size and html tests.

100 score on accessibility audit
Figure 3.2: 100 score on accessibility audit.

Empathy Tests

The visual tests were used to simulate a user with different types of visual impairments. To make those simulations I have used the Chrome app called "No Coffee".

App interface being tested with different vision impairment filters
Figure 3.2: App interface being tested with different vision impairments.

Throughout the testing, even in more severe visual impairments, it is still possible to distinguish the main page elements like the title, subtitle and content. The colour contrast throughout the app is compliant with the latest WCAG 2.1 rules.

Colour Deficiency Tests

App being tested with different types of colour-blindness.
Figure 3.2: App being tested with different types of colour-blindness.

Conclusion

I believe the prototype created represented a good solution to the user's problem and it brings a central solution to accessibility issues on the web. One point that is still needed for testing this product is the screen reader test with JAWZ and NVDA.

Future Work

For future work I would like to explore different user journeys and test the prototype with real users. I would also like to conduct user interviews and gather more qualitative data to understand the different goals users have when using the web.

This project focused on visual impairments which are the ones that impact web usage the most, but I'm also interested in how could we use technology to make the web a more inclusive place for people with other types of impairment like hearing or cognitive. For advancing the product, the missing features for an MVP would be voice controls, the accessibility menu and configuring the web scraping functionality.

Ally saying thank you!

References

Research
Design
Development
Testing