All websites, apps, and other digital products and services must meet the W3C Web Content Accessibility Guidelines (WCAG) 2.1 at a conformance level of AA. This satisfies the legal requirements we must comply with under the Equality Act 2010 and in countries where there is legislation on accessibility. When using buttons with images or backgrounds, make sure that colors are accessible. They must pass the AA contrast check with a ratio greater than 3.1:1.
You can check your colors using the plugin Stark - Contrast checker.
Understanding accessibility means we can build websites that work for everyone, whatever their access needs. These simple do's and don'ts explain how you can make your websites accessible for different access needs.
Designing for users on the autistic spectrum
Do…
Use simple colours
Write in plain language
Use simple sentences and bullets
make buttons and links descriptive
build simple and consistent layouts
Don't…
Use bright contrasting colours
Use figures of speech and idioms
Create a wall of text
Make buttons vague and unpredictable
Build complex and cluttered layouts
Designing for users of screen readers
Do…
Describe images and provide transcripts for video
Follow a linear logical layout
Structure content using HTML5
Build for keyboard use only
Write descriptive links and headings
Don't…
Only show information in an image or video
Spread content all over a page
Rely on text size and placement for structure
Force mouse or screen use
Write uninformative links and headings
Designing for users with low vision
Do…
Use good colour contrasts and a readable font size
Publish all information on web pages
Use a combination of colour, shapes and text
Follow a linear, logical layout
Put buttons and notifications in context
Don't…
Use low colour contrasts and small font size
Bury information in downloads
Only use colour to convey meaning
Spread content all over a page
Separate actions from their context
Designing for users with dyslexia
Do…
Use images and diagrams to support text
Align text to the left and keep a consistent layout
Consider producing materials in other formats (for example audio or video)
Keep content short, clear and simple
Let users change the contrast between background and text
Don't…
Use large blocks of heavy text
Underline words, use italics or write in capitals
Force users to remember things from previous pages - give reminders and prompts
Rely on accurate spelling - use autocorrect or provide suggestion
Put too much information in one place
Designing for users with physical or motor disabilities
Do…
Make large clickable actions
Give form fields space
Design for keyboard or speech only use
Design with mobile and touchscreen in mind
Provide shortcuts
Don't…
Demand precision
Bunch interactions together
Make dynamic content that requires a lot of mouse movement
Have short time out windows
Tire users with lots of typing and scrolling
Designing for users who are deaf or hard of hearing
Do…
Write in plain language
Use subtitles or provide transcripts for videos
Use a linear, logical layout
Break up content with sub-headings, images and videos
Let users ask for their preferred communication support when booking appointments
Don't…
Use complicated words or figures of speech
Put content in audio or video only
Make complex layouts and menus
Make users read long blocks of content
Make telephone the only means of contact for users
Designing for users with anxiety
Do…
Give users enough time to complete an action
Explain what will happen after completing a service
Make important information clear
Give users the support they need to complete a service
Let users check their answers before they submit them
Don't…
Rush users or set impractical time limits
Leave users confused about next steps or timeframes
Leave users uncertain about the consequences of their actions
Make support or help hard to access
Leave users questioning what answers they gave