Top Ten Most Common Web Accessibility Issues

If you are just starting your digital accessibility journey, you may feel overwhelmed with all the information on the topic. Don’t worry: this article will help you understand some of the most common web accessibility issues you will encounter as you start reviewing and testing your website and applications for accessibility errors.

However, before diving into the most common web accessibility issues, it’s necessary to learn about the Web Content Accessibility Guidelines (commonly referred to as WCAG). The accessibility guidelines are curated by W3C and they are currently on version WCAG 2.1. Ensuring your company’s digital assets conform to WCAG 2.1 can help you provide inclusive user experiences to people with disabilities, such as screen reader users, keyboard users, or people with cognitive disabilities.

From our experience with helping companies ensure accessibility across various digital products, we identified ten common issues that you need to focus on when conducting your accessibility audit.

Image alt text errors

Not including alternative text for images can result in a confusing and negative experience for screen reader users. Providing descriptive text via the alt attribute for an image element is an area where we see many issues. For example:

  • The text is too limited to accurately provide an equivalent description.
  • The text is too verbose and draws attention away from the primary purpose of the image.
  • No alt is provided at all, which generally results in the image src being read to the user.
  • Text is provided for an image that is purely decorative and should have an empty alt attribute.
  • Image maps include regions that are not properly labeled with an alt attribute.

Learn how to create inclusive alternative text with AmyJune’s #ID24 presentation, Beyond 99 Red Balloons: A Pragmatic Guide to Alternative Text.

Not providing a visual indication of the current focus

Keyboard-only users, screen magnification users, and speech recognition users, rely on knowing where the current input focus is placed within the page. All too often, a page author fails to take this into consideration and deliberately or inadvertently hides this visual indication, typically by suppressing the outline entirely (e.g. outline: none;).

Failure to use proper labels

When form controls are not labeled properly, assistive technology will not be able to programmatically link the label with its control. This can make it difficult for assistive technology users to understand the purpose of the control. Some assistive technologies will try to auto-correct for this failure and, while many times successful, there are also many times a form control will be mislabeled with this method, which can lead to additional issues or confusion for your users.

Non-descriptive text for hyperlinks

Many times, the link text will not provide enough detail to allow for the understanding of the link’s purpose out of context. For example, links may be present on the page that use the text “click me” or “click here”. Since assistive technology can allow users to find, sort, and quickly navigate to the links on a page, the text used for that link is important for assistive technology users to quickly complete their tasks.

Link areas are too small

A closely related issue is that web pages sometimes include clickable target areas that are too small to allow users with dexterity issues to successfully interact with those types of elements with a mouse.

Tables markup

Often, tables are used for layout, yet the page author fails to consider the way the content will be linearized, which can lead to confusion for screen reader users. Another situation could be that actual data tables are lacking in the proper markup to allow a screen reader user to obtain the information required to fully understand the data that is contained within a specific data cell. Often a simple data table will be presented in a way that requires a complex data table, yet the required markup is not included, which creates accessibility issues.

Improper use of heading elements

All too often, a page with considerable content will lack heading elements that help screen reader users understand the relationship of the page content, as well as provide a means to easily navigate through the page. When heading elements (H1 – H6) are implemented, they are often incorrectly used for visual formatting purposes only.

Color contrast

Using color combinations within the content that fall outside the WCAG 2.1 allowable contrast ratios (4.5:1 for text content, or 3:1 for interface elements) is a major problem for color blind or low-vision individuals. We also see the mistake of using color as the only means of conveying information, for instance, adding emphasis to a word or section of a website. We created a free Color Contrast Checker to make it easy for you to find the perfect inclusive color scheme.

Embedding non-accessible documents

Users will often embed PDFs or other types of inaccessible documents. PDFs and other documents that are considered digital products (such as PowerPoints and Word documents) need to be made accessible for users with disabilities. Some of these programs have an accessibility checker built into the programs to help. You can review an on-demand webinar we hosted on how to make your PDFs accessible to learn more.

Same descriptive text for different resources

Using the same descriptive text for links that point to different resources. When focused on creating excellent user experiences, it’s best to make your descriptive text relevant and unique.

Some of the above accessibility issues can be detected through the use of automated accessibility testing tools like ARC. Start by scanning your website for free. When you are conducting an accessibility review of your website or digital assets, remember to keep the user experience at the forefront of your focus. As it’s nearly impossible to review your digital assets from every user perspective, it’s wise to make additional efforts and engage in usability testing.

If you have questions or need an accessibility audit, schedule a meeting to speak with one of our experts.

Categories: Business, World of Accessibility

Comments

MIA says:

In the section IMPROPER USE OF HEADER TAGS, you reference HEADERS. Is that the same as HEADINGS? My screen readers announce the latter.
Thanks for the good tips.

James Edwards says:

Hi MIA, that’s a mistake, it should say headings. I’ll make those corrections, thanks for drawing our attention to it.

For those hoping for more guidance on proper versus improper use of headings, Dr. David Swallow has a great article at this very site (feel free to make that a link, dear site admin):

Heading off confusion: When do headings fail WCAG?

Dean H. says:

I would argue that you missed one of the most common and THE most egregious one: “keyboard alone”.