3 Easy Ways to Improve the Accessibility of Your User Interface Today

Developing an accessible digital product is important, but requires some planning.

However, there are a few items that are easy to implement and can make a huge impact on the accessibility of your product’s user interface.

There’s a common misconception that an accessible digital product means sacrificing visual design, but there are many subtle changes you can make that will vastly improve the way people interact with and view your brand. Here are a few quick and easy tips you can implement today to help your users.

Colour Contrast

Colour contrast is one of the most commonly known accessibility issues, and yet it’s still a problem for many companies. To meet the minimum recommended accessibility (Level AA WCAG 2.0) large text (19px bold and above or 24px regular and above) has to meet a minimum contrast ratio of 3:1. Other visible text within your digital product has to meet a minimum contrast ratio of 4.5:1. Text that’s part of an inactive component and logos are exempt, but don’t you want everyone to see your logo clearly?

When Sun Life Financial uses yellow with white on their site, it doesn’t pass colour contrast at all. If paired with black, Sun Life’s yellow would meet the highest level of colour contrast and ultimately be easier to read for all users.

Manulife Financial, on the other hand, goes well beyond meeting colour contrast for their green when used with white.

Test it yourself: Visit WebAIM’s Color Contrast Checker and enter in hex values (the html colour codes used within your interface) for your background and text colours. An alternative, and a tool we love around the office, is the Colour Contrast Analyser app made by the Paciello Group and is free to download for Mac and Windows.

Distinguishable Links

Along with meeting colour contrast guidelines, text links within your digital product shouldn’t rely on colour alone to distinguish them from surrounding text.

Scotiabank only uses red to distinguish links. Someone with colour blindness probably won’t be able to tell what they can and can’t click on, such as “Scotiabank advisor”.

RBC Royal Bank uses underlines as well as blue to convey what text is clickable, which helps links stand out for people with all visual abilities.

Test it yourself: View your design in black and white. Can you easily tell what text is clickable? If not, make some visual changes (the underline is an easy and popular way to distinguish links) and test again.

Pause or Stop Multimedia

As designers, we’ve seen our fair share of carousels — good, bad, and ugly. While carousels themselves are a questionable approach, if you do happen to use one that automatically rotates make sure to include a pause or stop button.

Industrial Alliance’s carousel automatically rotates at a fairly quick pace, which makes reading information difficult for anyone with cognitive impairments or those who are zoomed in.

Desjardins Insurance uses a pause button placed on a white background for their carousel. Placing the pause button on a white background rather than on the carousel image itself ensures it’s easily seen by all and gives more control over colour contrast.

No test for this one. If your carousel automatically rotates, it automatically fails accessibility. Include a pause or stop button to give users more control of the interface.

With the differing abilities of users and rapidly expanding ways people are accessing the digital world, creating an accessible product is crucial to the success of your online brand.

Let us know if you’ve seen any sites out there that could be more accessible. In the meantime, feel free to check out this infographic on the importance of accessibility.

References:
1. http://www.w3.org/TR/WCAG20/