The 10 most common accessibility issues

No one builds a website with the intention of excluding people with disabilities, however, if you are not building with accessibility as a priority, then your website could very well be blocking a significant portion of your audience from accessing and engaging with your content. Awareness and regulations around web accessibility are increasing with a record-breaking 23% increase in accessibility-related lawsuits in the US alone, so putting off accessibility is no longer an option.

If you’re not familiar with accessible web development and design, it can be difficult to know where to begin. A good starting point is checking how accessible your current website is, but before you jump into a full accessibility audit, it’s important to have an understanding of what to look for. Here we will go over the most common accessibility issues, why they’re a problem, and how you can begin to fix them.

What are accessibility issues?

Before diving into the most common accessibility issues, let’s first dig into what an accessibility issue is. An accessibility issue is any barrier that makes it difficult or impossible for a person with a disability to equally access, navigate, or engage with the content on your website.

To understand how accessibility issues can occur, you need to understand how people with disabilities access and use websites. The types of disabilities to be aware of are:

• Blindness and low vision
• Deafness and hearing loss
• Limited movement
• Speech disabilities
• Neurological limitations
• Cognitive limitations
• Temporary or situational impairments

How an individual with a disability accesses websites can vary depending on several factors, such as the type of disability they have, their personal preferences, and so on. For instance, some people are not able to use a mouse and must therefore rely on keyboard-only navigation. Others use assistive technology, such as screen readers that read the contents of the website aloud, or sip and puff devices that allows a user without mobility in their arms or hands to navigate the website using the power of their breath.

By ensuring you have an inclusive website that is accessible to a diverse range of people, you widen your potential market (and thereby your revenue), future-proof against legal backlash, and strengthen a positive brand image. By resolving the most common accessibility issues, you are well on your way to creating an inclusive web experience for all.

The most common accessibility issues

According to the Web Content Accessibility Guidelines (WCAG) 2.1, there are 78 success criteria for accessibility, however, not all these success criteria will be relevant to your website. In contrast, there are certain accessibility issues that are commonly found on websites across sectors and industries that everyone should be familiar with. Here are the low hanging fruits you can watch for.

 

1. Missing or inaccurate text alternatives for images

The lowest hanging fruit that you can start resolving today is ensuring images on your website have an image alt text tag. People using screen readers, for example, rely on alt text to understand visual content that they may not be able to see.

If your image is informative and important to understanding the content, then you must fill in a text alternative, also known as alt text, with a description of the image’s content. For example, if you are featuring an image of a park, a fitting alt text could be “Aerial view of Central Park in New York”.

If your image is purely decorative, meaning it is for visual design purposes only and does not contain any additional information that is not already in the text, then you should still include the image alt tag, but you can leave the description blank.

2. Insufficient color contrast

For people with low vision, inadequate color contrast between the background color and the text color can make it very difficult to read the content of your website. The recommended contrast ratio varies depending on the size of your text, so it is a good idea to use a color contrast checker to assess whether your website’s colors are within the right ratio.

3. Inaccurate HTML heading structure

Page structure in your HTML is important for people who use screen readers to read the contents of your website. Inaccurate heading structure makes your content unorganized and very confusing to navigate, for example, if you simply bold your text, instead of using proper heading ranking. Your headings should be nested with the most important heading having rank 1 (<h1>) with subheadings proceeding in order.

4. Missing WAI-ARIA attributes

The Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) is a technical specification used by developers to build accessible interactive content. Interactive content includes elements like drag-and-drops, accordions, or sliders. Unfortunately, these types of interactive content interfere with users who rely on screen readers or speech instructions if they’re not implemented properly.

The good news is that you can insert the ARIA attributes into your HTML code, which can help assistive technologies understand what type of content it is and allow for better navigation. ARIA also provides additional instructions, labels, and helpful alerts to screen reader users, which can be necessary if it’s difficult or impossible to re-code the existing web page elements.

5. Links without text alternatives

Do the links on your website contain descriptive plain text in the source code? And if you are using linked images, does the text alternative for the image describe where the link goes? Since URLs on their own are not always descriptive of their destination, it is important to include a brief text alternative that lets screen reader users know where they are navigating to by clicking on the link. This is especially helpful if the person is looking for specific information on your page.

For instance, if someone is looking for customer support and you are using a question mark icon to link to your support pages, be sure to include a text alternative that states explicitly “Customer support” or similar. And if the link opens in a new browser window or goes to an external site, it is also critical to include this information in your text alternative.

6. Non-accessible forms

If you are using contact forms, or any type of input field on your website, you should ensure that they are accessible to everyone by ensuring clear labeling. If you are not using a <label> element in your code for each field, for example, people using screen readers or speech input will have trouble navigating the form. Also avoid placing labels inside the input field and opt, instead to have the labels directly over their respective fields.

7. Overlays

The use of accessibility overlays has grown in recent years as a quick-fix solution, but unfortunately, overlays do not resolve accessibility issues in your website’s source code. And in some cases where the accessibility overlay overrides the settings of someone’s screen reader, for example, it can make it more difficult for people with disabilities who have their assistive technologies finely tuned to their specific needs. If you’re short on in-house accessibility expertise, avoid overlays and opt instead for an automated accessibility testing solution to streamline your code review.

8. Buttons without alt text

If you’re using buttons on your page to help people navigate your content, you need to ensure that you provide alt text. Without alt text, a screen reader user won’t be able to tell what the button’s function is and won’t be able to navigate that part of the page. For example, if you have a search bar on your page, make sure the search button has alt text stating “Submit search” or similar. This lets the user know that by clicking this button, they can activate the search form.

9. Uneven spacing in text

Uneven spacing between the words in your text can occur if your text is both left and right justified. This can make it difficult for people with cognitive disabilities to read the text. For instance, some words might be placed so closely together that the reader is not able to distinguish where one word ends and the other begins. If there is not enough space between the lines of text, this also makes it difficult to see where the paragraph ends.

10. Image carousels or sliders

Image carousels or sliders are common elements on a website, as they give content creators an opportunity to include more content within the limited space of the website. However, if you’re not using the proper techniques, such as implementing an ARIA label, you could be creating traps, meaning that a person using a screen reader or navigating using a keyboard, could enter the carousel or slider and not be able to move away from it.

How to start fixing your accessibility issues

If you’re not sure whether your website contains any of these accessibility issues, there’s an easy way to find out. You can start by quickly assessing the state of your website using a checker, such as the Siteimprove website accessibility checker. This can scan for the most common accessibility issues and help you scope the time and resources you will need to achieve an accessible and compliant website.

For a full, in-depth audit of your website using automated and/or manual accessibility testing, get in touch with a member of the Siteimprove team by booking a time to talk. We can help you start your journey to WCAG compliance and an inclusive website.