Content: accessibility guidance
What content designers, writers and editors need to do to make digital services accessible.
Write content that's easy to understand
Clear content helps everyone and it's the most important thing you can do to make things accessible. It will help more people than any other accessibility requirement.
Set page titles
A good page title helps users find what they want and recognise they're in the right place. It's the link that shows in search results and the first thing a screenreader will read out when the user lands on a page.
Each page title must be unique and descriptive. Keep it concise and consider putting important keywords near the beginning.
Best practice for page titles
Best practice is generally: Page name – Site name
For example: Achalasia – NHS
The first element (here "Achalasia") is the main heading of the page.
If you can, use templates to keep things consistent and use your content management system to generate what comes after dash.
Use headings correctly
Everyone relies on meaningful headings to navigate the page but they are especially important for some people with access needs. Make sure your headings reflect the page structure.
Structure headings for accessibility
The H1 is the same as the page title. You should have only 1 H1 on a page.
Each main section of your page should start with an H2 and each sub-section of an H2 with an H3. It is possible to have sub-sub-sections which start with an H4.
With each heading, ask yourself if it's a sub-section of the previous heading. If not, it should be at the same level as (or higher than) the previous section.
Make sure that headings follow the correct "nesting" order and don't skip levels. The structure of the page is the key thing, not the size and style of the text.
Read more about styling headings in the typography section of the service manual.
Write good link and form control names
Links needs to make sense out of context as some people experience them that way. Each link should clearly describe where it will take you. For example: "Find your nearest A&E".
How to write good link and form control names
- Ideally link text should match the heading of the target page. If the target page has the heading "Sleep and tiredness", that's good link text.
- If the target page heading is too long, shorten it but use words from it so that users can predict where the link will take them.
- Avoid ambiguous phrases such as "click here", "read more" and "find out more". It's OK to say: "Read more about how to deal with stress."
- Avoid having links or buttons open new windows or tabs. If you need to open a link in a new window, say this in the link phrase. For example, "Link name (opens in new window)".
- If the link goes to a document, include the file type and size in the link phrase. For example: "Link name (PDF, 200KB)".
Using the same link text for multiple links
You can use the same text for multiple links when they're in a good structure. The table row headings together with the link text must make the meaning clear.
There's an example in the summary list component in the GDS design system. At the end of each row is a link that says: "Change". The context makes it clear what "Change" refers to.
Label form fields clearly
Make sure that every form field has a label that tells users what information they need to enter.
More about labels
Put the label next to the form field so that the user is clear which field it relates to.
Generally the label should be visible. (There are exceptions. For example, there's a hidden label "Search the NHS website" on the search box in the NHS.UK header. It doesn't need a visible label because people can see the search icon and the word "Search" in the box.)
To test the code is correct, you can usually click on the label and the field should be focused by the browser. Otherwise, check there is a "for" attribute on the label and that it matches the "id" attribute of the field.
Highlight errors in forms
Make sure that error messages clearly describe what went wrong and how to fix the problem.
Include an error message wherever there's a problem with the input and check that it's visibly obvious that the message is connected to that input.
If you have an error summary at the top of a form, check that each error in the list has a link that moves the focus to the relevant form field. This helps users who rely on keyboard navigation.
Use alternative text for images in content
People who can't see a meaningful image need an alternative to understand the content. You need to add "alt-text" to explain what's in the image.
You can see what alt-text an image has by viewing it with Chrome's Web Developer toolbar.
The content of the alt-text depends on the image and its context. If the image is part of the main content of the page (not a functional image - one that triggers an action), use the alt-text to describe the image in a way that makes sense in the context.
You don't need to explain that it's an image because screenreaders usually announce that. Keep alt-text to a sentence or 2 and no longer than 250 characters.
Imagine you were reading the page out to a friend. How would you describe the image?
This is an image from the bullous pemphigoid page on the NHS website (nhs.uk). It comes under a heading "Check if you have bullous pemphigoid". The alt-text is: "Lots of sore red patches with small blisters spread across white skin on a woman's chest." It explains what users can see in the picture.
The caption underneath the image assumes that the user can either see the image or read the alt-text. It shouldn't duplicate the alt-text. Instead, use it to explain why the image is there and what you want users to conclude from it - for example, how serious their symptom is or what stage their condition has reached.
Here's another example. The alt-text is "Small red spots on white skin". The caption explains that that's how chickenpox starts.
If you have a complex image that you can't describe in short alt-text (such as an infographic), include a longer description in some other way. You can use an expander, for example, underneath the infographic with a text explanation.
If your image has text which conveys its meaning, follow the guidance on functional images. An example would be a link to a health app which includes a brand image and the name of the app. The app name says the same as the brand image, so the image doesn't need explaining.
Decorative images are there to attract users' attention or motivate them, but they don't help users understand the topic. An example might be a bowl of fruit on a healthy eating page.
If your image is decorative, give it a null text alternative like this: (
Use tables to show relationships between data
Tables make it easier for users to understand logical relationships between bits of data or information.
Only use tables when there is a relationship between the "header" cells and the "data" cells in the grid. Assistive technologies announce the header with the data it refers to.
Example of good table layout
Here is an example from the tables component in the service manual.
|Skin symptoms||Possible cause|
|Blisters on lips or around the mouth||cold sores|
|Itchy, dry, cracked, sore||eczema|
|Itchy blisters||shingles, chickenpox|
Screen readers would read out the last row as: "Skin symptoms: itchy blisters. Possible cause: shingles, chickenpox".
Make video and multimedia accessible
Consider using video as well as text. Some people find it easier to understand.
With all video and multimedia, make sure that:
- the interface is accessible for keyboard and screen reader users (including play/pause buttons and the location slider)
- if the user cannot see or hear it, they can still understand it
If you are using a video on its own (in other words, if you don't repeat the video content elsewhere on the page), it must have a transcript. The transcript should include all the dialogue, relevant sound effects, and visual content.
If the video includes dialogue, it should also have captions.
If the video relies on visual content to convey information (for example, diagrams without a verbal description), it's best to include an audio description. This isn't essential but you must have a transcript.
Videos which supplement page content
If the video says the same thing as the page content, you only need captions.
Make it clear that the video is an alternative to the text content. Put the video near the top of the page so that people don't have to work through the text to find it.
Do not rely on colour or position alone
Do not rely on colour to convey meaning, for example, an instruction. To communicate with people who cannot see well or distinguish colours, you may need to:
- word things differently
- use more than one visual cue, for example, text and an icon as well as colour
Do not rely on people understanding instructions that refer to the position of page elements.
Why you should not say "Press the red button on the right"
If someone is:
- "colour blind", they may not be able to tell the difference between red and green
- zoomed in, the button may not be on the right
- using a screenreader, they may not see the colour - and position, for them, is simply up or down
Get in touch
Updated: July 2019