Tackling the Most Common Web Accessibility Issues of 2024

woman typing on a computer with a coffee mug
by August Erickson
Development Manager

Web accessibility remains a critical challenge that affects millions of internet users. The WebAIM Million report is an industry-leading study that provides essential insights into the current state of web accessibility. 

Conducted for the sixth year in a row, this analysis reviews common accessibility issues (detected via scanning software) across the homepages of the top 1,000,000 websites. This analysis focuses on the WCAG 2.2 AA success criteria. 

In this blog post, we’ll explore the findings from the 2024 WebAIM Million report and outline the critical areas where organizations can start to remediate issues and prevent these common accessibility issues.

Before we dive in, it’s important to state that there are limitations with automated scanning software, as not all accessibility issues can be detected automatically. An absence of errors does not guarantee full accessibility or compliance, and you should ensure that your organization also engages in manual testing, ideally including users with disabilities as part of this initiative.

Key Report Insights

Within the report, some of the key metrics include:

  • 95.9% of the 1,000,000 home pages analyzed had WCAG 2.2 AA errors (detected via scanning software). This is a slight improvement from the 2023 report at 96.3%.
  • 56,791,260 distinct accessibility errors were detected across all 1,000,000 home pages, for an average of 56.8 errors per page, an increase of 13.6% from the 2023 report.
  • In the analyzed sample, 22.2% of home pages showed five or fewer errors, and 31.2% of home pages exhibited 10 or fewer, suggesting some improvement from 2023. However, the disparity widened as pages with fewer errors improved, while those with numerous errors deteriorated further.

Priority Issues and Solutions

Within the report, 96.4% of all of errors detected fell into one of six categories:

  • Low contrast text
  • Missing alternative text for images
  • Missing form input labels
  • Empty links
  • Empty buttons
  • Missing document language

In the following sections, we’ll discuss what these violations mean and how you can begin to address them.

Low contrast text

Low contrast text was found on 81% of home pages. Low contrast text refers to the visual presentation of text that does not stand out clearly from its background, making it difficult for many users, especially those with visual impairments (such as limited vision or color blindness) to read and understand content. The impact of this issue is significant, as it can hinder access to information, reduce the usability of web content, and ultimately lead to a frustrating user experience for those affected. (See WCAG 2.2 AA success criteria 1.4.3 Contrast Minimum.)

To remediate low contrast text, you can:

  • Increase contrast ratios: Adjust the text color and background color to increase the contrast ratio to the required level. This may involve selecting darker colors for text on light backgrounds or vice versa.
  • Use tools to check contrast: Utilize online tools, such as the WebAIM Contrast Checker, to ensure that your text meets the minimum contrast requirements.
  • Test with real users: Conduct usability testing with users who have visual impairments to get direct feedback on contrast and readability.
  • Avoid certain color combinations: Some color combinations, such as green and red, are particularly difficult for users who are colorblind to distinguish. Avoid these combinations where possible.
graphic of a contrast checker for web accessibility

Missing alternative text for images

Missing alternative text (alt text) for images was found on 54.5% of home pages. Missing alt text for images is a common accessibility issue that affects users who rely on assistive technologies (such as screen readers). Alt text provides a textual description of images and other non-textual content, allowing screen readers and other assistive technologies to convey what the image depicts to users who cannot see it. Missing alternative text for images impacts visually impaired users, those with cognitive disabilities, users in low-bandwidth situations and website SEO. (See WCAG 2.2 AA success criteria 1.1.1 Non-Text Content.)

To address missing alternative text, you can follow these remediation steps:

  • Add alt text: Provide concise, descriptive alt text that conveys the same function or purpose as the image. Tools like Alt Text Decision Tree can help determine the type of image to provide proper alt text.
  • Avoid redundancy: Ensure that the alt text doesn’t repeat text that is already present as text near the image. The alt text should complement the content, not duplicate it.
  • Use long descriptions for complex images: For images that convey complex information, like charts or graphs, provide a longer description nearby or link to a separate page that explains the content in detail.
  • Educate content creators: Provide guidelines and training for content creators on how to create effective alt text and why it is important. This is not just for your web content, but also your social media content! Check out another one of our blog posts, “How to Utilize Alt Text On Social Media.”

Missing form input labels

Missing form input labels were found on 48.6% of home pages, an increase from 45.9% in 2023. Labels are essential for understanding the purpose of form input fields, making them crucial for providing an accessible user experience. Without form labels, screen reader users may not receive the necessary context to understand what information is required in form fields, leading to input errors and increased difficulty in form completion. (See WCAG 2.2 AA success criterion 1.3.1 Info and Relationships2.4.6 Headings and Labels and 3.3.2 Labels or Instructions.)

To remediate an empty form input label, here are a few strategies to ensure this is fixed correctly:

  • HTML attributes: Properly utilize <label></label> tags, and associate with respective form fields. Or, utilize an aria-label attribute for accessible naming.
  • Visible labels: Make sure to maintain visible labels, and avoid using placeholders as substitutes for actual labels.
Sign-up for our newsletter graphic

Empty links

Empty links were found on 44.6% of pages. Empty links are defined as hyperlinks without text or discernible content. They present a significant accessibility barrier and typically appear in web content as <a href="URL"> without accompanying text or alternative descriptions. This can cause confusion and navigation difficulties for users relying on assistive technologies, as screen readers will announce these links but cannot provide information about their functionality/purpose. (See WCAG 2.2 AA success criterion 2.2.4 Link Purpose (In Context) and 4.1.2 Name, Role, Value.)

To fix empty links, there are a few strategies you can use, including:

  • Add descriptive text: Ensure all links contain descriptive text that clearly conveys the functionality/purpose of the link. If the link is not meant to be visible (e.g., for stylistic purposes), consider alternative methods, such as using buttons or other interactive elements, that are better suited to handle these actions.
  • Use ARIA labels: If text labels cannot be used due to design constraints, use aria-label or aria-labelledby attributes to provide an accessible name that describes the link’s purpose.
  • Remove redundant links: If a link is not functional or does not lead anywhere, remove it from the HTML code to reduce navigation confusion and clutter, particularly for screen reader users.

Empty buttons

Empty buttons were found on 28.2% of home pages, an increase from 27.5% in 2023. Empty buttons, similar to empty links, are user interface components that lack discernible text or labels, making it difficult for users, especially those relying on assistive technologies, to understand their purpose. These buttons might appear in HTML as <button></button> without appropriate labeling.

The presence of empty buttons impacts screen reader users, as screen readers will announce these buttons, but users won’t understand their function. This leads to potential confusion and an inability to interact effectively with the website or application. (See WCAG 2.2 AA success criterion 2.4.6 Headings and Labels and 4.1.2. Name, Role, Value.)

To effectively address and remediate empty buttons, consider these strategies:

  • Provide visible labels: Every button should have visible text that clearly describes its function. If the design requires an icon-only button (such as a play or pause button), supplement it with appropriate text using aria-label attributes or visually-hidden text that can be read by screen readers.
  • Avoid redundancy: Ensure that button labels are not redundant with nearby text or icons that already describe them. If redundancy is unavoidable, make sure additional contextual information is provided to differentiate the button's specific action.

Missing document language

From the study, 17.1% of home pages were missing a document language. Missing document language is where the language of an HTML document is not specified using the lang attribute. This is crucial for screen readers and other assistive technologies to correctly interpret and pronounce content based on linguistic rules. Screen readers rely on the lang attribute to switch language profiles for accurate pronunciation. Without it, content may be read in the default language of the screen reader, leading to mispronunciation and confusion. (See WCAG 2.2 AA success criterion 3.1.1 Language of Page and 3.1.2 Language of Parts 3.1.2.)

To address the issue of missing document language, consider the following approaches:

  • Specify language in HTML: Use the lang attribute in the HTML opening tag to declare the primary language of the page. For example, <html lang="en"> indicates English. Ensure that the language codes used in the lang attribute are valid according to the IETF BCP 47 standard
  • Identify changes in language: For content that includes multiple languages, use the lang attribute on specific elements (like paragraphs or spans) to indicate any change in language. This helps assistive technologies adjust their processing accordingly.

Let’s Work Together

Want to have a better understanding of potential accessibility issues on your organization’s website? Please reach out to our team to discuss the steps to take to ensure your website is more accessible. 

Get in touch

Let's work together
· Contact Us · Contact Us · Contact Us