Accessibility for UX and UI designers

From left to right and top to bottom is the default (for people who read from left to right) and usually the way to go for tab order. But when interfaces become more complex, this becomes something to think about.

Is the “close button” the first or the last element in a (modal) window? Do submenus in a navigation menu open when the top-level menu-item receives focus? And does the user have to tab through all the submenu-items or can they skip directly to the next top-level item?

For keyboard users this is a huge part of the interaction, so keep this in mind for your designs.

People who use keyboard navigation (or other ways of sequential navigation) to go through a page, often come across lists of interactive elements that they need to go through before they get to the content they want to read. A common example is the navigation menu at the top of a page.

You can allow users to skip these blocks by including a “Skip link” at the top of the page which links directly to the main content. This link can be hidden by default but should become visible when it receives keyboard focus.

This technique can also be used for other components that contain lots of interactive elements, like carousels.

When you remove the underline from links, people with limited colour vision may be unable to recognize the links.

If you do, make sure there’s enough contrast between the link text and the other text.

Switch your screen to black and white to check your work for issues like these.

Make sure that there’s enough colour contrast in your designs; the contrast ratio between a text and its background should be at least 4.5:1. This helps low vision users in particular.

There is an exception for large or bold text. Text that is larger than 24px or bold text that is larger than 18px should have a contrast ratio of at least 3:1.

There are plenty of tools available to check the colour contrast in your designs.

Using colour to communicate information that is important to the user is fine, as long as you also use another way to communicate the information.

Examples of this are marking erroneous form fields with a red border alone, or a red or green dot to indicate a status. The form fields should also have an icon, a text, or something else that tells the user that something’s wrong. And the status dot could also be a red cross and a green checkmark.

This way people with limited colour vision can also see everything they need to know.

Elements that are repeated across a website should be identified consistently. This goes for text content, but also for non-text content, like icons.

This makes the website familiar and predictable for your users. In particular those with cognitive limitations, users with low vision, users with intellectual disabilities, and blind users.

When they learn functionality on one page, they can more easily find them on other pages.

Is there a contact form on your website? Is the phone number field required? Be aware that deaf and hard of hearing people may not be able or comfortable to call you and much rather send an email or use the chat.

This includes (notification) emails you send. If it comes from a noreply address, you exclude people who can’t use a phone.

Video and audio content need text alternatives so everyone knows what’s going on. Video needs captions and audio description, and both audio and video content need a text alternative like a transcript.

Don’t forget to design how the controls in a video player work. Do you need captions or subtitles? And where does the transcript go?

Avoid walls of text. They can appear intimidating and time-consuming. Users appreciate text that’s chunked and easily scannable.

Use short paragraphs and organise them with sub-headings. If you have long sentences, see if you can split them up into separate bullets.

Include disabled people in your user research and usability testing. This will surface issues in a much earlier stage of your project.