How to Design With Accessibility in Mind

According to the World Health Organization, nearly a billion people across the world live with some form of disability. That’s 15% of the global population that could struggle to use web platforms or mobile apps the same way as everyone else.

Providing accessibility is a challenge that is usually solved at the design phase. Clever and thoughtful designers have managed to make their products usable regardless of the user’s physical disabilities. With Section 508 and the Web Content Accessibility Guidelines 2.0, designers are expected to make their web products as universally accessible as possible.

To get your skills to the advanced level required for creating great and accessible designs, formal training is often needed. Nowadays you can find plenty of webinars and tutorial videos, but nothing beats an official course from a credible design school such as JMC Academy.

Once your skills are at the right level, consider these important elements when designing with accessibility in mind:

1. Stop relying on color alone

Here’s an interesting statistic - one in twelve men are colorblind to some degree. Women are less likely to be colorblind, but people with low vision or complete blindness could also struggle to use your platform if much of the information is conveyed with colors.

Of course, you can’t stop relying on different colors to convey a message. If you want to draw attention to a error, for example, a red highlight is still your best option. But try to use more than just color when you’re trying to say something to the user. For example, you could make the error message bolder or make the test shudder as a form of alert.

2. Don’t make people hover for elements

A lot of users deploy screen readers like Dragon NaturallySpeaking to interact with websites. Usually, users with motor disabilities prefer interacting with voice commands. But voice commands are impossible if certain links, buttons, and screen elements are only accessible by hovering over them. Avoid this.

3. Be careful with forms

Modern web forms are minimalistic, which tends to look better but decreases accessibility. To solve this, pay attention to the text contrast ratio, make sure every element has a border, and clearly label the form fields.

4. Pay attention to contrast

The WCAG recommends a contrast ratio of 4.5 to 1. These guidelines change depending on the size of the text. Getting the contrast ratio right is a critical element of accessible design. People with visual impairment can pick out high contrast elements much more easily, which dramatically improves their web experience. Use online tools to make sure every element is in the right contrast ratio.

5. Design for keyboard focus

A lot of users access and interact with websites solely through their keyboards. This means they miss out on vital information designers have left for those who hover over elements with their pointer. While designing your site, try to test it using only the keyboard. Scroll through the website by using the arrow, tab, and enter buttons only. If the experience is less than ideal or you struggle to find which element is selected at any given moment, consider redesigning your site for greater accessibility through keyboard focus elements.

Think of accessibility as a natural design challenge and get creative with the solutions. All your users deserve to have a great experience using your product regardless of their disabilities.