This resource with infographics covers best accessibility design practices for disabled users from these areas: low vision, deaf and hearing impaired, dyslexia, motor impairments and users on the autistic spectrum. It also covers users who rely on assistive technology, like screen readers.
This information was originally published by the UK Home Office on designing accessible services for different users.
The guidance is also available in a poster set available to download as a PDF (1.2mb).
1. Designing websites for users on the autism spectrum
Autism Spectrum Disorder (ASD) is an umbrella term for a range of conditions. Symptoms vary but relate to social interaction, communication, behaviour and interests. ASD affects how people perceive the world and interact with others.
Best practice
Use simple colours
The National Autistic Society talks in terms of low and high arousal colours. Using creams and pastel colours can reduce the risk of sensory overload, compared to bright and potentially distracting colours like yellow. Patterns and complex, embedded background images can detract from understanding.
Write in plain language
Autistic people are more likely to take phrases and expressions literally. Using plain English in all written content can help to counteract this.
Use simple sentences and bullet points
Make buttons descriptive
Ensure links are obvious and well-labelled so there’s no need for guesswork on the user’s part.
Build simple and consistent layouts
Make sure navigation menus are consistent in design, appearance and behaviour.
Avoid
Bright, contrasting colours in your designs
This will lessen the risk of sensory overload.
Figures of speech and idioms
Avoid metaphors, exaggeration, idioms, jargon and expressions that may have more than one meaning.
Creating a large wall of text
Autistic people are more likely to benefit from visual material. Provide visual alternatives (infographics, videos, charts, graphs) to break up text-based content.
Vague and unpredictable buttons
The user should not have to guess where a link will take them.
Complex, cluttered layouts
People on the autistic spectrum have heightened sensory awareness. They can feel overwhelmed by busy pages.
Movement or animated page elements
Unless these elements can be frozen by the user.
More information on how to design autism-friendly websites (National Autistic Society)
2. Designing websites for users who are deaf or hearing impaired
Many web professionals assume that deaf and hearing-impaired users have few web accessibility requirements. While certain things are obvious, like including closed captions, other considerations around literacy are often overlooked.
Best practice
Write in plain English
Some people who are deaf may prefer British Sign Language (BSL), over English, as their first language. And, sign language follows very different rules to standard written English and grammar. Reading age, comprehension and literacy rates vary within the deaf community as a result. You can help by using simple, plain English in all written content.
Use subtitles or provide a transcript for videos
Text transcripts and captions ensure all possible information is available to this audience.
Use a linear, logical page layout
Deaf and hearing-impaired users are more likely to rely on visual cues and headings to navigate.
Break up content with sub-headings, images and videos
Graphics and visual content can support understanding where text may not.
Let users ask for their preferred communication
Too many websites list telephone as the only communication message available.
Provide support when booking appointments
Avoid
Complicated language and figures of speech
Content only available in audio or video format
Complex layouts and navigation menus
Long blocks of written content
Making telephone the only means of contact for users
Audio or video content that plays automatically as a webpage loads
3. Designing websites for users with dyslexia
Dyslexia affects roughly 1 in 10 adults in the UK and is often associated with difficulty in reading and writing. It can also affect how people process or remember information, concentration span and time management skills.
Best practice
Use images and diagrams to support written text
Written content is not the best form of communication for dyslexic users. Alternative formats like infographics, tables, images and charts can improve overall understanding.
Align text to the left and keep a consistent layout
Both techniques improve readability.
Consider producing materials in other formats (i.e. audio and visual media)
Text-based content will not suit everybody.
Keep content short, clear and simple
Use the active rather than the passive voice, be concise and direct.
Let users adjust contrast between background and text
Sufficient contrast between background and text colour is important for readability. Dark text on a white background is best for clarity. Some dyslexic people will have their own colour preferences.
Avoid
Large blocks of heavy text
Underlining words
Format with bold instead
Making users remember information from previous pages
Relying on accurate spelling from the user
Web forms and content submission boxes should not place the onus on the user to spell correctly. Using an autocorrect fill, providing suggestions or drop-down options within a form can make it easier for dyslexic users.
Putting too much information in one place
Breaking up important content and presenting it clearly will help all users.
4. Designing websites for users with low vision
Low vision users may have partial sight in one or both eyes. They may suffer from poor acuity (blurred vision), tunnel vision, clouded vision and central field loss. It can also include those who experience colour blindness, who may have difficulty perceiving or distinguishing between colours. An ageing population means that the number of people who experience age-related sight loss is increasing.
Best practice
Use good colour contrasts and readable font size
Use a high colour contrast of 4.5:1 for written content (with the exception of logos, decorative, or larger than 14-18-point text which requires a contrast ration of 3:1. Font size of 16px (or 1rem) is generally considered readable.
Publish all information on web pages
Critical information buried in charts, videos or graphics may be lost.
Use a combination of colour, shapes and text
When used correctly, a combination of colour elements and shapes can enhance understanding and help guide the user to important content.
Follow a linear, logical layout
The more predictable and intuitive your content structure is, the likelihood of a user finding the information they need increases.
Put buttons and notifications in context
Partially sighted users may struggle to determine when an action is required of them or has been submitted. When a change is made, clearly alert users to that change.
Avoid
Low colour contrasts
Small font size
Burying information in downloads, external webpages or footnotes
Using only colour to convey meaning
Content being spread all over a page
Separating actions from their context
Buttons labelled with “Click here” and “More” do little to explain their purpose.
5. Designing websites for people with physical impairments
Physical impairment is a broad term which covers symptoms from a range of conditions. Specific impairments can include mobility difficulties, manual dexterity issues and hand tremors, for example, which can arise from a number of conditions from spinal cord injury to cerebral palsy.
Many users in this group will rely on assistive technology, or the tab key on their keyboard (rather than a mouse) to navigate through a website. It’s therefore critical that your website’s functionality can be controlled exclusively by keyboard input.
Best practice
Make large clickable actions clear
Format hyperlinks clearly and make it known when an area, button or space is actionable.
Give clickable elements space
The smaller the button or hyperlinked text, the finer the motor skills you are demanding of your users. This is particularly a problem when designing for mobile.
Design for keyboard or speech only use
Not everyone using your website will be using a mouse. Make sure that links, buttons and other controls have appropriate labels that can be picked up by speech recognition software.
Design with mobile and touchscreen in mind
A good discipline that will help you consider users with physical impairments from the start.
Provide shortcuts
It can take a long time for users tabbing through your website to process a page of web content. Including shortcuts is a considerate way to make their life easier.
Avoid
Demanding precision with clickable content
Bunching interactions together
Dynamic content that requires a lot of mouse movement
Short time out windows for forms
Tiring users with lots of typing and scrolling
6. Designing websites for users of screen readers
Many disabled people use screen readers to process the web page for them, converting digital text into speech. Screen readers allow users to hear content and navigate via a keyboard. They are often used by blind people and users with a cognitive or learning disability.
Best practice
Describe images using alt-tags
Attaching alt text to every relevant image you include will offer screen reader users greater understanding and visualise the webpage. Without alt text, images are read simply as “image” or sometimes the file name (GF7888.jpeg) will be read aloud.
Provide transcripts for video
Any important information within a video (which is not included within the audio or narration) will get lost. Some screen reader users may also prefer a transcript over listening to video audio.
Follow a linear, logical layout
If your website requires any user to jump around the page to understand its contents, they will quickly tire and leave.
Structure content using HTML5
Semantic html assigns importance and hierarchy to content. It gives all users an indication of what role (<header> <nav> <footer>) the content plays in the page layout.
Build for keyboard use only
Write descriptive links and headings
Avoid
Only showing information in an image or video
Spreading content all over a webpage or across multiple webpages
Relying on text size and placement for structure
Forcing mouse or screen use
Writing uninformative links and headings
Related services
To learn more about accessibility, take a look at our digital content accessibility workshops:
Introduction to accessibility
Content accessibility training
Bespoke content accessibility training