Untangling Inclusive Design
Inclusion is more than accessibility.
Inclusive design is about making the most out of your user base and creating better digital products, whatever situation your users find themselves in. It’s better for business, too—the more people you reach, the higher the potential profit! Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. An important distinction is that accessibility is an attribute of universal design, while inclusive design is a method of universal design. An important note is that these recommendations are only a small selection of some easy ways to increase accessibility and inclusivity. Following these recommendations will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these.
It’s important to add that there’s no one-size-fits-all roadmap for inclusive design. User abilities, needs, and preferences are so manifold that there can never be an ultimate result. But by using an iterative approach with time and enough legroom for creative solutions, a near-perfect solution can be found.
So, here’s 5 ways we can design and build inclusive experiences:
- Challenge your assumption for experience gaps.
Get to know the people you design for. Broaden the groups you test with, the teams you work with, and those that advise you. Don’t be afraid to ask others for input; in UX, discerning design conversation enables us to understand not only our users’ immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. It allows us to dig deep into our understanding of the user and create solutions that will not only solve a need but effectively improve our users’ lives by removing unnecessary pain or friction. Use qualitative research methods, recruit diverse users, have your team watch research sessions and see real users, invest in a diverse team, and build empathy into your design guidelines.
- Don’t use color as the only visual means of conveying information.
Avoid relying on color for meaning; try to use an indicator other than colors such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone; add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph, so the links stand out.
This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind (1 in 12 men, 1 in 200 women), have low vision (1 in 30 people), or are blind (1 in 188 people). Use color to highlight or complement what is already visible. Color contrast is an often overlooked web accessibility problem.Some interesting data relating to Colorblind users:
• 10% of the male population has a specific degree of colorblindness;
• 37% of colorblind do not know which type of color blindness they have;
• 64% of individuals consider that color confusion is the biggest problem;
• 59% only identify some colors;
• 22% do not see some colors.
- Ensure sufficient contrast between text and its background.
People who have low vision could find it difficult to read text from a background color if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. It’s critical to consider the sufficient contrast between text and backgrounds. There are some great tools that can help you find an accessible color palette for your designs including Color Safe. There is also WebAIM’s Color Contrast Checker, which will let you test colors you have already chosen. For Sketch, Stark is a wonderful colorblind simulator and has smart color suggestions. We use this every day at Trailhead!
You’d think this would pass AAA, but it doesn’t. This is why we always check, daily!
- Use accessible visual cues and copywriting for labels.
Using placeholder text as labels is one of the biggest mistakes when designing a form. We might be tempted to go with this trend when real estate is limited or want to make our design more modern—don’t. Placeholder text is meant to be helpful as an example response. Use a combination of color, text, and icons to display feedback such as error messages. Error messages should be displayed as soon as possible, preferably on the client-side rather than waiting until the whole form is submitted. Have properly labeled components for screen readers. And of course, every element should be reachable by the keyboard.
- Involve developers from the start.
There’s a lot of variables involved that can make development a lot more difficult than designing, such as technical, requirement, and structural complexities. Accessibility-driven developers know keyboard accessibility is one of the most critical aspects. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content. Help your developers write useful alternative text for your images and other non-text content. Collaborate with them to understand how you can help build more accessible experiences.
“If you do an amazing job documenting keyboard accessibility but a developer never sees it or it was implemented incorrectly, your work ends up having little value for your end users. Communication and follow-through is really key to delivering a great inclusive experience.” -Sarah Federman
It’s all about the little things
So, what are some easy ways to involve accessibility in the process today?
- Have an array of multicultural/non-traditional names (we’re talking very long names!) and images of diverse individuals in your design mocks. This goes beyond accessibility—it’s a sense of representation and belonging.
- With color choice, typography decisions, and feedback reviews, ask yourself, “Who am I excluding in my design?” along the way.
- Appoint someone in your company to do recurrent accessibility audits (perhaps someone in your QA team).
- Make accessibility part of your design research.
We’re all in this together
The inclusive design movement requires an exhaustive evolution in the traditional pattern of design thinking. Conventional design attempts to find the most direct route for an average user to complete a task. But in reality, there are no average users—we are all individuals with varying abilities.
Inclusive design is like the practice of hiking up a mountain—we can always look for ways to include more people and situations in our hike, even if the result only gets us a few steps up the trail at a time.
There are 7.4 billion people in the world, all with a rich arrangement of human qualities and ways people adapt to or interact with the experiences designers create. Although these suggestions cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These recommendations also make web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general. At Trailhead, it’s our responsibility to see the power of the experiences we consciously design. Our team sees inclusive and accessible design as a set of perspectives and practices that champion human diversity and a non-negotiable reflection of our core values. Seeing disability differently and understanding exclusion helps us extend a solution for one person into a solution for millions of people.