Top Ten Inclusive Design Lessons

Share this post:

(The second in a series of posts on inclusive design)

I have learned to approach accessibility like any other design challenge. It is about understanding and developing empathy for the user, which is fundamental to IBM Design Thinking.

By constantly planning and incorporating accessibility into our designs, we can create one interface that is adaptive to different abilities, works seamlessly with assistive technology, such as screen readers, and provides the best experience for every type of user.

To help you think more strategically about accessibility, here are my top 10 recommendations for inclusive design:

1. Consider accessibility from day one

There are many design elements that we take for granted, such as dragging, dropping and hovering. These are not accessible and it is important to design alternative ways to provide for these kinds of interactions. In addition, think about mobile first because interactions like hover cannot be done on a mobile device.

2. A power user will also use keyboard commands and shortcuts

Take time to plan out how different users will navigate the elements on a page. It should make sense visually. Plan the left to right, and top to bottom paths that a user will take to consume information.

Also, think about a user’s mental model and the order in which they will need to consume information in order to accomplish tasks. Finally, conducting user research, such as creating personas, developing empathy maps, interviewing prospective users, and writing use cases will help in understanding your users.

Figure 1. Examples of right and wrong paths for users to consume information.

3. Repeated elements and content should be in the same relative order on each page

It’s not just blind users who want to have elements appear in the same place on each page – all users can appreciate having content, buttons, and controls in the same expected place. Designing a consistent layout will enable all users to predict where repeated elements will appear.

4. Always consider the focus

Annotate where focus should go after conducting a “remove action” or “modal pop-up” in which context in the user interface shifts. Defining where focus goes after completing a task can help all users move faster through the user interface (UI). Any change of context should occur when the user takes explicit action on the element that has the focus.

5. Consider what visuals to use for keyboard focus

Keyboard focus requires a physical shape change like inverting a button to go from an outline to being filled. This could also be used for a hover state. By considering hover, focus, and selected states at the beginning when developing a design language can help simplify your system. Ask yourself: does the hover state have enough visual contrast that it can be reused or will there need to be a new visual for keyboard focus?

Figure 2. An example of how a visual pattern can be applied throughout the user interface to help drive consistency among common UI elements, such as a list.

6. Avoid using color as the only method to convey information

Users who might be colorblind may not be able to identify the change in color and then miss the information that is being conveyed. This is why it is important to also have a physical shape change in any icons that are communicating a status change. Having a color change alone can be a cognitive load on users as they try and understand the meaning behind the change in color.

Figure 3. Color palette and how it would appear to a user who is not color blind.

Figure 4. The same color palette and how it would appear to a user who is color blind with a form called Deuteranopia, in which most of the colors appear as orange and blue with little contrast.

Figure 5. The same color palette as seen by a user who is color blind with a form called Tritanopia, in which most of the colors appear as pink and teal with little contrast.

Figure 6. Two examples of changing the physical shape change of an icon.

7. Annotate in your UX specs how content is displayed dynamically

Plan for varying amounts of content and explain to developers if:

• Text should truncate or vertically wrap when there is restricted horizontal space
• Text should truncate or scroll when there is restricted vertical space

This is important for users with low vision who might need to increase the screen size, but really it is important to all users, especially those who are working across devices and on small screens.

8. Specify tool tips that are descriptive and user friendly

Tool tips should reference an action that will be taken so users have confidence in what will occur. For example, by using “Read/Unread” it is unclear if the tool tip is representing the current state or the future state. Instead, use “Mark as read/Mark as unread” to reduce the ambiguity. Tool tips are most often read from screen readers so it is important to be as descriptive as possible on what specific action will occur.

9. When referring to content, avoid using sensory characteristics

If you have set up error messages to appear as a yellow triangle, for instance, some users may not see the shape of the triangle or may not be able to discern the color yellow. Leave out sensory characteristics such as shape, size, color or visual location and concentrate on the actual content.

Figure 7. Illustration of warning message.

10. Avoid extreme motion and timed content

Consider how users will access information such as flashing, moving, blinking, scrolling or changing content. Either avoid using these methods or easily enable users to stop the animation. Also, when input from a user has a time limit to complete a task (like purchasing tickets for a concert or sports event) remember that some users, such as those with cognitive disabilities or using alternate input methods, take more time to respond.

About the author

Mary Elizabeth (M.E.) Miller is a designer on the IBM Design team. (Follow M.E. on Twitter) or explore her personal website.