WCAG Checker

How to Fix the 10 Most Common Accessibility Issues on Your Website

According to the WebAIM Million study, 96.3% of home pages have detectable WCAG failures. The good news? Most of these failures fall into a handful of common categories that are straightforward to fix. Here are the 10 most common accessibility issues and exactly how to resolve them.

1. Missing Image Alt Text

WCAG 1.1.1 (Level A)

Images without alt attributes are invisible to screen reader users. Every meaningful image needs descriptive alt text, and decorative images should have empty alt="" attributes.

How to fix: Add alt="description" to every <img> tag. Be specific: instead of alt="image", write alt="Golden retriever puppy playing in a park". For decorative images, use alt="" so screen readers skip them.

2. Insufficient Color Contrast

WCAG 1.4.3 (Level AA)

Text that doesn't have enough contrast against its background is hard to read for users with low vision, color blindness, or even those in bright sunlight.

How to fix: Normal text needs a contrast ratio of at least 4.5:1, and large text (18px+ bold or 24px+ regular) needs at least 3:1. Use our Contrast Checker tool to verify your color combinations.

3. Missing Form Labels

WCAG 1.3.1 (Level A)

Form inputs without associated labels make it impossible for screen reader users to know what information to enter. Placeholder text is NOT a substitute for labels.

How to fix: Use <label for="inputId"> elements associated with each form control. Every input, select, and textarea needs a visible, descriptive label.

4. Missing Document Language

WCAG 3.1.1 (Level A)

Without a lang attribute on the <html> element, screen readers don't know what language to use for pronunciation, causing garbled speech for users.

How to fix: Add lang="en" (or the appropriate language code) to your <html> element. For multilingual content, use lang attributes on specific elements.

5. Empty Links and Buttons

WCAG 2.4.4 (Level A)

Links and buttons that contain only an icon or image with no text alternative leave screen reader users unable to determine their purpose.

How to fix: Add descriptive text to links and buttons. For icon-only buttons, use aria-label="Description" or include visually hidden text with a .sr-only class.

6. Missing or Improper Heading Structure

WCAG 1.3.1 (Level A)

Headings that skip levels (H1 to H3), use headings purely for visual styling, or lack an H1 make it difficult for screen reader users to navigate and understand page structure.

How to fix: Use headings in a logical, hierarchical order: one H1 per page, followed by H2s for main sections, H3s for subsections, etc. Don't skip levels.

7. No Keyboard Focus Indicator

WCAG 2.4.7 (Level AA)

Users who navigate with keyboards need to see which element is currently focused. Removing the browser's default focus outline with outline: none makes this impossible.

How to fix: Never remove focus outlines without providing an alternative. Use :focus-visible to style focus indicators that only appear for keyboard users. Make them high-contrast and clearly visible.

8. Missing Skip Navigation Link

WCAG 2.4.1 (Level A)

Without a skip link, keyboard users must tab through the entire navigation menu on every page before reaching the main content.

How to fix: Add a visually hidden link at the top of the page that becomes visible on focus: <a href="#main" class="skip-link">Skip to main content</a>. Link it to an id on your main content area.

9. Auto-playing Media

WCAG 1.4.2 (Level A)

Audio or video that plays automatically can be disorienting, especially for screen reader users who can't hear their assistive technology over the media.

How to fix: Never auto-play media with sound. If auto-play is essential, provide a clearly visible mechanism to pause or stop the media within the first few seconds, and ensure the volume starts muted.

10. Missing ARIA Landmarks

WCAG 1.3.1 (Level A)

Without proper landmark regions (header, nav, main, footer), screen reader users can't quickly jump to different sections of the page.

How to fix: Use semantic HTML5 elements: <header>, <nav>, <main>, <footer>, <aside>. These automatically create ARIA landmark regions. For custom elements, add role attributes like role="navigation".

Next Steps

Run a scan on your website using our free WCAG Checker to see which of these issues affect your site. The tool will identify the exact elements that need fixing and provide specific guidance for each issue. Start with critical and serious issues, then work through moderate and minor ones.

Find Issues on Your Site

Run a free scan and get specific fixes for your website.

Scan Your Website