Accessibility helps everyone have an equal opportunity to be included in your business. This includes making emails, digital documents, websites and social media more accessible.
But knowing where to start can be difficult. In this guide we have outlined the basics of digital accessibility. We’ve also included links on where you can find out more on each topic.
Header tags
Headings and sub-headings help structure your content. This helps all users easily scan the page and see what information is available. And content broken down into sections with headings is more appealing to read than a large wall of text.
The use of HTML header tags is very important for assistive technologies. Blind or partially sighted people rely on tools like screen reading software to read out digital content. Without header tags it’s very difficult for these users to find the information they need.
In Microsoft office, these are called ‘heading styles’. You can find them in the top banner.
Header tags need to be used properly and in a logical order. This allows screen reader users to navigate the content and decide to skip sections. Or jump to sections that are most useful to them.
HTML heading tag structure and website accessibility
Fonts and readability
Fonts are an important part of how visually accessible information is. The more readable your font is, the easier it is for people to understand your message.
Font choice can affect people who have visual impairments and learning difficulties. There isn’t a single best font that will suit all user needs. But some fonts are easier to read than others.
Fonts with simple, familiar shapes where each character is distinct from on another are the most readable. These include sans-serif fonts like Arial. And serif fonts like Times New Roman.
The basics of font accessibility and readability
Styling and colour
Fonts should not be highly stylised. There should enough spacing between letters so they don’t connect. A font size of 12pt to 14pt improves readability for everyone.
People with dyslexia are sensitive to the use of pure black fonts on pure white backgrounds. This can also cause eye strain for most users.
Dyslexic friendly fonts and colours
Capitalisation
You should limit the use of capital letters as it affects readability. We recommend you avoid:
- starting each new word with a capital letter (like in headings)
- capitalising all the letters in a word
Writing a word in all capital letters affects screen readers. It can treat the word as an acronym and read out each individual letter. For example, ‘contact us’ capitalised is read out ‘contact U S’.
Italics and quotes
Avoid using italics. It can make text harder to read for people with learning difficulties.
Italics are sometimes used for quotes. It is recommended that on webpages you use the HTML quote element <blockquote> instead.
This will indent the text on a new paragraph
Screen readers will also tell users that the text is a quote.
In Office documents, you can indent and bold the quote to make it visually stand out. Make sure you include the name of the person quoted. If it’s anonymous, you can include, for example, ‘survey participant’ at the end. This helps identify the text as a quote if you cannot see the formatting.
Using plain English
Writing your content using plain English keeps it concise, easy-to-understand and jargon free. It’s used by government and health organisations.
Benefits of using plain language include:
- it’s faster to read
- helps people who have lower literacy levels
- helps non-native English speakers
- is more accessible to people with learning difficulties
The easier your content is to read, the more information you can get across to users.
How to improve your writing with plain English
Colour contrast
Colour contrast is the difference in brightness between the foreground and background colours.
People with vision impairments may have difficulty seeing text that does not have enough contrast. People with colour blindness may not be able to see some colours at all.
You should always think about the combination of colours you are using. We recommend that you always use tools to check colour contrast. This makes sure you’re legally compliant with accessibility standards.
Colour contrast and accessibility
Images and alt-text
Image alt-text is a short description that you add to an image. It’s not visible on the page but read out by screen readers. It’s very important for digital accessibility. This is because it allows people using screen readers to understand what the image is about. You should add alt-text to images:
- in your cms (this appears in the HTML code of the webpage)
- in Office documents, like Word and PowerPoint
- on your social media platforms. Twitter, Facebook and Instagram let you add alt-text on posts.
The descriptions used in alt-text should be concise and helpful. Irrelevant alt-text creates a bad user experience for screen reader users.
How to write better alt-text descriptions for image accessibility
Video content: subtitles, captions and transcripts
It is important to provide text information to users who are unable to hear or understand your audio content.
Captions are a text version of the speech and non-speech audio information needed to understand the content. This includes sound effects. They play along with the audio or video, and are shown on screen.
Transcripts are a written version of the audio of a video or audio file. They are separate from the file and can be read at any time.
Subtitles only translate the speech on-screen to text. Unlike captions, they do not translate sound effects.
Captions, subtitles and transcripts are important for accessibility. They are helpful for:
- people with hearing impairments
- people who are learning a new language
- people who are in noisy environments
A guide to using subtitles, captions and transcripts for accessibility
Hyperlink text
Hyperlink text allows people who use screen readers to understand the purpose of a link. And where it will take them. When a screen reader reads a web page or document, it will read the hyperlink text aloud. This helps the user understand what the link is and if they want to follow it.
Well written hyperlink text will help all users navigate your content more easily. If the hyperlink text is not descriptive, the user may not be able to understand what the link is. Or why they should click it. This can make it difficult for them to find the information they need.
How to write better link text for accessibility
Keyboard-only navigation
You should be able to navigate your digital content with only a keyboard. Some disabled people will not be using a mouse or trackpad. And some assistive technology will only be a single device, like Head/Mouth Stick Keyboards.
Keyboard users typically use a single button to navigate through interactive elements. This includes links. They rely on clear focus indictors to show which element of the page they’re interacting with.
Clear visual indictors are also important for users who use voice commands for digital navigation.
Emails
Making your emails accessible to all customers, clients, and employees is important. They will access their emails in different ways. Some might use a screen reader, while others might use magnification.
Best practices for more accessible emails include:
- relevant subject lines
- use of headings
- accessible font colours and styles
- alt-text on images
- including a plain-text version
How to make your emails more accessible
Social media assets
By making your social media posts more accessible, you’re reaching a wider audience. The overuse of GIFs, emojis, and special characters adds barriers to screen reader users. And posts using figurative language and metaphors can make messages harder to understand.
Helping include disabled people shows your business values them. And that you value their input in your campaign.