Screen Readers

How Screen Readers Work

Screen readers convert content to speech or braille.

Screen Reader Types

Screen Reader	Platform	Cost
NVDA	Windows	Free
JAWS	Windows	Paid
VoiceOver	macOS/iOS	Free
TalkBack	Android	Free
Narrator	Windows	Built-in

How They Parse Content

1. Document structure: Headings, landmarks, lists
2. Semantic elements: Buttons, links, forms
3. ARIA attributes: Roles, states, properties
4. Text content: Labels, descriptions
5. Relationships: Labels, descriptions

Common Screen Reader Issues

// ❌ Image without alt text
<img src="photo.jpg" />

// ✅ Image with alt text
<img src="photo.jpg" alt="Team meeting in conference room" />

// ❌ Icon without label
<button><Icon /></button>

// ✅ Icon with label
<button aria-label="Close dialog"><Icon /></button>

// ❌ Dynamic content without live region
<div>{statusMessage}</div>

// ✅ Dynamic content with live region
<div aria-live="polite">{statusMessage}</div>

Reading Order

// Reading order follows DOM order
function Layout() {
  return (
    <div>
      <header>Header</header>
      <main>Main Content</main>
      <aside>Sidebar</aside>
      <footer>Footer</footer>
    </div>
  );
  // Screen reader reads: Header → Main Content → Sidebar → Footer
}

Live Regions

Announce dynamic content changes to screen readers.

Live Region Types

// Polite: Waits for user to finish
<div aria-live="polite">
  {results.length} results found
</div>

// Assertive: Interrupts immediately
<div aria-live="assertive">
  {errorMessage}
</div>

// Off: No announcement
<div aria-live="off">
  {debugInfo}
</div>

Status Updates

function SearchResults({ query, results, isLoading }) {
  return (
    <div>
      <input type="search" value={query} aria-label="Search" />
      
      {/* Status announcement */}
      <div aria-live="polite" className="sr-only">
        {isLoading
          ? 'Loading results...'
          : `${results.length} results for "${query}"`
        }
      </div>
      
      {/* Visible results */}
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

Error Announcements

function Form() {
  const [errors, setErrors] = useState({});

  return (
    <form>
      {/* Error summary for screen readers */}
      {Object.keys(errors).length > 0 && (
        <div role="alert" aria-live="assertive">
          <h2>Please fix the following errors:</h2>
          <ul>
            {Object.entries(errors).map(([field, error]) => (
              <li key={field}>{error}</li>
            ))}
          </ul>
        </div>
      )}
      
      {/* Form fields */}
    </form>
  );
}

Timer Updates

function Countdown({ seconds }) {
  return (
    <div>
      {/* Don't announce every second */}
      <div aria-live="off" aria-atomic="true">
        {formatTime(seconds)}
      </div>
      
      {/* Announce when done */}
      {seconds === 0 && (
        <div role="status" aria-live="assertive">
          Time's up!
        </div>
      )}
    </div>
  );
}

Best Practices

1. Use politely for non-urgent updates
2. Use assertively only for errors
3. Don't overuse live regions
4. Keep announcements concise
5. Test with screen readers

Testing with Screen Readers

Manual Testing

NVDA (Windows):

1. Download from nvaccess.org
2. Browse mode: Navigate with arrow keys
3. Focus mode: Interact with forms
4. Shortcut: Insert + Space to toggle modes

VoiceOver (macOS):

1. Enable: Cmd + F5
2. Navigate: VO + Arrow keys
3. Interact: VO + Space
4. Rotor: VO + U for navigation

Testing Checklist

• All images have meaningful alt text
• Headings create logical outline
• Form inputs have labels
• Errors are announced
• Interactive elements are keyboard accessible
• Focus order is logical
• Dynamic content is announced

Automated Testing

// axe-core testing
import { axe, toHaveNoViolations } from 'jest-axe';

describe('Accessibility', () => {
  it('should have no violations', async () => {
    const { container } = render(<MyComponent />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

// Playwright screen reader testing
const { test, expect } = require('@playwright/test');

test('screen reader announcement', async ({ page }) => {
  await page.goto('/');
  
  // Check for aria-live region
  const liveRegion = page.locator('[aria-live="polite"]');
  await expect(liveRegion).toBeAttached();
  
  // Perform action
  await page.click('button');
  
  // Check announcement
  await expect(liveRegion).toContainText('Action completed');
});

Common Issues

Issue	Impact	Fix
Missing alt text	Can't understand images	Add meaningful alt
No heading structure	Can't navigate	Use h1-h6 properly
Missing labels	Can't identify inputs	Add labels or aria-label
No focus indicator	Can't see focus	Add visible focus styles
Dynamic content silent	Miss updates	Use aria-live