The importance of designing for accessibility
As designers, we shouldn't ever forget the responsibility we have with our designs and their impact on the people who use them. It's only fair to say we should also take the responsibility to ensure that everyone has access to what we make regardless of ability, situation, or context. It's not just an ethical subject, but improving accessibility also increases the reach of our projects. So it's not a bad thing to invest in accessibility as it will bring a better experience to everyone.
How to design for accessibility
To make your designs usable and accessible by as many people as possible, including individuals with physical disabilities, socioeconomic restrictions, and even people with a poor internet connection, you can use the Web Content Accessibility Guidelines (WCAG 2.0).
Here are some essential accessibility guidelines which I use to make my designs accessible.
Add enough contrast
One of the most obvious ways to align your designs with the WCAG guidelines is to use strong color contrast. People with low vision could have a hard time reading the text on your website; according to the World Health Organization (WHO) there are over 1 billion people with vision impairment. Thus, it is crucial to include these people by providing enough contrast between text and background.
To check the contrast in my designs, I use Stark, a plugin for Sketch, Figma, and Adobe XD. With Stark, you can quickly check the contrast between two layers with different colors and see whether there is enough contrast between them. If not, it will conveniently give you suggestions to help you out.
Add visual clues
People with color blindness will have difficulty understanding your content if you only use color to show an action, communicate something important, or prompt a response. You can include those people by combining color with an extra indicator, like patterns, labels, or micro-animation.
For example, when communicating an error, don't just rely on a colored text alone, but add an icon to give it a bit more context.
Add labels to form fields
One of the biggest mistakes you can make when designing forms is using placeholder texts as labels. If I'm honest, it looks nice. However, placeholder text is hard to read as it usually has a gray color and therefore has low contrast. As some people tend to forget what they're typing, they face difficulties remembering what the fields are about once the labels are gone.
Make sure that people understand what they should do and write in a form. Labels should always be visible, especially when filling an input field. With this, you'll prevent people from losing context with what they're writing. When hiding descriptions or directions in their forms, designers are sacrificing usability in favor of simplicity.
Design focus states
Browsers show by default outlines on selected elements. These are called focus indicators. And if you're like me, you might find these default focus indicators ugly and could be tempted to hide them. However, if you remove the default style, always replace it with something else instead. Otherwise, you'll disclude people who require screen readers, individuals with limited mobility, and power users who prefer the keyboard as their main way of navigating the web.
The elements that need a focus state are form fields, buttons, and menu links. With a focus indicator, they essentially need to look different from the same elements around them. It's okay to design a focus indicator with your brand colors. Just make sure that the state is clearly visible and has enough contrast to stand out from other elements around it.
Source: W3C Focus Visible.
Bonus tips 🎁
Include accessibility in your workflow
When designing or doing design research, verify your assumptions about accessibility are right, and any potential opportunities to improve.
Get an Accessibility Audit
Use an audit service to determine if your product works with assistive technologies and meets the minimum WCAG 2.0 level AA. Use those results to fix problems and do another test.
Include useful alternative text for your images
Not necessarily a design thing, but if you want to do more to make your product more accessible, describe within the <alt> attribute of the image what's happening and how it matters to the story, instead of saying something like "picture". Context is everything.</alt>
Conclusion
You've made it. You've read my four tips that will help you make your web design get closer to meet level AA of the Web Content Accessibility Guidelines.
Designing for accessibility is something I'm personally more and more including in my process, and it's still something I'm trying to improve on. Designing for accessibility is easier and more important than we might think. So I encourage you to consider these tips as part of your process and continue the rise of an accessible web.
Let's make technology usable to all humans, regardless of their abilities, economic situation, age, education, or geographic location. Let's design responsibly. Thank you for reading.
