Integrating accessibility into your designs is easier than you think

Three small steps you can take to incorporate accessibility into your designs

Photo by Sigmund on Unsplash

Accessibility is a big-picture issue that can sometimes get lost when working in the weeds.

I realized that after completing an accessibility training course for work, I ran into an accessibility issue with my team. Our team wanted to provide contextual help through modals and other patterns, not realizing that screen readers could not track these changes.

Accessibility is a great ideal to strive for, but often it’s not clear how it factors into your daily design work. I could only catch that issue because I had extensive experience working with specialized populations.

However, the accessibility course taught me one important lesson: you don’t need to make drastic changes or read everything on the WCAG page to implement Accessibility. It starts with minor changes, and you’re often one of the best people to make them in your daily work.

UX Designers start conversations with sketches.

One of the things that I love about UX Design is that we can often ensure our team is starting with the right foot forward with areas like Accessibility.

To explain, let me provide a hypothetical scenario: imagine you had someone at your organization who was the “Accessibility person.”

Many team members’ involvement with Accessibility would stop with inviting the accessibility person to meetings and listening to whatever that person said. Unfortunately, however, these conversations sometimes get started too late: I’ve been a part of organizations where Accessibility is brought in only after everything is finalized (and ready to be developed).

This is where UX Designers can help. Our job is to turn business requirements, and user needs into visual things like sketches, mockups, and interactive prototypes. So many people wait and see what we’ve designed before starting conversations based on what they have seen.

So if we take steps to understand and implement small accessibility changes from the start, we can save our “accessibility person” a ton of hard work and ensure that Accessibility is a part of the conversation throughout the process.

This isn’t the first time I’ve brought up this idea: I’ve also talked about how knowing a little bit about UX writing helps ensure that content and design are aligned ahead of time. However, the three accessibility tips I will point out are small steps that I can squeeze into my daily design work regularly.

Three small steps to incorporate Accessibility into your daily work

This is hardly a comprehensive list of accessibility evaluations. Instead, these steps were adapted from the WCAG’s ‘Easy Checks’ page, where you can quickly see if your website has the accessibility basics.

Check contrast with text, images, and color.

Contrast is one of the most common and most straightforward issues to fix regarding Accessibility. Websites are no longer just plain black text on a white background, so we must ensure it’s still readable.

There are two specific tools that I’ve used in the past for this purpose: the WCAG contrast checker and the Color Contrast Analyzer browser Chrome extension.

The WCAG contrast checker is primarily about checking the foreground text stands out enough with a specific color background to be readable. This is something that I’ve consistently relied on when I’m using White text on a colored background to ensure that it’s still readable.

https://contrastchecker.com/

On the other hand, the Color Contrast Analyzer is something that I’ve occasionally used when overlaying text onto images. Doing so allows me to check if it has enough contrast. I recommend reading N/ng’s guidelines for text over images to learn more about the tool.

https://www.nngroup.com/articles/text-over-images/

However, contrast isn’t the only thing you might think about.

Check your text sizing and headings.

If you’re working in tools like Figma, one widespread practice is to set up text styles so that you have consistent text sizes across your prototype.

A Text Styles Generator plugin for FIgma

However, sometimes you might break from these styles without realizing it. For example, you wanted to check how a header might look in another font or text size. As a result, you might miss what is called ‘Header’ tags.

So one quick way to check that everything is laid out is to check whether the Headings tags (H1, H2, H3, etc.) are still intact.

These are important to ensure that your text size remains consistent and that it’s readable by things such as screen readers.

A quick preview of Headings tags

The quickest way (and what I usually do) is to use the Inspect tool in Chrome (Ctrl+Shift+I or Cmd+Option+I), but there are also other tools that you can find to check to ensure these tags exist.

Doing this allows you to see how the text will be picked up through screen readers.

Keyboard access and the Tab Key

One last thing to consider is keyboard access. This is often tricky to set up, as a lot of prototyping software accidentally screws this up, but being able to navigate (and see where you’re going) by keyboard is a crucial part of making things accessible. In particular, there’s one key you need to keep an eye out for: the Tab key.

Think about how you move through a typical form, such as a payment or registration form. Are you more likely to click on each particular field, or are you likely to hit Tab to move through each of them?

How likely are you to click on each form?

This is one of the clearest examples of how Accessibility benefits everybody. Being able to Tab through fields doesn’t just help users that don’t have a mouse: it’s also a widespread way for expert users to complete forms quickly. I can’t remember how often I’ve had to explain during user testing that the Tab functionality will work in the final version after users complained that hitting it took them to random fields.

Accessibility benefits all and can be improved iteratively

I’ve only touched on a few steps you can take to improve Accessibility, but these are ones that I can always squeeze into my design process. However, that doesn’t mean you should stop there.

Hopefully, I’ve illustrated how easy it is to take a few necessary (and easy) steps towards making your designs more accessible. Of course, you don’t need to do everything in your organization to improve Accessibility: one of the main ways to help is by making it a part of early conversations by thinking about it in your designs.

Doing so not only helps users you might have specialized needs, it helps everyone, including your organization.

So the next time you start working on a design project, think about these three small steps you can take to improve Accessibility.

Doing so may have a more significant impact than you might realize.

Kai Wong is a Senior UX Designer and a top Design Writer on Medium. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.