Accessibility guidance for:
-
Design
What graphic and interaction designers need to do to make digital services accessible.
Use the NHS accessibility checklist for:
- a fuller list of WCAG 2.2 success criteria and guidance for levels A and AA
- some success criteria and best practice for level AAA
Make sure your service meets WCAG 2.2
For: Design, Development, Product and delivery, Testing
WCAG 2.2
The Web Content Accessibility Guidelines (WCAG) 2.2 add 9 new "success criteria" for improving web accessibility. 6 of the new criteria are graded at the A and AA level, which means they're a requirement for websites and mobile apps in the NHS. Learn more about the WCAG 2.2 new accessibility requirements and criteria.
See the full list of design system changes to meet the requirements.
Avoid accessibility widgets
For: Design, Development
Accessibility widgets are plugins that display as buttons, toolbars or overlays.
The widgets let users adapt the display to make it easier to read the text or have it read out to them. Some widget providers claim they make your website accessible.
Using widgets to make your website accessible
Accessibility widgets cannot make a website fully compliant with accessibility standards and they cannot protect you from legal action.
Using widgets to let people adapt the display to make it easier to read
Only explore adding extra functionality if you have evidence that both of the following apply:
- your users need to adapt the interface (for example, change the text size or colour) or to have the text read out to them
- they do not have the skills or software to do it through browser settings or assistive technology
If you add this sort of functionality, test it to make sure it does not cause problems for any of your users. Please share your research findings via the GitHub issue for overlays, widgets and banners.
The problems with overlays or widgets
Widgets typically sit in the banner or a corner of the page, sometimes obscuring key functionality. They often use icons that can be difficult for users to understand.
When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users cannot get past. People find them confusing and unhelpful.
People with access needs often use their preferred assistive technologies across all websites. Widgets only meet some access needs and only deal with one part of a user journey. They cannot hand over from one system or site to another. Widgets can also cause problems for people who use assistive technologies.
The best way to help people with access needs
The best solution for most people with access needs is a well-designed, well-structured website or service that is:
- built from the bottom up with accessibility-tested code and designs, like the NHS production code and design system
- tested with users with access needs (find out more in the section on user research)
Define page structure
You can help people who use assistive technologies understand the structure of the page and navigate it by including "landmarks" (hidden labels for sections of the page). Landmarks also help users looking at multiple pages skip repetitive sections.
Use ARIA landmarks to identify the regions of a page.
Landmarks you need
Make sure that you've defined these landmarks if your page includes them:
- banner: at the top of the page, usually contains the logo
- navigation: elements that link to other pages, usually in the banner
- search: the search field, usually in the banner
- main: contains the main content of the page. It should be unique on each page.
- contentinfo: the footer. This is shared across pages.
You'll need to define headings, lists and data tables in content areas too.
Follow the header and footer components in the service manual.
Define skip links
Use a skip link to help keyboard-only users skip to the main content on a page.
Also add a skip link at the start of a long list of links or form fields (for example, over 20 checkboxes in a filter). This lets people who use keyboard-style access with a switch or head-wand skip to the end and avoid having to keep pressing the same key.
Skip links can be invisible by default, but must be very visible when focused.
Follow the skip link component in the service manual.
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.
You can use a web developer toolbar (Chrome or Firefox) to see the overall heading structure of the page.
Read more about styling headings in the typography section of the service manual.
Check colour contrast
It's easier for people to read and interact with content if you use colours that contrast well. The NHS meets at least level AA for contrast and we aim for AAA where possible.
Find out more about colour contrast in the accessibility section of the colour page in the design system.
Define focus styles
For: Design
Everyone should be able to access all interactive components with a keyboard or a similar device. It must be obvious to them which element or link is the current focus position on the page. The browser default is generally not good enough.
Make sure that the focus is clearly visible. You can do this by adding something, like an outline or icon, or changing the colour of part of the component. Check the colour contrast.
We recommend the focus state styles in the service manual.
Discuss any custom components
For: Design, Development
The components in the service manual are well tested and ready to use. Before you design a new component, please test an existing component and show that there's a clear need for something new.
Discuss any new components with other members of your team. You need to make sure that:
- you have good evidence that the new component is the best way of meeting the user need
- it will be accessible
- you test it from a technical and usability point of view
- you can maintain and update it
- you share what you've learnt
Write good link and form control names
Links or buttons need 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. 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.)
Give grouped items a "legend". You can see examples in the checkboxes and radios components in the service manual.
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 the error message and error summary components in the service manual. They've been tested for accessibility and contain links to useful GOV.UK guidance on writing good error messages.
Give users time to read and act
For: Design, Development, Testing
If you have set a time limit for inactivity (for example, on a multi-step form), make it at least 20 hours.
If you use 3rd party content that has a time limit, it should warn users clearly how much time they have left and let them extend or turn off the time limit.
There are exceptions to this when the time limit is essential, for example, for an online test or real-time event.
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
Do not include text in images
Users need as much information as possible in text format, so that they can adjust its size, spacing or formatting.
Do not include text in graphical (raster) formats like PNG, JPEG or GIF. They do not work well when users zoom in. Instead put text in HTML (styled with CSS) or use SVG.
This does not apply to logos.
Use alternative text for images in content
People who cannot see a meaningful image need an alternative to understand the content. You need to add "alt-text" to explain what's in the image. Alt-text is not usually visible but is read out by screen readers or displayed if an image does not load or if images have been switched off.
You can see what alt-text an image has by viewing it with Chrome's Web Developer toolbar.
Informative images
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 screen readers usually announce that.
Keep alt-text to a sentence or 2 and ideally under 125 characters including spaces. If there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. (For example, the NHS website team is testing long descriptions to describe images of conditions appearing on a range of skin tones.)
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. 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.
This example has a caption underneath the image as well as alt-text. Read about captions and how they work with alt-text in the images component.
If you have a complex image that you cannot describe in short alt-text (such as an infographic), include a longer description in some other way. Find out how to provide a long description in our skin symptoms guidance.
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
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: (alt="").
Use alternative text for functional images
For: Design, Development, Testing
Some images are "functional". That means that they trigger an action. If people can't see the image, they need an alternative.
Use "alt‑text" for images like PNG or JPEG. W3C has information about how to deal with different kinds of functional image, including logos.
The NHS website (nhs.uk) prefers inline SVG files for functional images. SVGs don't have an alt attribute. Instead we use aria-hidden="true" and, if there is no link text, "visually-hidden" in span tags.
For some common NHS examples of SVG functional images, see the close and search icons in the header component in the service manual. The action link is an example with link text.
Make video and other multimedia content accessible
For: Content, Design, Development, Testing
Consider using video as well as text. Some people find it easier to understand.
With all video and animation, 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
To meet the accessibility regulations for public sector organisations, most new videos you've published or updated after 23 September 2020 must have these 3 kinds of alternative content.
Audio description
Audio description provides content for people who are blind or cannot see the video well. It is additional commentary that describes what's happening on screen in between narration, including any text, graphics or scene changes in the video.
You must include an audio description for any key information that's visible on the screen but not part of the soundtrack, for example diagrams without a verbal description. If all the visual information in the video is included in the regular soundtrack, you do not need an audio description.
If the video says the same thing as the page content, you do not need an audio description but you must make it clear that the video is an alternative to the text content. Our experience tells us, however, that even in these cases audio description can be valuable to blind people, some of whom do not read the page content.
For audio description, you can do 1 of the following:
- publish an alternative version of the video with audio description added in relevant places
- add a separate audio description track (if the media player supports this)
If you have a separate audio description track, make sure it includes the audio description voice-over and the original video audio (mixed and synced together). The audio description track must be the same length in seconds as the main video’s audio.
Closed captions (sometimes called subtitles)
People who are Deaf or have hearing loss may find captions helpful. Closed captions are a text alternative to audio information in video and animations that you can turn on or off.
Use closed captions rather than subtitles. They look similar but subtitles are only a text alternative for dialogue, while closed captions are a text alternative for all the audio, including important background noises.
Closed captions must include:
- the words people say
- who is speaking, if it's not obvious, or where they are (for example, off-screen)
- important sounds like music, laughter or a door slamming
Check that any auto-generated captions are accurate and synchronise them with the visual content.
Use a contrast ratio of 4.5:1 for the text. If possible, use a fully opaque (no transparency) coloured box behind the text. We recommend a black background with white text. Find out more about using colour and accessibility, including colour contrast.
For caption fonts, follow the typography guidance in the design system.
Transcript
Transcripts provide audio and video content for people who:
- are both Deaf and blind
- people who process text information better than audio and visual information
It's best practice to provide a transcript for a video but it is not required to pass WCAG2.1 AA. You must, however, provide a transcript for any audio-only content, such as a podcast.
A transcript should include all the dialogue, relevant sound effects, and audio description content.
There are rare exceptions, and you do not have to meet these requirements with videos published before 23 September 2020.
To meet an extra AAA requirement, add British Sign Language (BSL) to pre-recorded video content. Find out about the BSL quality assurance standard.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: April 2024