How to design for accessibility
Your role as a designer is to help the team approach accessibility as a facet of user experience rather than a checklist of requirements.
Operating and navigating
Don’t design for mouse interactions alone
Anything that can be done with a mouse, should also work with a keyboard.
Think of functionality like a collapsible navigationmenu. 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).
Design what keyboard interactions look like
Design what it looks like when an element receives keyboard focus.
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 about the tab order
In what order does a user tab through an interface? (Don’t try to be clever).
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.
Targets should be large enough
Make sure that targets are at least 44 × 44 pixels.
This is something you probably already consider for touchscreens. Interactive elements (like
<button>) should have a large enough touch target so anyone can easily activate them.Making (touch) targets large enough also helps people with limited dexterity.
44 by 44 pixels is the minimum, but it’s recommended to make them larger to reduce the possibility of unintentional clicks.
Skip links
Make it easy to skip long lists of interactive elements.
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.
Links should be recognizable
Don’t remove link underlines from links in body text
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.
Colour use
Colour contrast
Text should have contrast ratio of at least 4.5:1
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.
Use of colour
Don’t use colour as the only way to communicate information.
Using colour to communicatie 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.
Other
Be consistent
Elements should be identified the same on all pages.
Elements that are repeated across a website should be identified consitently. This goes for text content, but also for non-text content, like icons.
This makes the website familiair 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.
Think about communication
Can users contact you? Don’t rely on everybody being able to use a phone.
Is there a contactform on your website? Is the phonenumber field required? Be aware that deaf and hard of hearing people may not be able or comfortable to call you and much rather send and 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
For every mediaplayer, think of where the alternative content goes.
Video- and audio content need text alternatives so everyone knows whats going on. Video needs captions and audiodescription,and both audio and video content need a text alternative like a transcript.
Don’t forget to design how the controls in a videoplayer work. Do you need captions or subtitles? And where does the transcript go?
Page design
Keep the page design simple and allow for easy skimming.
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 seperate bullets.
How to find accessibility issues
Standards and testing
- WCAG 2.1 Success Criteria filtered by Interaction Design
- axe, an accessibility testing tool.
- Tenon, an accessibility testing tool.
- Tota11y, accessibility visualization tool.
Colour accessibility
- Stark, a plugin for Adobe XD, Figma, and Sketch for colour accessibility.
- Colour Contrast Analyzer, a Mac and PC application for checking colour contrast.
- NoCoffee, a Chrome extension to simulate visual impairments.
- Accessible color palette builder
User research and usability testing
Include disabled people in your user research and usability testing. This will surface issues in a much earlier stage of your project.
What is web accessibility?
When you design and build websites properly, disabled people can use them. Unfortunately, many websites are designed in a way that makes them difficult or impossible for some people to use.
Web accessibility opens up your products and services to many more individuals, which in turn is good for business. International web standards define what you need to do for accessibility.
Why accessibility is important
- Accessibility improves user experience for disabled people, older people, and people who use older devices.
- At some point in their life, everyone will experience a (temporary) disability .
- Accessibility is a legal requirement in many countries.
- At least 15% of the world’s population has a recognized disability . Accessibility opens up your services to this market.
What is accessibility and why is it important?