10 Most Common Website Accessibility Issues to Solve in 2024 [Detailed Guide]

Website accessibility is no longer an afterthought or nice-to-have. It‘s an essential part of creating an inclusive web that works for everyone, regardless of ability. Failing to address accessibility doesn‘t just exclude the over 1 billion people worldwide who live with a disability, it can also hurt your search rankings, increase legal risk, and cause frustrating user experiences for all.

As a web practitioner, you have a responsibility to ensure your sites meet modern accessibility standards. But with so many moving parts, it can be hard to know where to start.

To help you out, we‘ve compiled the 10 most common website accessibility issues to watch out for and fix in 2024, backed by data and examples. For each issue, we‘ll explain why it matters, share real-world good and bad practices, and give you practical tips to resolve it based on WCAG criteria.

By the end, you‘ll have a solid understanding of the current state of web accessibility, key areas for improvement, and a roadmap to make your own sites more inclusive and compliant. Let‘s dive in.

1. Insufficient color contrast

Low color contrast between text and backgrounds is one of the most widespread accessibility barriers. Poor contrast makes text hard to read for users with low vision, color blindness, or in suboptimal conditions like bright sunlight.

WebAIM‘s analysis of 1 million home pages found that 85.3% had low contrast text, impacting over 35% of all page elements on average. The most common culprits? Gray text on white backgrounds and white text on colored backgrounds.

To meet WCAG 2.1 AA contrast minimums, normal body text needs a ratio of at least 4.5:1 and large text (18pt/24px or 14pt/18.5px bold) 3:1. Use a tool like the Colour Contrast Analyzer to check combos.

For example, HubSpot‘s website lets users toggle between default and high contrast modes, boosting key content:

2. Generic link text

Links are vital for navigating sites, but generic phrases like "click here" or "learn more" don‘t give enough context on their own. This forces screen reader users to go through surrounding content to understand what the link is for.

Generic link text is pervasive. A WebAIM study found that 25% of sites had links with the exact phrase "click here", while 41% had "read more" and 17% "learn more". Imagine how tedious it would get hearing those over and over while browsing.

The solution? Use descriptive, standalone link text that clearly indicates where the link goes. For instance:

<!-- ❌ Bad: -->
To learn more about web accessibility, <a href="#">click here</a>.

<!-- ✅ Good: -->
<a href="#">Learn more about web accessibility</a>

3. Missing or unhelpful image alt text

Alt text is critical for users with visual impairments to perceive image content. Yet a staggering 66% of the top 1 million home pages had missing alt text on some images.

When providing alt text, be specific and concise. Avoid stuffing it with keywords or using phrases like "image of…" which screen readers already announce. For purely decorative images, leave alt="" blank so they‘re skipped entirely.

<!-- ❌ Bad: -->
<img src="dog.jpg" alt="865343.jpg">
<img src="dog.jpg" alt="Picture of a dog">

<!-- ✅ Good: -->
<img src="dog.jpg" alt="Dalmatian playing fetch in a grassy field">  
<img src="line.jpg" alt="" role="presentation">

4. Incorrect heading structure

Headings (H1-H6) provide a semantic outline for pages. They‘re not just visual styles, but navigational aids for sighted and screen reader users to quickly jump between sections.

However, a WebAIM survey found that 86.1% of pages didn‘t use a logical heading hierarchy. The most frequent missteps were skipping levels, having multiple H1s, and lack of H1 entirely.

Ensure your pages have a single unique H1 with subsections organized logically underneath (no missing levels). If you need to visually style text without affecting document flow, use CSS instead of heading tags.

<!-- ❌ Bad: -->
<h3>My Page</h3>
<p>Intro content...</p>  
<h6>Section</h6>
<h2>Another section</h2>

<!-- ✅ Good: -->

<p>Intro content...</p>
<h2>First section</h2>
<h3>Subsection</h3>  
<h2>Second section</h2>

5. Inaccessible images of text

It‘s common to see images used to display important text content like headings, links or buttons. This is problematic for accessibility, as embedded text can‘t be read by screen readers or easily resized.

Facebook learned this lesson the hard way. In 2019, they were sued by a blind user who couldn‘t read meme text, resulting in a $200,000 settlement. The National Federation of the Blind estimates that businesses paid over $10 million in accessibility lawsuit damages in 2021 alone.

As a rule of thumb, use actual HTML text instead of images wherever possible. If you absolutely must use an image of text, repeat the full text in the alt description so no info is lost. But keep it an exception, not the norm.

6. Inaccessible non-HTML content

PDFs, Word documents, presentations and other files shared on your site must be accessible too. Unfortunately, GovTech‘s analysis of 56 government sites in Singapore found that 58% of PDFs had accessibility issues like missing tags and poor reading order.

To make non-HTML content inclusive, ensure it has:

• Searchable text (not scanned images)
• Navigational aids like headings, bookmarks and tags
• Alt text for images and formulas
• Meaningful link text
• Data tables with header cells

Microsoft Office and Adobe DC have built-in accessibility checkers to scan for common issues. For complex PDFs, consider providing an alternate HTML version.

7. Lack of keyboard accessibility

Keyboard accessibility is essential for users who can‘t operate a mouse or touchscreen. This includes people with motor disabilities, low vision, or who rely on voice dictation.

Yet a WebAIM survey revealed that 90% of the top 100 websites had sub-menus that couldn‘t be accessed with the keyboard alone.

Ensure all interactive controls like links, buttons and form fields can be reached and activated using just the Tab, Enter and arrow keys. Avoid keyboard traps that block focus within specific elements. Provide a "skip to main content" link for bypassing lengthy navigation.

For custom widgets, use ARIA roles and properties to convey their name, role, value and state to assistive tech. The WAI-ARIA Authoring Practices guide has code samples for common UI patterns like menus, accordions and dialogs.

8. Complex data tables

Screen readers announce data tables row by row. If tables are overly complex with nested headers, merged/split cells or missing header associations, the info becomes a jumbled mess.

One of the most common failures in automated scans is lack of table headers. A WebAIM analysis found that 47% of layout tables and 33% of data tables were missing appropriate headers.

For simple data tables, always define column and/or row headers using

<table>
  <tr>
    <th></th>
    <th id="header1" scope="col">Monday</th>
    <th id="header2" scope="col">Tuesday</th>
  </tr>
  <tr>
    <th id="header3" scope="row">9:00-11:00</th>
    <td headers="header1 header3">Closed</td>
    <td headers="header2 header3">Open</td>
  </tr>
</table>

9. Inaccessible online forms

Forms are one of the most important website interactions, but also one of the least accessible. In fact, WebAIM found that 59% of form inputs were unlabeled across the top million home pages.

To make your forms usable for all, ensure each field has a programmatically associated . Place labels adjacent to inputs and avoid using placeholder text as a replacement. For radio/checkbox groups, use

<label for="email">Email</label>
<input id="email" type="email" required>
<span class="error" id="email-error"></span>

<script>  
const email = document.getElementById(‘email‘);
const emailError = document.getElementById(‘email-error‘);

email.addEventListener(‘invalid‘, (e) => {    
  e.preventDefault();
  emailError.textContent = ‘Please enter a valid email address‘;
});
</script>