Article
May 14, 2020

Up Your Product's Accessibility Game

An ed-tech case study introducing the 4 pillars of accessibility.

Accessibility is an integral component of product design that is still needing to be argued for. Product designers are problem-solving daily to create better business solutions, easier-to-use services, and enjoyable user experiences, and this should include designing for accessibility more often than it currently does. Not only is accessibility better for business, inclusive, and a benefit to everyone - it's the law and it's simply the right thing to do.

Our client, Echo360 - a video platform for education that combines video management with lecture capture and active learning - is ALL about web accessibility. This was one of the first times we had a client pushing for accessibility more than us, which was awesome.

The demographic we have been designing for is instructors and students at the higher and continuing education levels. How does this affect the design when considering web accessibility, especially when you consider that web usability affects all of us? Adrian Roselli gives thought-provoking examples of this in his talk, Selfish Accessibility. He points out that we have all experienced issues of usability:

- You temporarily "lose" a limb when eating at your desk
- You experience temporary colour blindness when using screens in the sun
- You need closed captioning when you can’t hear content (ie in a busy cafe)
- Keyboards become chaos if the operating system is in a foreign language

Oh, and importantly:

- Getting older affects everyone
- Accidents happen, where you could suddenly find yourself disabled physically/mentally (😳)

Now that we've considered the average Joe, let's focus on how design affects people with disabilities. The biggest areas of concern for web designers are vision, motor/dexterity, auditory, and cognitive disabilities.


Some areas of accessibility we affect as web designers

The requirement that technology is accessible to people with disabilities came into law as early as 1973 (in the States). Notably, a number of big name companies - such as Amazon, Rolex, and CNN - were hit with website accessibility lawsuits in 2018 as the US Department of Justice has failed to provide clear federal accessibility standards.

Accessibility in web design applies equally to educational technology. Although the education system can be slow to adopt new technology, technology is playing an increasingly important role in schools and lecture halls. This fact has become even more prevalent since the world has been rocked by the Coronavirus pandemic. As well, a growing number of learning activities occur, or have the option to occur, online - such as recorded lectures, quiz exercises, and submitting assignments. Digital accessibility is necessary to give all students, with disabilities or not, the opportunity to participate and excel in their classrooms.

Here are some quick stats around students with disabilities:

*Stats taken from studies done in the United States.

So What Does This Mean in Real Life (IRL)

We wanted to share some examples from working with Echo360 to talk about designing for accessibility in a real-life context, using the framework developed by WCAG2, aka the master of all that is accessible on the web. WCAG2 outlines:

"[There are] four principles that provide the foundation for Web accessibility: perceivable, operable, understandable, and robust."

1) Perceivable: "Information and user interface components must be presentable to users in ways they can perceive" 

Perceiving Clickability:

Although it is true that even the best design requires some decoding by the user, making sure users know what elements are interactive or not should take minimal effort to understand. They should look clickable from the get-go. This can be done via colour differentiation, underlining, and/or bordering (aka buttons). We made sure everything that was clickable looked undoubtedly clickable, and we worked through several iterations of buttons.

Perceiving Contrast:

When formatting the different information in a graph, it is important to differentiate information not only by colour, but by patterns and/or icon alerts as well, as people with color blindness may not be able to see a difference in information just based on colour. We use icon alerts and patterns to differentiate information in the first iteration. However, for the graphs, more patterns would have been needed to separate the information. Sometimes it's best to keep the data visualization simple, as was decided in this case.

Bad :(

You can see that when viewing this screen through the lens of someone with Achromatopsia, discriminating between colours becomes much more difficult.

Good! :)

PS: Download Stark to check if your colours have the right contrast.

It is very helpful.

2) Operable: "User interface components and navigation must be operable." 

Keyboard Accessibility

Keyboard accessibility means that all functionality of the interface must be reachable through a keyboard. The common convention is to use the tab key on your keyboard to navigate between elements on the screen. Every button and clickable component needs a tab focus state to indicate which element is active. To note, this is different from hover. People who are relying on their keyboards to use a computer might not be able to use a trackpad or a mouse at all. Therefore, as when using a touchscreen, there is no hover state.

This is where the tab focus state becomes essential for users to navigate their screens using only their keyboards, as it helps show the users where they are on the page. For this reason, it is also extremely important to outline a logical tab order. Just for fun, go check out one of your favourite sites and test if it is keyboard accessible. You may be surprised at how absent the tab focus state is!

Library page keyboard interactions, with tab functions ordered by number
Dropdown menu keyboard interactions

3) Understandable: "Information and the operation of user interface must be understandable." 

Error States:

When designing error states, it is important to make sure the user is aware of the error and understands what is wrong. We designed a triple threat, including a colour change, alert icon, and error description. This design was to account for users who are colourblind (alert icon, error description), users who are blind (error description), and users with cognitive disabilities who may not understand the meaning of just a visual cue (error description).

Labels:

You can see on the image below that each field has a description above it, with instruction inside the field. This is to give clarity and make sure users complete the task with as little confusion as possible.

4) Robust: "Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies."

When ensuring your product is "robust," status messages ought to be considered a key element. Although I do not have direct examples of this principle, a status message is necessary to communicate to the user the success, errors, waiting state, progress, or results of an action. WCAG2 uses the example of using search - a message that states "searching", "no results found", etc. as an example of a status message. The key to good status messages is not to change the user's context while making them aware of important changes in page content.

In Conclusion

It was so great working with a client who believes as strongly as we do about the importance of accessibility. Clickability and colour contrast, keyboard accessibility, and proper error and label states are just a few areas to keep in mind when designing for accessibility.

As a designer, you may feel that designing for accessibility is limiting to your creativity. And it can be - if that’s your chosen perspective. But it can also be looked at as a way of pushing yourself to be more creative and a better problem solver. And hey, accessible products/sites reach a larger audience and have better usability overall.

More Articles

How I Design Custom Icons

Read Article

Accessibility in Design

Read Article