Accessibility for Designers

All interactive elements on a page should be able to receive keyboard focus. Make sure that you design what it looks like when these elements receive focus. Just as you would design mouse over states, design focus states.

Never remove the browser default focus outline unless you designed an accessible alternative (with a contrast ratio of 3:1).

Think of functionality like a collapsible navigation menu. This functionality should not only expand on mouseover, but also when it receives keyboard focus. Also think of the affordances for keyboard users.

Particularly tricky components can be drag-and-drop interfaces or other components that require a user to make a path-based gesture (for example requiring people to sign a document using a mouse or trackpad).

When you remove the underline from links, people with limited color 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.

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 navigationmenu 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.

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.

This is something you probably already consider for touchscreens. Interactive elements like a button should have a large enough interaction targets so anyone can easily activate them.

24 by 24 pixels is the minimum, but it’s recommended to make them larger (44x44) to reduce the possibility of unintentional clicks.

Make sure that there’s enough color 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 color contrast in your designs.

Using color 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 color 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.

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

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