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.