Creating a more inclusive world: How to test products for accessibility and usability

“We’ve tested for usability — now we need to look at accessibility.”

If you work in user research, you’ve probably heard statements like this. Researchers often go about testing for usability and accessibility as if they were separate things. We typically use one kind of framework to understand accessibility issues and another to understand usability issues. But in my work as a researcher and accessibility advocate, I’ve noticed that common accessibility traps map directly to well-known usability tenets and traps (opens in new tab).

We need to start considering accessibility more often in the product cycle, not just as an additional check at the end, and integrating our frameworks is a good place to start. Here are three examples of how accessibility traps map to usability traps—referencing the World Wide Web Consortium’s accessibility guidelines and experts Steve Herbst (opens in new tab) and Michael Medlock’s work on usability—with tips for more usable alternatives.

1. Using color alone creates invisible elements

One of the accessibility traps that I encounter is use of color alone (opens in new tab) to convey information. This trap can affect many people, including over 246 million Americans whose visual impairments affect their perception of light and color.

In this graphic, we see two examples of a question asking the user to identify which of four colored triangles is the right-angled triangle: green, blue, red, or yellow. These four colored triangles are shown beside the question. On the left, users must rely on color alone to answer the question, which may be difficult for some. The example on the right again shows the four colored triangles. However, each of these triangles is also labeled with a number inside the triangle and next to each of the answer choices, so people can use color or labels to identify the right-angled triangle.

When you rely on color alone, you fall into a usability trap of invisible elements for many people. According to Herbst and Medlock, an element is considered invisible if “no cue (label, icon, affordance, or prompt) is provided to signal to the user how to achieve a goal, and the user has insufficient prior learning to overcome its absence.”

To avoid this usability trap, make sure that all information conveyed by color is also conveyed through an alternate visual means like text labels.

2. Moving content creates distractions

Another accessibility trap concerns content that moves (opens in new tab). Moving content can be distracting to many people, including the nearly 15 million Americans with attention deficit disorders.

Designers include animations for many valid reasons: to grab the audience’s attention, make the experience fun, demonstrate capabilities of the interface, etc. However, if this content continues to move, someone with an attention deficit disorder may have difficulty attending to and reading other content on the page.

While the harmful effects may be more pronounced in people with disabilities such as ADHD, distraction is a usability trap that can affect many. Inserting distracting elements violates the design tenet of creating an understandable interface.

To make content more usable, ensure that you provide a way to stop or turn off any moving content that starts automatically, lasts longer than five seconds, and is presented alongside other content.

3. Inefficient keyboard access creates unnecessary steps

A third accessibility trap concerns an interface that’s difficult to access with a keyboard alone (opens in new tab). Many users rely on their keyboard to interact with their devices, including those who use a screen reader or have certain mobility impairments.

In the graphic above is a mockup of a typical online store where we see two laptops and a HoloLens in a row, each with an add-to-cart button and a cart containing two items beside a checkout button. Imagine a user already had items in her cart and was ready to check out. This user would likely become frustrated if she had to navigate through all of these other items she could add to her cart before she could check out. In this example, the interface decreases efficiency in a small but significant way for keyboard users. In an online store with hundreds of items, the extra navigation steps would become a major barrier.

When important elements take an excessive number of keystrokes to get to, the user will encounter many instances of the unnecessary step trap. This usability trap violates the design tenet of creating an efficient interface. To make content more usable, ensure all elements within your UI are accessible using the keyboard alone. Ensure that you can efficiently navigate to all elements that are involved in key user scenarios.

Reframing for inclusion

When we think about how accessibility principles align with usability principles, it becomes clear that we can’t design for one without designing for the other. On my team at Microsoft, we’ve developed some practical ways to integrate accessibility testing into our research, such as conducting accessibility walk-throughs (opens in new tab) for when we’re testing prototypes.

We’re still learning and always will be, but these processes have fostered a culture that truly values inclusive design. Our efforts are part of a larger value system that’s leading to some exciting innovation, changing the way we think about inclusion.

Are you planning for accessibility? What questions do you have? What tips and resources do you use? Tweet @MicrosoftRI (opens in new tab) or like us on Facebook (opens in new tab) and join the conversation. 

Ashley is a design researcher who focuses on identifying usability and accessibility issues across a variety of different products. She has a master’s degree in Engineering Psychology from Georgia Institue of Technology.