Accessibility ↔ SEO
A screen reader and Googlebot consume a page the same way: as a semantic tree, not pixels. Building accessible earns SEO structure for free. The accessibility-SEO overlap, semantic HTML, the five ARIA rules, and WCAG 2.2 AA thresholds.
The single most important insight: a screen reader and Googlebot consume a page the same way — as a semantic accessibility/DOM tree, not pixels. Building for one builds for the other. Target WCAG 2.2 AA (the legal baseline worldwide: EN 301 549/EAA, ADA, Section 508). WCAG structure = 4 POUR principles → 13 guidelines → testable Success Criteria → techniques. Cumulative levels: A (minimum) < AA (the target) < AAA (cherry-pick). ⚠️ SC 4.1.1 Parsing is obsolete in WCAG 2.2 — don't cite it. WCAG 3.0 is an early Working Draft — track it, build to 2.2 AA.
The overlap (build accessible first; SEO structure comes largely for free)
| Accessibility requirement | SC | SEO benefit |
|---|---|---|
<title> unique & descriptive |
2.4.2 | #1 on-page ranking element; SERP headline |
One <h1>, no skipped heading levels |
1.3.1 / 2.4.6 | Topic & structure signals; snippet eligibility |
Descriptive alt |
1.1.1 | Google Images ranking; page context |
| Descriptive link text (no "click here") | 2.4.4 | Anchor-text ranking signal |
Semantic landmarks (<main>,<nav>,<article>) |
1.3.1 | Main-content detection, boilerplate stripping |
<html lang> + lang on parts |
3.1.1/3.1.2 | Language targeting, hreflang correctness |
| Real text, not text-in-images | 1.4.5 | Only real text is crawlable |
| Captions & transcripts (WebVTT) | 1.2.2 | Indexable video text; video rich results |
| Meaningful DOM order | 1.3.2 | Content-priority, mobile parity |
| Reflow/responsive, 200% zoom | 1.4.10/1.4.4 | Mobile-friendliness (mobile-first index) |
Tables with <caption>/<th scope> |
1.3.1 | Table/structured-data extraction |
| Fast, keyboard-operable, no traps | 2.1.x | UX/INP signals |
| Multiple ways to find pages (sitemap/search) | 2.4.5 | Crawlability |
Accessibility-only (do anyway — feed UX/engagement indirectly): color contrast, focus visibility, keyboard traps, target size, ARIA live regions.
Semantic HTML foundation
<header> <nav aria-label="Primary"> … </nav> </header> <!-- banner + navigation -->
<main id="main"> <!-- exactly ONE per page -->
<article> … </article>
<aside> … </aside> <!-- complementary -->
</main>
<footer> … </footer> <!-- contentinfo -->
- Exactly one
<h1>; don't skip levels (nest by meaning, style with CSS); real<h1>–<h6>, not styled<div>. - Real
<ul>/<ol>,<table>with<caption>/<th scope>,<label for>on inputs (placeholder is NOT a label),<button>for actions,<a href>for navigation,<time datetime>,<figure>/<figcaption>. - Skip link:
<a class="skip-link" href="#main">Skip to main content</a>(2.4.1).
ARIA — the five rules
- Use native HTML first (
<button>not<div role="button">). 2. Don't change native semantics unless you must. 3. All interactive ARIA controls must be keyboard operable (ARIA adds no behavior). 4. Don't putrole="presentation"/aria-hidden="true"on focusable elements. 5. All interactive elements need an accessible name. Golden rule: "No ARIA is better than bad ARIA." Update states (aria-expanded,aria-checked) in JS; announce async results viarole="status"/role="alert"/aria-live(4.1.3).
Numeric thresholds (WCAG 2.2 AA)
| Metric | Threshold | SC |
|---|---|---|
| Text contrast (normal) | 4.5:1 | 1.4.3 |
| Text contrast (large ≥24px, or ≥18.66px bold) | 3:1 | 1.4.3 |
| Non-text / UI component contrast | 3:1 | 1.4.11 |
| Text resize without loss | 200% zoom | 1.4.4 |
| Reflow (no horizontal scroll) | down to 320 CSS px | 1.4.10 |
| Text spacing (line 1.5× / para 2× / letter 0.12em / word 0.16em) | — | 1.4.12 |
| Target size minimum | 24 × 24 CSS px (or spacing) | 2.5.8 (AA) |
| Target size enhanced | 44 × 44 CSS px | 2.5.5 (AAA) — mobile best practice |
| Flash threshold | ≤ 3 flashes/second | 2.3.1 |
| Auto-moving content pausable after | > 5 s | 2.2.2 |
Never outline:none without a :focus-visible replacement (2.4.7). Color is never the only means of conveying info (1.4.1). Provide captions via WebVTT <track kind="captions">.
Test with: axe DevTools / Lighthouse (Accessibility + SEO categories overlap heavily), keyboard-only pass, and a screen reader (VoiceOver/NVDA).
Related on Crawlinx
Sources
Audit your own site — free
156 checks, internal PageRank, render-diff. No signup, results in ~30s.