VoiceOver/Screen Reader support implementation for website (WCAG)

VoiceOver/Screen Reader Support Implementation (WCAG)

A screen reader is software that reads page content aloud for blind and visually impaired users. VoiceOver (macOS/iOS), NVDA and JAWS (Windows), and TalkBack (Android) announce page content and enable keyboard navigation. WCAG 2.1 Level AA requires full screen reader accessibility.

How Screen Readers Work

Screen readers read the DOM tree and use the Accessibility Tree — a special representation of the page built from HTML and ARIA attributes. Users navigate using headings (H1-H6), links, forms, and tables with special keyboard shortcuts.

Basic Requirements

Semantic markup instead of div-soup:

<!-- Bad -->
<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="go('/home')">Home</div>
  </div>
</div>

<!-- Good -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/home">Home</a></li>
    </ul>
  </nav>
</header>

Landmarks for navigation:

<header>...</header>
<nav aria-label="Main navigation">...</nav>
<main>
  <article>...</article>
  <aside aria-label="Related content">...</aside>
</main>
<footer>...</footer>

Forms

<!-- Every form field must have a label -->
<label for="email">Email</label>
<input type="email" id="email" name="email"
       aria-describedby="email-hint email-error"
       aria-required="true">
<span id="email-hint" class="hint">We won't send spam</span>
<span id="email-error" role="alert" aria-live="polite"></span>

<!-- Grouped fields -->
<fieldset>
  <legend>Payment method</legend>
  <label><input type="radio" name="payment" value="card"> Card</label>
  <label><input type="radio" name="payment" value="cash"> Cash</label>
</fieldset>

Dynamic Content and SPAs

The main issue for screen readers in SPAs is that dynamic DOM updates aren't announced automatically.

// React — announcement of data loading
function DataSection({ isLoading, data }) {
    return (
        <section>
            {/* aria-live to announce changes */}
            <div aria-live="polite" aria-atomic="true" className="sr-only">
                {isLoading ? 'Loading data...' : 'Data loaded'}
            </div>

            {isLoading ? (
                <div aria-busy="true">
                    <span className="sr-only">Loading...</span>
                    <Spinner aria-hidden="true" />
                </div>
            ) : (
                <ul>
                    {data.map(item => <li key={item.id}>{item.title}</li>)}
                </ul>
            )}
        </section>
    );
}

Focus Management During Navigation

// When navigating between pages in SPA — move focus to page heading
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

function PageTitle({ title }) {
    const titleRef = useRef(null);
    const location = useLocation();

    useEffect(() => {
        titleRef.current?.focus();
        document.title = title;
    }, [location.pathname]);

    return (
        <h1 tabIndex={-1} ref={titleRef} className="focus-invisible">
            {title}
        </h1>
    );
}

Images and Media

<!-- Informative image -->
<img src="graph.png" alt="Sales growth chart: +35% in Q3 2024">

<!-- Decorative image -->
<img src="decorative-bg.png" alt="" role="presentation">

<!-- Complex diagram — additional text description -->
<figure>
    <img src="complex-chart.png" alt="Revenue distribution chart"
         aria-describedby="chart-desc">
    <figcaption id="chart-desc">
        The chart shows: 40% revenue from product A, 35% from product B, 25% other.
    </figcaption>
</figure>

Screen Reader Testing

Tools:
- NVDA (Windows, free) — most common
- JAWS (Windows, commercial) — enterprise standard
- VoiceOver (macOS: Cmd+F5, iOS: triple-tap Home)
- ChromeVox (Chrome extension)

Automated testing:
- axe-core — library for Playwright/Cypress
- jest-axe — for React component unit tests

// Jest + jest-axe
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('form is accessible', async () => {
    const { container } = render(<ContactForm />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
});

Timeline

• Current state audit: 1–2 days
• Fixing semantics and ARIA on existing project: 3–7 days
• Screen reader testing + refinement: 2–3 days