Making accessibility design accessible

Making Accessibility Design Accessible
fb twitter linkedin

Great user experience is key, but adding accessibility to that equation is even more important. A seemingly daunting task can be made manageable with a few tweaks to your process and a change in mindset.

The goal of great UX is designing products that ANYONE can use. Regardless of physical, mental, or cognitive limitations, the user experience should be the same for everyone.

However, with so many factors to account for in software development (timeline, budget, QA, bug fixes etc.), accessibility is often the last thing on the long, to-do list. Since we can’t have it all, we need to prioritize and leave some things on the back burner, and that includes accessibility design. I mean, that’s the reality of it, right? Well… not quite.

It just so happens that many of the features that make a design “accessible” are also just things that constitute “good design”. Picking a legible font to accommodate an older audience also means it’s more legible for everyone else. Using strong contrasting colors to help color-blind people distinguish different elements on a screen consequently makes it more user-friendly for those with good vision as well. So, let’s change our mindset. Instead of designing for disabilities, let’s design for EVERYONE.

“That sounds great and all, but…”

“We’d love to, but it’s not a priority for us.”

“We don’t have the time or budget for it.”

“We’re after a specific market. We don’t necessarily want or need to appeal to everyone.”

Whatever the objection might be, it’s usually coming from the viewpoint of accessibility design being something extra, an afterthought or even a waste of time. This is a mistake in my opinion. If we just consider it a part of the validation process towards having good design, it becomes a much less daunting task.

You would never say, “We don’t have the budget to consider the UX for this particular project”, or at least I hope not. UX is widely accepted as a part of any design process. So, let’s stop treating accessibility design like it’s an unreachable goal.

Where to start?

Hopefully, by now, I’ve managed to at least kind of convince you on the value of accessibility design. But before we dive head first into how to design for accessibility, it’s important to understand the people you’re designing for.

Know the types of users

In Canada, nearly 16% of the population has some form of disability, and in the US, that percentage increases to 20%. These are large groups of people that inaccessible design affects. While there is typically a bigger focus on aiding visually impaired users, don’t forget there are other forms of impairments as well such as hearing, cognitive, mobility and motor-related that need to be considered. It’s important to know the types of impairments that exist, so that we are more cognizant about the design decisions we make.

And it goes beyond just making user-friendly products. A 2016 Wall Street Journal article reported that over 240 businesses in the US had been sued in federal court since the start of 2015 for creating websites and apps that do not accommodate the visually impaired. While it’s unlikely you’ll face legal ramifications similar to the likes of Netflix, Target, and Disney, it would still be a disservice to your users by ignoring it.

Listen and learn

As human beings, we’re driven by our biases. In the design and development process, we often need to make assumptions. Since we don’t necessarily have the same perception as our users, especially those who live with physical and mental limitations on a daily basis, the best way to validate these assumptions is through user testing.

Simply testing with 5 users can uncover 85% of usability problems and this should be no different with testing for accessibility. So, whenever possible, invite testers with various disabilities to help validate your designs. Observing and talking to them in the process (or whenever the opportunity comes up) will help you learn and understand how their difficulties affect them when they use your or any other product.

Don’t underestimate the power of this simple task. It can only improve your current and future designs.

Change your mindset

There’s a great article on Invision’s blog that examines how We’re Just “Temporarily Abled”. In essence, our health is constantly in a state of vulnerability. Unfortunate things might happen, or age just catches up with us. This fresh perspective can be an effective way to get buy-in at your company to put more focus on accessibility design. What if you suddenly have a lack of motor skills, or impaired vision etc.? How well might you do using your own product when you’re older?

If we change our mindset in this way when considering accessibility – designing not just for those who already live with these limitations, but for our future selves as well, it could help make accessibility more tangible and relevant.

Best practices

As designers, we often scuttle quietly behind our computers creating beautiful interfaces that primarily aid the visually impaired. However, in order to make our products usable by the widest range of people including those with other impairments, we need to collaborate with our development teams as well. Here are a few best practices.

Style guide with twelve colour options as well as button, link, switch, form and icon options.
Setting up a style guide and design system at the start of the design process helps to ensure accessibility guidelines are adhered to.

For Designers:

• Use colours as visual indicators, but also include icons and descriptive text in conjunction. Identifying colour is a challenge for the visually-impaired, and impossible for those who only see in grayscale.

• Avoid colour combinations that are unfriendly to colour-blind people (red/green, light green/yellow, blue/purple).

• Ensure sufficient colour contrast between text and background. The WCAG guideline specifies a minimum contrast ratio of 4.5 to 1. If the font size is 24px regular or 19px bold and larger, that minimum becomes 3 to 1. There are many tools to help you with this including Contrast Ratio.
Colour contrast ratio for large and small text. • Set line and paragraph spacing to a minimum of 1.5x to provide an easier reading experience.

• Use filled icons as they are clearer than outlined icons. But if outlined icons are necessary, then go for thicker strokes as that is easier to detect.

• Voice overs rely on interactive components to be displayed on screen, so it is important to not hide elements that only display on hover or click. It should, at minimum, be able to highlight the possible main tasks.

• When designing forms, make it obvious which fields are active. And whenever possible, stack the fields in one to two columns to accommodate people with narrow field of vision.

• To further aid people with narrow field of vision, keep blocks of text to 80 characters or less and unjustified.

Website interface showing form fields stacked vertically.
For Developers:

• Make pages tabbable with the keyboard to aid those who cannot use a mouse.

• Implement Dark mode or colour invert. For people with low-vision (especially older people), it is easier to read light text on a dark background. Apple recently improved its colour-invert feature with Smart Invert for iOS11, which I suggest everyone check out.
Dark mode for iphone showing the itunes store.
• Consider VoiceOver tools like screen readers, which blind users rely on for information. That said, messages and labels must clearly communicate intent and which includes descriptive alt text.

• Keep animations and interactions simple to aid those who suffer from dizziness, imbalance, or other types of cognitive impairments.

Communicate and educate

To collaborate successfully on accessibility design, everyone (designers and developers included) should be encouraged to understand the best practices. It is very possible that your company may not have a dedicated accessibility specialist, so the responsibility would be on the entire team.

Our design team at TTT is in the process of creating a checklist of standards and best practices for the rest of the company to follow. This will allow us to communicate and educate each other on what’s needed and why. But consider the limitations. Prioritize and compromise on what can, and should be done within the context of each project and organization.

One last thing

Designing for accessibility may not be a success on your first attempt, but like the design process, it is iterative. Starting small and making incremental changes continually will get you closer and make your designs better. Not only does this make the process feel less daunting, but when you have that client requesting accessibility design, you’ll already be an expert.

Felix Cheng is a UX/UI Designer who loves watching movies, travelling and exploring local coffee shops. For more of Felix’s insights, you can check out his blog on The UX of Registration and Login.