{"id":676779,"date":"2019-02-25T09:00:07","date_gmt":"2019-02-25T17:00:07","guid":{"rendered":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/?post_type=msr-blog-post&p=676779"},"modified":"2020-07-22T10:12:18","modified_gmt":"2020-07-22T17:12:18","slug":"creating-a-more-inclusive-world-how-to-test-products-for-accessibility-and-usability","status":"publish","type":"msr-blog-post","link":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/articles\/creating-a-more-inclusive-world-how-to-test-products-for-accessibility-and-usability\/","title":{"rendered":"Creating a more inclusive world: How to test products for accessibility and usability"},"content":{"rendered":"

By Ashley Ferguson (opens in new tab)<\/span><\/a><\/p>\n

\"A

Note: This article was originally published on February 25, 2019, on Medium<\/p><\/div>\n

Apply these usability tenets to make your designs more accessible<\/h3>\n
\n

\u201cWe\u2019ve tested for usability \u2014 now we need to look at accessibility<\/em>.\u201d<\/p>\n

If you work in user research, you\u2019ve 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\u2019ve noticed that common accessibility traps map directly to\u00a0well-known usability tenets and traps (opens in new tab)<\/span><\/a>.<\/p>\n

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\u2014referencing the World Wide Web Consortium\u2019s accessibility guidelines and experts Steve Herbst (opens in new tab)<\/span><\/a> and Michael Medlock\u2019s work on usability\u2014with tips for more usable alternatives.<\/p>\n

1. Using color alone creates invisible elements<\/strong><\/h3>\n

One of the accessibility traps that I encounter is\u00a0use of color alone (opens in new tab)<\/span><\/a>\u00a0to convey information. This trap can affect many people, including over 246 million Americans whose visual impairments affect their perception of light and color.<\/p>\n

\n
\n
\n

\"Image

Insert caption<\/p><\/div><\/dt>\n<\/dl>\n<\/div>\n

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.<\/p>\n

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 \u201cno 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.\u201d<\/p>\n

To\u00a0avoid this usability trap, make sure that all information conveyed by color is also conveyed through an alternate visual means like text labels.<\/p>\n

2. Moving content creates distractions<\/strong><\/h3>\n

Another\u00a0accessibility trap concerns content that moves (opens in new tab)<\/span><\/a>. Moving content can be distracting to many people, including the nearly 15 million Americans with attention deficit disorders.<\/p>\n

Designers include animations for many valid reasons: to grab the audience\u2019s 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.<\/p>\n

While the harmful effects may be more pronounced in people with disabilities such as ADHD,\u00a0distraction\u00a0is a usability trap that can affect many.\u00a0Inserting distracting elements violates the design tenet of creating an understandable interface.<\/p>\n

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.<\/p>\n

3. Inefficient keyboard access creates unnecessary steps<\/strong><\/h3>\n

A third\u00a0accessibility trap concerns an interface that\u2019s difficult to access with a keyboard alone (opens in new tab)<\/span><\/a>. Many users rely on their keyboard to interact with their devices, including those who use a screen reader or have certain mobility impairments.<\/p>\n

\"An<\/p>\n

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.<\/p>\n

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.<\/p>\n

Reframing for inclusion<\/strong><\/h3>\n

When we think about how accessibility principles align with usability principles, it becomes clear that we can\u2019t design for one without designing for the other.\u00a0On my team at Microsoft, we\u2019ve developed some practical ways to integrate accessibility testing into our research, such as\u00a0conducting accessibility walk-throughs (opens in new tab)<\/span><\/a>\u00a0for when we\u2019re testing prototypes.<\/p>\n

We\u2019re 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\u2019s leading to some exciting innovation, changing the way we think about inclusion.<\/p>\n

Are you planning for accessibility? What questions do you have? What tips and resources do you use? Tweet @MicrosoftRI (opens in new tab)<\/span><\/a> or like us on Facebook (opens in new tab)<\/span><\/a> and join the conversation.\u00a0<\/strong><\/p>\n

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.<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

This article will help you break down the barriers between how you think about usability and accessibility. By incorporating several of these design tenets into your product’s cycle, you can begin to create a culture that fosters inclusivity.<\/p>\n","protected":false},"author":39057,"featured_media":676812,"template":"","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","msr-content-parent":616842,"msr_hide_image_in_river":0,"footnotes":""},"research-area":[],"msr-locale":[268875],"msr-post-option":[],"class_list":["post-676779","msr-blog-post","type-msr-blog-post","status-publish","has-post-thumbnail","hentry","msr-locale-en_us"],"msr_assoc_parent":{"id":616842,"type":"group"},"_links":{"self":[{"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-blog-post\/676779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-blog-post"}],"about":[{"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/types\/msr-blog-post"}],"author":[{"embeddable":true,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/users\/39057"}],"version-history":[{"count":9,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-blog-post\/676779\/revisions"}],"predecessor-version":[{"id":677445,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-blog-post\/676779\/revisions\/677445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/media\/676812"}],"wp:attachment":[{"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/media?parent=676779"}],"wp:term":[{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=676779"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=676779"},{"taxonomy":"msr-post-option","embeddable":true,"href":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/wp-json\/wp\/v2\/msr-post-option?post=676779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}