5 Tips to Help Make Your Designs More Accessible

Resources:

Color Contrast Checker Tool:
https://webaim.org/resources/contrastchecker/

WCAG Guidelines Quick Reference:
https://www.w3.org/WAI/WCAG21/quickref/

Read more on digital accessibility:
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 

Full Transcript:

Okay so, what is digital accessibility?

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

I also think it’s important to note that the topic of accessibility benefits everyone - not just people with disabilities.

At first, designing for accessibility might seem a bit complicated. Many companies worry that there’s just not enough time or money to factor it in, when in reality, if accessibility becomes a part of your process or workflow, there’s not much of an additional cost or effort. 

There are quick and easy ways to incorporate accessibility into your designs, and in return, your product will improve. Oftentimes, making your designs accessible will bring better search results, performance, and (of course) usability.

We all have the power and responsibility to make sure that everyone has equal access to information, no matter what their capabilities are.

So with that being said, let’s jump into five basic ways to help follow the AA level requirements of the Web Content Accessibility Guidelines (WCAG). 

WCAG is an international set of guidelines for creating accessible content, and AA is the standard level that most organizations strive to meet.

1. Add enough color contrast.

You want to make sure there is enough contrast between your text and background colors. This one is really easy to overlook and yet one of the most critical things designers can check in order to make sure that people with visual impairments and color blindness can easily consume information on the page. 

According to the Web Content Accessibility Guidelines, the contrast ratio level between text and it’s background should be 4.5 to 1. 

Do keep in mind that as the text size becomes larger and heavier, the ratio requirement becomes more lenient. 

I highly recommend taking a look at the WebAIM color contrast checker tool to make sure your contrast ratios are high enough and to read more about the requirements. I’ll leave a link for that below!

2. Don’t use color alone to communicate information.

People with low visibility or color blindness can have a hard time understanding your content if you only use color as indicators or visual cues. 

Switch it up a little bit and try using text labels or patterns in your designs. 

Here is a great example from Trello’s colorblind-friendly mode. When turned on, the labels become more accessible by adding texture. Another good trick here is to view your designs in black and white and see if you can still understand and differentiate the information.

3. Design usable focus states.

Focus states are indicators to show selected items and are usually used on links, form fields, widgets, buttons, and menu items. 

For users that are blind and use screen readers, or for people who primarily use the keyboard to navigate the web, it is important for these focus states to stand out and be highly visible so that they can understand where they are on the page. 

You can also design focus states to fit your style within the CSS so that it doesn’t have to be obnoxious or distracting from your brand.

4. Use labels or instructions with form fields.

There’s a huge trend going around where placeholders are used instead of labels for form fields. 

Let’s face it - there’s a lot of reasons why this can be appealing. It saves real-estate and makes the design look simple. However, it’s important to remember that labels are not placeholders and people who use screen readers depend on these label tags to know how to navigate the form. Otherwise, the screenreader will just skip over the placeholder text and the user would have no idea what to put in the form field. So even though it’s tempting to overlook this, we should make use of labels so that we don’t sacrifice usability just for the sake of simplicity.

5. Write useful alt text for your images and other non-text content.

People who use screen readers are only able to hear the web, so if an image doesn’t have any alt text, they’re missing out on a lot of useful context on the page. 

In fact, if you don’t write any alt text, the screen reader will just read the file name to the user and that’s pretty much the worst experience for anyone. 

Remember, context is everything to the user, so try your best to describe what’s happening in the picture as best as possible. 

For example, if there’s a picture of a cow, don’t just write “cow” in the alt text. Describe what it’s doing. Maybe it’s grazing on some grass or walking across the field… you get the idea.

Conclusion

And that’s it! 5 really simple tips to get you and your designs closer to being accessible and meeting the WCAG requirements! 

I hope that this video has helped you see that designing for accessibility can be really easy and I hope it inspires you to include our tips in your process. 

Technology and the web should be usable by everyone and it’s up to us to design responsibly in order to make that happen.