The design is useful and marketable to people with diverse abilities.
Flexibility in use
The design accommodates a wide range of individual preferences and abilities.
Simple and intuitive use
Use of the design is easy to understand, regardless of the person’s experience, knowledge, language skills, or current concentration level.
Perceptible information
The design communicates necessary information effectively to the person, regardless of ambient conditions or the person’s sensory abilities.
Tolerance for error
The design minimizes hazards and the adverse consequences of accidental or unintended actions.
Low physical effort
The design can be used efficiently and comfortably and with a minimum of fatigue.
Size and space for approach and use
Appropriate size and space is provided for approach, reach, manipulation, and use regardless of person’s body size, posture, or mobility.
Emotional
Anxiety
Give users enough time to complete an action
Don’t rush people or set impractical time limits.
People with anxiety might take longer to complete something because they are cautious or fear getting it wrong. Only impose time limits when absolutely necessary, and make sure any time limits on actions are generous.
Explain what will happen after completing a service
Don’t leave people confused about next steps or timeframes.
Services that end without any concrete guidance on what will happen next can increase people’s anxiety. For example if someone requests a book, tell them the next steps and how long those steps normally take.
Make important information clear
Don’t leave people uncertain about the consequences of their actions.
People will become more anxious about services that have consequences for them personally. Clear, simple information is important. If the service needs to warn people about the consequences of their actions, make sure to give them enough information to make the correct decision, so they can continue confidently.
Give people the support they need to complete a service
Don’t make support or help hard to access.
A person with anxiety is more likely to need extra support to complete a service. People who cannot complete a service on their own might need support from someone else.
Let people check their answers before they submit them
Don’t leave people questioning what answers they gave.
We can reassure people by giving them the opportunity to check and change their answers before they submit. Without this step, people are less informed, which could increase anxiety.
Cognitive and learning
For someone like me — who spends about half of any given month coping with chronic migraines — the web feels downright hostile, even dangerous.
When people are in a state of shock, or are in a chaotic phase of their lives, the brain is paralysed. As a result, people have less mental bandwidth for things like processing and reasoning.
Run triage
Deprioritise any non-essential task and focus on the most important needs first. Make contact information highly visible.
Minimise the cognitive load
People experiencing crisis simply do not have any cognitive function to spare. Consider situational context: likely accessing content on a mobile device in difficult, complex settings.
Provide clarity
Those in crisis are among the most challenged and vulnerable people in society. We have a moral responsibility to do the hard work to make things simple for everyone. Services need to work for real humans in real life situations. Use design patterns that have been rigorously tested to ensure accessibility.
Write in plain English
Write at no greater than an 8th grade reading level so everyone can understand.
Aim not just for seamlessness, but for kindness
Kindness for people when they need it most.
Autistic spectrum
Use simple colours
Don’t use bright contrasting colours.
Some people may experience sensitivity to sensory information such as colours which can cause anxiety or pain. Use a colour contrast ratio of at least 4.5:1 for text and test it with people to get the right balance.
Write in plain English
Don’t use figures of speech and idioms.
People on the spectrum perceive language differently and might take figures of speech and idioms literally. Write in clear, plain language to make content understood by more people.
Use simple sentences and bullets
Don’t create a wall of text.
Lots of unbroken text can be hard to focus on making it frustrating to read. Break text down into simple sentences and use bullets for important points to make content easier to understand.
Make buttons descriptive
Don’t make buttons vague and unpredictable.
Not knowing what will happen after clicking a button or link can cause people stress and anxiety. Use descriptive buttons and links to help people know what to expect and give them a sense of control.
Build simple and consistent layouts
Don’t build complex and cluttered layouts.
Complex and cluttered layouts can be overwhelming for people to process. Make the layout predictable and consistent. Put common components such as navigation and search on the top of a page in a highly visible area.
Dyslexia
Use images and diagrams to support text
Don’t use large blocks of heavy text.
Some people with dyslexia have trouble focusing when reading on a screen. They can experience visual distortion where letters and words get jumbled. Large blocks of content can be intimidating. Use images to help illustrate the point and break up copy.
Align text to the left and keep a consistent layout
Don’t underline words, use italics, or write in capitals.
A consistent layout will help someone with dyslexia navigate a screen. It will help draw their eyes to relevant content and build familiarity and confidence as they go. Serif fonts have hooks at the end of letter strokes that can cause letters to run together — the same is true for italics.
Consider producing materials in other formats (for example, audio or video)
Don’t force people to remember things from previous pages — give reminders and prompts.
Many people with dyslexia experience anxiety about being able to read and retain the information given to them. They may feel pressure if they are presented with lots of information on separate screens. Some people are able to remember information better if they have listened to it or watched a video. Video, graphics, and photos help to create a visual memory.
Keep content short and simple, make clear prompts
Don’t rely on accurate spelling. Use autocorrect or provide suggestions.
Fewer words are better for someone who has trouble reading. Use bullet points to help guide a person with dyslexia through content.
People with dyslexia may find spelling and word order challenging. Tools like predictive text, autocorrect, and speech recognition can help them get things right.
Let people change the contrast between the background and text
Don’t put too much information in one place.
Many dyslexic people are sensitive to the bright, high contrast colours. They can make words swirl and blur together. Many people adjust their screen contrast or use coloured filters on their screen to help ease this symptom.
Memory & attention
Avoid tasks split across multiple screens
People with memory or attention disorders can be easily stranded when tasks or instructions are split across multiple screens.
If you must break your content up, be sure to clearly denote progress on each page, both what’s already been done, and what’s coming. When the task is complete, make this unmistakably clear.
Tweak, don’t redesign
Small, interactive changes allow you to address needed changes more rapidly, while creating less disruption and cognitive stress.
Explain unavoidable acronyms or jargon the first time they appear on any page
Don’t rely on people coming to your content with prior knowledge, be it institutional or contextual.
Avoiding acronyms and jargon wherever possible is best. When it cannot be avoided, define the term or abbreviation the first time it appears on every page, and then move forward with the truncated expression. People with memory or attention disorders may not retain that knowledge from day to day or page to page.
For each planned animation or interaction, ask, “If this effect was stronger (much faster, or bouncier, or swoopier), would it be disorienting, or make me feel motion-sick?” If the answer is yes, then rest assured plenty of people in the world”s threshold is already low enough to be bothered.
Remember we call them “readers”
Part of respecting the context of the web is remembering that a large portion of your audience is interested in reading content. Not watching, not immersing, not “experiencing”: reading. For every person thrilled by a video or animated chart, there’s another who would prefer a plain-text transcript.
Ask for consent
Provide controls on each individual element, allowing the person to decide whether they want any given video or animation to play and loop. Animated charts and infographics include a “skip to the end-state” shortcut. Any element that moves or animates needs to include a pause/stop button. Everybody’s triggers are unique: a movement that bothers one person might be fine with another, or might be fine on their laptop but difficult on their phone. Providing element-level control means the person can stop any particular piece that’s giving them trouble.
Physical
Deaf or hard of hearing
Write in plain English
Don’t use complicated words or figures of speech.
People who use American Sign Language may consider this to be their first language. They may consider English to be their second language. Sentence structure differs between these two languages and therefore content should be kept simple to make it easier for ASL users to read.
Use subtitles or provide transcripts for videos
Don’t put content in audio or video only.
People who are Deaf, deaf, or hard of hearing will need to access videos in a visual way. Do not rely on the people’s ability to lipread to understand what is being said. Videos should include subtitles, a transcript, or an American Sign Language interpreter — the more of these included the more people’s needs will be met.
Use a linear, logical layout
Don’t make complex layouts and menus.
People who have English as their second language may find it tiring or difficult to read lots of text. A logical layout can help people judge what content they need to read in order to complete their task.
Break up content with subheadings, images, and videos
Don’t make people read long blocks of content
American Sign Language is a very visual language — using visuals instead of text may be of benefit to these people, given the right context. Long blocks of text are difficult to read for those whose first language is not English. Headers help to explain the purpose of the copy that follows.
Let people ask for their preferred communication support when booking appointments
Don’t make telephone the only means of contact for people.
A d/Deaf or hard of hearing person may not be able to answer a phone call. Allow for people to specify how they want to be contacted. If a service requires a face to face interaction, design the interface to allow for the person to request communication support (and what kind of support that needs to be).
Low vision
Use a font with a high colour contrast and a readable font size
Don’t use low colour contrasts and small font sizes.
Make the default appearance of text easy to read so that people with visual impairments can take in the information (quicker), particularly if assistive technology is not available.
Publish all information on web pages
Don’t bury information in downloads.
HTML is the most accessible format because people can change the appearance of web pages to meet their needs — for example using high contrast colours or large fonts. The text can also be read aloud. Other formats often require extra steps and software to open, and can be harder to navigate and have less flexible display options.
Use a combination of colour, shapes, and text
Don’t only use colour to convey meaning.
Colour vision deficiency (colour blindness) is a common condition which makes it difficult to identify certain colours. This can make it hard to understand elements like buttons and graphs which rely only on colour to convey information. Use other signifiers like text labels or different styles of dashed lines in those cases.
Follow a linear, logical layout
Don’t spread content all over a page.
Users of screen magnifiers can miss content like side columns if they are not expected or well sign posted. Particularly if they use the tab key to move between links and form elements. Place features in a logical order where people would expect them to be.
Some people choose to enlarge text as well as or instead of using magnification features. The design should flex accordingly, showing a mobile, single column layout.
Put buttons and notifications in context
Don’t separate actions from their context.
When using a screen magnifier, it is disorientating for a person to hunt around the page for an element. Put things like help text, error messages, submit buttons, and notifications close to the thing they relate to.
Physical or motor disabilities
Make large clickable actions
Don’t demand precision.
Buttons with a small hit area can be frustrating for people with motor disabilities who may not be able to control a mouse or keyboard very well.
Give form fields space
Don’t bunch unique interactions together.
Having lots of actions near each other increases the risk of a person taking the wrong action by mistake.
Design for keyboard or speech only use
Don’t make dynamic content that requires a lot of mouse movement.
Some people with a motor disability may not use a mouse or may use an assistive technology that functions like the tab key on a keyboard. Make sure all content is accessible by keyboard only.
Design with mobile and touchscreen in mind
Don’t have short time out windows.
Using a computer can be tiring for people with motor disabilities. They may need to take frequent breaks. A short time-out period means they will probably have to start again after taking a break.
Provide shortcuts
Don’t tire people with lots of typing and scrolling.
It can be difficult for people who find controlling a computer hard to keep their place on long pages and form fields.
Screenreaders
Describe images and provide transcripts for video
Don’t only show information in an image or video.
People with severe sight impairments need a way of getting the information that visual elements on a page try to convey. They also need to know if there are any additional details they are missing. Provide text content and/or descriptions of: photos, illustrations, diagrams, graphs, animations, and videos so a screenreader can read it aloud. This is good for informing search engines too. Also use audio description in videos, either as a natural part of the narration or additional to it.
Follow a linear logical layout
Don’t spread content all over a page.
A screenreader takes people through a web page in the order they appear in the HTML code. This might not be the same as how they appear visually on the page. It can be confusing if things are announced out of context or in the wrong sequence. And a person’s flow can be interrupted because the element expected next, for example a submit button after an input field, is a lot later or earlier in the HTML, even though visually it is close by. Ensure that screenreaders move around pages in the correct order.
Structure content using HTML5
Don’t rely on text size and placement for structure.
A screenreader will usually read out text with the same voice regardless of font size, weight or other styling. Screenreaders will also not convey the visual arrangement of content on a web page, and what it implies.
To interpret a web page effectively, people need elements like headings, form labels and lists marked up correctly in HTML. Similarly, set the building blocks of the page (header, navigation, main content and footer) with landmark tags, so the structure can be announced audibly, understood and jumped to.
Build for keyboard use only
Don’t force mouse or screen use.
People who use screenreaders often cannot see a mouse pointer. Instead of a mouse, they use the keyboard to navigate, moving between elements such as links, form fields and buttons. Make sure that all the actions on the page can be started and finished using only a keyboard. This includes: closing notifications, getting help, controlling videos and submitting forms.
Write descriptive links and headings
Don’t write uninformative links and headings.
Screenreaders can read out a list of all the headings or links on a page. This enables the person to jump to the desired item without listening to all the content. Heading links need to make sense out of context — a list of “Read more” links is meaningless. Instead, describe the target section so a decision can be made about if it is the one required.