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.

You can also share and download this guide as a series of infographic posters designed by Scope (PDF). This information was originally published by the UK Home Office and released as a set of posters on designing for accessibility.

 

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.

View poster for the autistic spectrum (PDF)

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

People who were born deaf may not be able to read written English very well. 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

View poster for the deaf and hearing-impaired (PDF)

 

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.

View poster for dyslexia (PDF)

Learn more about creating more dyslexia-friendly content from the British Dyslexia Association 2018 guidelines (PDF)

 

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.

View poster for low vision (PDF)

 

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

View poster for physical and motor impairments (PDF)

 

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

View poster for screen readers (PDF)

The guidance is also available in the original poster set from the UK Home Office, available to download as a PDF (1.2mb).