Resolving common website accessibility issues
Our experts discuss some of the most common website accessibility issues and how to resolve them.
How can websites resolve accessibility issues?
In an analysis of over 1,000 public sector web pages, we encountered a range of near to 50 different issues. The most common errors and alerts we encountered related to colour contrast and missing or redundant fields on the page. Our experts in the Digital Services team offer recommendations on how to avoid or improve these commonly occurring issues.
Very low contrast
Use a colour contrast checker (there are many of these available online) to ensure the text and background colours have enough contrast. Typically, there should be a contrast ratio of at least 4.5:1 between the foreground content and the background content for paragraph text and 3:1 for larger font sizes of 16+. This ensures adequate colour contrast so that the text is easily discernible against the background and links stand out from the rest of the text.
Missing form labels
A ‘form label’ is an HTML element used in forms to describe what the fields and controls in the form are for. If a form does not have the properly associated text label, then it may not be accurately presented to screen reader users. Labels need to describe the purpose of the form control (or text field or dropdown menu as the case may be).
If you have a missing form label for a visible form control, either use a form-building plugin to add the labels from the website CMS, or use the <label> element when hand-coding forms. You should add labels to all form elements, including input fields, buttons and checkboxes.
Redundant or empty links
Redundant links occur when links next to each other take users to the same address. This can be problematic as it creates a repetitive, ‘busy’ experience that can be a confusing and unsatisfactory experience for screenreader users. Remove any redundant links by trying to combine them into one link.
Empty links are links without any text. This can be confusing to screen reader users as the purpose of the link will not be presented to the user. A common empty link issue occurs when social media icons aren’t assigned any text. Add descriptive text to empty links so users will know where the link goes and will be able to navigate more easily.
Another issue that can arise with links is suspicious link text, like ‘click here’. This is vague and doesn’t give any context about where the link goes. Replace these terms with more descriptive text.
Redundant title text
A redundant title text error occurs when the title attribute text in the code is the same as the text for the heading seen on the page. Either modify redundant titles so they provide more information and are more descriptive, or simply remove the title attribute from the code.
Very small text
The small text error is very straightforward. When text is too small to be read by people with visual impairments, you need to increase the font size of the text on the website. The WCAG 2.1 AA standard requires a minimum font size of 14 pixels for regular text and 18 pixels for large text.
Noscript elements
A ‘noscript element’ is an HTML element that provides alternative content to display when JavaScript is not enabled in a user’s browser. You should provide alternative, accessible content to be displayed to all users that have JavaScript enabled (which will be the majority of users).
Alternative text issues
Alternative text (or ALT text) is text assigned to an image on a page that describes the appearance or function of that image. Some of the ALT text-related issues we came across included ALT text that is too long, suspicious or redundant, nearby images having the same ALT text or no ALT text altogether. It’s a simple thing to add in that can help screen readers understand and describe the images to users.
When writing ALT text for your core or important images, use clear, concise and descriptive language. Avoid jargon or being too technical. The aim is to make it understandable with a screen reader.
Images used for decorative purposes should still have ALT text but this should be what is referred to as ‘null’ ALT text so that the image is ignored by screenreaders. Null ALT text is coded as ALT=.
Empty buttons
Empty buttons are buttons that contain no text describing the function of the button in the code. Images can also be buttons. If an image button is ‘empty’, it means the image contained in the button is missing ALT text.
Button text is important for screen reader users because it provides information about the function of the button. Without text, screen reader users will not be able to know what the button does, which can make it difficult to use. In general, buttons should not be images because this impedes the increasing of font size, since the text is in the image. Instead, copy in buttons should be text-based HTML.
To amend this issue, find the button that is being flagged and add descriptive text to the <button> element in the HTML code.
Empty and possible headings
Headings on pages are useful for navigation and help structure the content of a website, which is especially important for keyboard and screen reader users. Empty headings are headings that do not contain any text and so provide no information and may cause confusion. These can be made accidentally when adding content to the site. Fix this issue by adding informative content to headings, describing the content that follows.
A ‘possible heading’ warning appears when it seems like a string of regular text is being used as a header. If it is, in fact, intended to be a header, you’ll just need to change the text from a paragraph into a heading in the backend of the website.
Headings should not be skipped because some users use headings to navigate. There should also only be one H1 on each page.
Links to PDF documents
Linking to PDF files can cause some issues with accessibility, as they are often not written with accessibility in mind. You don’t necessarily have to remove PDFs from your websites, this warning simply serves to remind you to manually test your PDF documents for accessibility as most tools will not be able to test the PDF when testing a website.
To test a PDF file you will need to refer to the source file which is usually a Word document, making the accessibility amendments there and then saving the document as PDF again before re-uploading.
This article by NEC Digital is an extension to our report on Public Sector web accessibility: Digital Divide: The impact of public sector web accessibility on users with visual impairments
NEC Digital is a partnership of the best-in-class software delivery of NEC Software Solutions with the pioneering user-centred design services of Snook. We offer end-to-end digital transformation expertise to the very highest standards from discovery to development and beyond.
