Accessibility and SEO share the same foundation: making content understandable to machines and humans alike. Screen readers parse the same semantic HTML that search engine crawlers depend on. Sites that fail WCAG standards consistently underperform in organic search because they lack the structural clarity Google needs to index content accurately.
WCAG Levels and SEO Impact
WCAG 2.2 defines three conformance levels. For SEO purposes, Level AA is the practical target:
| Level | Requirement | SEO Relevance |
|---|---|---|
| A | Basic accessibility (alt text, form labels) | Critical - missing alt text means missing image SEO |
| AA | Enhanced usability (contrast, resize, navigation) | High - covers most ranking-relevant accessibility signals |
| AAA | Maximum accessibility (sign language, reading level) | Low direct SEO impact but valuable for engagement |
Issues That Hurt Both Accessibility and Rankings
- Missing alt text: Images without alt attributes are invisible to both screen readers and image search indexing
- Empty heading tags:
<h2></h2>breaks document outline for crawlers and assistive technology - Missing language attribute: Without
<html lang="en">, search engines may misclassify page language - Broken skip navigation: Poor landmark structure makes crawling less efficient
- Low color contrast: Text below 4.5:1 contrast ratio correlates with higher bounce rates
Running an Automated Audit
axe-core (Industry Standard)
axe-core catches approximately 57% of WCAG violations automatically. Run it in the browser or integrate into CI:
// Browser console quick audit
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.1/axe.min.js';
script.onload = () => {
axe.run().then(results => {
console.log(`Violations: ${results.violations.length}`);
console.log(`Passes: ${results.passes.length}`);
results.violations.forEach(v => {
console.log(`[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} instances)`);
});
});
};
document.head.appendChild(script);
Lighthouse Accessibility Score
Lighthouse runs a subset of axe-core rules and scores on a 0-100 scale:
| Score | Rating | Action Required |
|---|---|---|
| 90-100 | Good | Monitor and maintain |
| 70-89 | Needs work | Fix critical and serious issues |
| 50-69 | Poor | Prioritize remediation sprint |
| < 50 | Failing | Immediate intervention needed |
CI Pipeline Integration
# GitHub Actions accessibility gate
- name: Run accessibility audit
run: |
npm install @axe-core/cli
npx axe https://localhost:3000 \
--tags wcag2a,wcag2aa \
--exit # Non-zero exit on violations
Priority Fix Order
Address violations by impact level. axe-core categorizes issues into four severity tiers:
Critical (Fix Immediately)
- Images missing alt attributes
- Form inputs without associated labels
- Empty buttons or links
- Missing document language
Serious (Fix This Sprint)
- Heading hierarchy skips (h1 to h3 with no h2)
- Color contrast below 4.5:1 for normal text
- Missing ARIA labels on interactive elements
- Keyboard traps in modal dialogs
Moderate (Fix This Quarter)
- Missing landmark regions (main, nav, footer)
- Links without discernible text
- Tables without proper headers
- Redundant ARIA roles on semantic elements
Minor (Track and Address)
- Tabindex values greater than 0
- Missing skip-to-content links
- Non-descriptive link text ("click here")
Semantic HTML Fixes That Serve Both Goals
<!-- BAD: Div soup hurts crawlers and screen readers -->
<div class="nav">
<div class="nav-item">Home</div>
</div>
<div class="content">
<div class="title">Page Title</div>
</div>
<!-- GOOD: Semantic HTML serves both audiences -->
<nav aria-label="Main navigation">
<a href="/">Home</a>
</nav>
<main>
<h1>Page Title</h1>
</main>
Monitoring Accessibility Over Time
- Run axe-core audits against your top 50 landing pages monthly
- Track violation counts by impact level in a spreadsheet or dashboard
- Set a Lighthouse accessibility score floor of 85 as a deployment gate
- Use Google Search Console's Page Experience report to monitor the correlation between accessibility fixes and ranking improvements
Sites that achieve WCAG 2.2 AA conformance typically see 10-20% improvements in time-on-page and a measurable reduction in bounce rate, both of which feed back into improved search rankings.