Up Your Product's Accessibility Game

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.‍

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.

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 colour 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 :(

‍Good! :)

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!

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.