Designing for Accessibility is not that Hard

This is an interesting article written by Pablo Stanley about seven easy-to implement guidelines to design a more accessible web.

Photo by Pablo Stanley
Photo by Pablo Stanley

Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.

There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to. Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort.

Fixing a site that is already inaccessible may require some effort, though. When I used to work at Carbon Health, we checked the accessibility of our site using the AXE Chrome Extension. We found 28 violations that we needed to solve on the home page alone. It sounded complicated, but we discovered that these problems were not that hard to correct; it was just a matter of investing time and research to solve them. We were able to get to zero errors in a couple of days.

I want to share with you some of the simple steps we took so you can also make your sites more accessible. These principles focus on web and mobile accessibility.

But before we get started, let’s talk about why that’s important.

Why designing for accessibility? 🤔

As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone.

There are over 56 million people in the United States (nearly 1 in 5) and over 1 billion people worldwide who have a disability. In 2017, there were 814 website accessibility lawsuits filed in federal and state courts. These two pieces of data alone should convince us of the importance of designing for accessibility.

There is also a strong business case for accessibility: studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, have faster download times, they encourage good coding practices, and they always have better usability.

These seven guidelines are relatively easy to implement and can help your products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0), and work on the most commonly used assistive technologies — including screen readers, screen magnifiers, and speech recognition tools.

1. Add enough color contrast 🖍
Buttons with good color contrast are easier to read for Guadalupe.
Buttons with good color contrast are easier to read for Guadalupe.

Color contrast is an often overlooked web accessibility problem. 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. So, it is critical to consider the sufficient contrast between text and backgrounds.

According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.

Some tools will help you check this quickly. If you use a Mac, I recommend getting the Contrast app, with this tool you can instantly check contrast using a color picker. If you want to get a more detailed score, I recommend entering your color values onto the WebAIM color contrast checker. This tool will calculate the score for both regular and larger text sizes in different conformance levels (A, AA, AAA.) You can change the color values and see the results in real time. Source: WCAG Visual Contrast

2. Don’t use color alone to make critical information understandable 💈
René gets happy when graphs are colorblind friendly!
René gets happy when graphs are colorblind friendly!

When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content.

Try to use an indicator other than color 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.

Elements with more complex information like charts and graphs can be especially hard to read when you only use color to distinguish the data. Use other visual aspects to communicate information like shape, labels, and size. You can also try incorporating patterns into your fills to make the differences more apparent. A great example of this guideline is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture.

A good trick is to print your graph in black and white and see if you can still understand everything in it. You can also use an app like Color Oracle, which shows you in real time what people with common color vision impairments see. These tips help you make sure that the information in your site is color-agnostic.

Source: WCAG Visual Contrast Without Color

3. Design usable focus states 👀
Focus states are easy to navigate with Tyler’s prosthetic hand.
Focus states are easy to navigate with Tyler’s prosthetic hand.

Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. You might find these default focus indicators not very pretty and be tempted just to hide them. However, if you get rid of this default style, be sure to replace it with something else.

Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation. Oh, and some of us use the keyboard as their primary way of navigating the web!