# Screen readers — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-screen-readers

> Optimize content for users who hear instead of see.

## How screen readers work

Popular: NVDA (Windows, free), JAWS (Windows, commercial), VoiceOver (macOS/iOS), TalkBack (Android). They read the **accessibility tree**—an abstract representation of the page semantics. Proper HTML, labels, alt text, and ARIA enable this tree.

## Common screen reader issues

Missing labels, vague link text ('Click here'), decorative images with alt, unlabeled form fields, no page title, no heading hierarchy, inaccessible carousels, infinite scroll.

## Using aria-label & aria-describedby

Provide visible or hidden context for screen reader users.

```html
<!-- aria-label for icon-only button -->
<button aria-label="Close menu">✕</button>

<!-- aria-describedby for additional info -->
<input 
  id="password" 
  type="password" 
  aria-describedby="pwd-hint"
/>
<p id="pwd-hint">Min 8 chars with upper, lower, number</p>

<!-- aria-label for image -->
<img src="logo.svg" aria-label="Company logo" />
```

## Live regions for updates

Use aria-live="polite" for notifications, aria-live="assertive" for urgent alerts. Content added to live regions is automatically announced.

## Testing with NVDA

Use Forms mode (Tab through forms), Browse mode (navigate with arrow keys), and Focus mode (interact with controls). Spend time with real screen readers.