Accessibility issues
Common accessibility issues
- Last reviewed
- 14 September 2026
- Owner
- DesignOps
Learn how common accessibility issues affect users and how to prevent or fix them.
Many DfE products and services have similar accessibility issues. You can prevent many of these issues by following accessible and inclusive design practices.
This guidance covers common accessibility issues, how they affect users and how to prevent or fix them.
Error messages
Create error messages that clearly explain what has gone wrong and how the user can fix it.
Follow GOV.UK guidance on error messages.
Non-descriptive error messages
Generic or unclear error messages can leave users unsure what went wrong or how to fix it.
Do
Use a clear message that describes the problem and tells the user how to fix it.
Do not
Use a generic or ambiguous error message that does not explain what went wrong.
Errors from a server or database
Server or database errors can contain technical information and may be difficult for users to understand.
Do Catch technical errors and provide a clear, user-friendly message.
Do not Do not show database-generated or technical error messages to users.
Error messages not linked to the input
Link error messages to the relevant inputs so users can find and correct errors. This is especially important for screen reader users, who need to know which input each message refers to.
Do Link the error message to the input that contains the error.
Do not Do not use plain text that does not identify the input containing the error.
Mismatched error summaries
Error summaries list all the errors on a page. They’re usually placed at the top of the page and help users quickly identify and correct any errors.
Error summaries are particularly useful for screen reader users, as they provide a clear and concise list of all the errors on a page.
Do Link each error to the relevant input and describe the problem clearly.
Do not Do not have different error messages in the summary and against the input.
Headings
Use headings to create a logical structure that helps users understand and navigate your content.
Follow GOV.UK guidance on headings.
Check the structure of your pages with the HeadingsMap tool.
Skipped heading levels
Skipped heading levels can confuse users and create an incorrect heading structure.
Use headings in a logical order. For example, follow an H1 with an H2, then an H3.
Do Use a logical heading structure which clearly shows the hierarchy of the page.
Do not Do not skip heading levels, as this can make content harder to navigate and creates an incorrect heading structure.
Incorrect heading structure
Use semantic HTML headings in the code to give content a clear structure. This helps screen reader users navigate the page and understand how the content is organised.
Follow GOV.UK guidance for headings, which recommends using H1 to H3. If your content needs a heading below H3, consider redesigning the page.
Do Use correct HTML markup (H1, H2, H3) for headings.
Do not Do not style paragraphs or other elements to look like headings.
Images, charts and alt text
Make sure people with vision access needs can understand the information in your images and charts.
Follow GOV.UK guidance on accessible images.
Wrong alt text
Alt text should describe the purpose of an image or the information it conveys.
Do Write alt text that accurately describes the image when the image provides useful information.
Do not Do not use filenames or misleading descriptions as alternative text.
Charts and data
Make sure information in charts can be understood without relying on colour alone. This is especially important for users with colour vision deficiency (sometimes called colour blindness).
Use the DfE charts guidance.
Do Use labels and other ways of communicating the information in a chart.
Do not Do not use colour alone to distinguish data or communicate meaning.
Links
Use clear, descriptive link text so users know where each link will take them. Screen reader users may navigate by viewing a list of links, so each link should make sense on its own.
Follow GOV.UK guidance on links.
Repetitive links
Sometimes you need to repeat links, such as links to actions in a table.
Add visually hidden text to give each link more context for screen reader users.
This is particularly useful when designing for users to check their answers.
Do Use hidden text to add extra information for the edit link.
Do not Do not use generic content without additional context.
Non-descriptive links
Make each link unique and descriptive so users know where it will take them.
Do Use inline concise link text that describes the destination or action.
Do not Use generic link text or link an unnecessarily long sentence.
Status changes to content
When JavaScript updates page content, sighted users can see the changes.
You also need to tell users about these changes if they use a screen reader or cannot easily see the page.
For example, a spinning loading indicator may show sighted users that a page is loading, but screen readers may not announce this.
How to prevent issues
Use ARIA live regions to tell screen reader users when content changes. Choose the right live region for the type of change.
Incorrect use of ARIA can make a service harder to use. Contact the DesignOps team if you need help implementing ARIA live regions.
Find more information about ARIA live regions on the Mozilla Developer Network.
Changes to content not provided to screen readers
Do Use ARIA attributes to tell screen readers about content changes.
Do not Do not rely on icons alone to alert users to changes on a page.
Colour
Make sure people can access and understand your content regardless of colour. This is especially important for people with low vision or colour vision deficiency.
DfE digital services should follow GOV.UK guidance for colour.
If your campaign site uses a different colour palette, get support from DigiComms (open DfE intranet) (link opens in new tab) or the professional body for government communicators.
Text contrast
Low text contrast can make content difficult to read, especially for people with sight impairments or colour deficiencies.
Normal text should have a contrast ratio of at least 4.5:1 and large text should have a ratio of at least 3:1.
Check your colour contrast.
Do Use foreground and background colours with sufficient contrast.
Do not Do not use light text on pale backgrounds that makes content difficult to read.
Non-text contrast
Important non-text elements, such as controls, should have sufficient contrast against the background.
The minimum contrast ratio for non-text elements is 3:1.
Check your colour contrast.
Do Make sure buttons and other important elements have sufficient contrast against the page background.
Do not Do not use colours that make it difficult to identify an element against a background.
Focus states
Focus states show which interactive element has keyboard focus, such as a link or form input. They're especially important for keyboard users and people with low vision or colour vision deficiency.
Changing the colour or style of focus states can make them harder to recognise and can cause inconsistency across DfE services.
Use GOV.UK Design System focus states and GOV.UK Frontend.
Do Use the default GOV.UK Design System styling for focus states.
Do not Do not change the colour or style of focus states.