Small steps anyone can take towards more accessible design

Photo by Jack Finnigan on Unsplash

There’s a growing demand for designers to make their products accessible to all users. According to the CDC, 26% of the US population is living with a disability of some sort. That’s 61 million adults in this country alone. Even if you’re not directly affected by this at the moment, its long-term and short-term effects will impact all of us during our lifetime.

As a designer, I want to actively work on becoming more mindful about creating inclusive experiences that enable everyone to have valuable and meaningful experiences. I believe anyone can be a better designer by practicing just a handful of basic guidelines as a starting point.

Disability Inclusion: Making sure everybody has the same opportunities to participate in every aspect of life to the best of their abilities and desires.

For those who aren’t already familiar, the Web Content Accessibility Guidelines (WCAG) is the international gold standard for accessibility design. This abundant reference contains strategies, standards, resources to make the web accessible to people with disabilities. Its most up-to-date volume 2.1 was published by the World Wide Web Consortium in 2018, and a working draft of volume 2.2 was just released a few months ago.

WCAG2.1 excerpt

As you can see, because the WCAG is such a comprehensive resource, it can be vastly overwhelming. That’s at least been my experience when I approached their database for the first time and it still is to this day. If you’re new to all this, what basic guidelines can you introduce into your workflow to get started?

In the realm of digital experiences, disability can be broken down into a few major categories: visual, auditory, neurological, and mobility. Disability also falls along a spectrum and can be temporary or life-long, so it’s important to consider all of these factors when creating inclusive designs.

1. Check for color contrast

The first step to making any interface accessible is ensuring that your text is readable to users with low vision, color deficiency, or situational impairment. To achieve this, you should aim for level AA or AAA compliance under the WCAG guidelines. That means text smaller than 18 point needs to have at least a 4.5:1 contrast ratio, and larger text should meet a contrast ratio of 3:1 or higher.

There are a variety of tools you can use to easily check the contrast ratio of text on backgrounds. Colorshark.io is one such resource, which also provides a built-in color blindness simulator, conveniently ordered by prevalence.

www.colorshark.io

2. Don’t rely solely on color

As a designer, color is your friend, but we have to remember that not everyone sees the full spectrum of color. In fact, color deficiency is not an uncommon condition. It’s estimated that 5 to 10 percent of the US population is affected to some degree. We should ensure that important information is not conveyed using just color. Yes, color should still be used to enhance the experience, but if you’re using color to differentiate elements, you should also provide additional means of identification that does not rely on perception of color. Depending on the context, this might include usage of different shapes, sizes, positions, or other indicators.

3. Make sure information architecture is clear and consistent

This seems like a no brainer for any usable website or app, but it’s especially critical for people who use screen readers because they rely heavily on familiarity with consistent components (such a naming, styling, and positioning) on different pages. This consistency also helps users become more comfortable with navigating and predicting where to find items on each page. Orientation cues, like breadcrumbs and clear headings, will also help users understand where they are on a website. Additionally, it’s also useful to provide more than one method of website navigation, such as search or a site map.

4. Keep forms short and logical

To reduce cognitive load, forms should be easy to understand, complete, and submit. The instructions, cues, required fields, and formatting requirements should be clearly indicated to users, which I think is something that would make any user happier.

Another really important thing I learned about screen readers is that not all of them can detect placeholder text inside a form field, so you’ll want to make sure your form labels or any hints are clearly indicated outside of the form field. In fact, according to Nielson, use of placeholder text is considered poor design for a variety of reasons that can lead to more user error and unnecessary burden.

By touching on these basic concepts, I hope I’ve shown you why designing for accessibility benefits all of us and how easy it actually is for any designer to start picking these up.

Check out more tips at https://www.w3.org/WAI/tips/designing.

Product designer based in LA 🌞 Tweeting @amyyang0110