What screen readers hear, and the WCAG numbers

Below is a transcript of a screen reader reading an invoice aloud. It presses Save by itself once a lap; flip the mode, or press Save yourself mid-sentence.

A sighted person sees "Saved" appear. A screen-reader user hears it only if something announces it, and how it is announced decides whether it helps or barges in.

The ladder: stop at the first rung that fits

1. Focus moves there anyway

   An opened dialog, the first invalid field after Submit. Moving focus is the announcement. Add nothing.

2. It belongs to one control

   A field's error, a character count: aria-describedby on the input, so it is read with the field.

3. Not urgent, not tied to a control

   A toast, "Saved", "12 results", "Loading…": a polite live region, role="status".

4. Urgent, not tied to a control

   A form-level failure, a session about to expire: role="alert", and nothing else gets it.

role="status" is the polite one; role="alert" is assertive and interrupts. Default to polite. The common over-correction is an assertive success toast: "Saved" now cuts off whatever the user was listening to.

Making the region actually speak

Live regions are fussy. Three rules make them reliable:

• Render the region empty first, then change its text. A region that mounts already holding its message is announced inconsistently.
• Keep messages short and whole. The region re-reads everything inside it on each change.
• Never move focus to a toast. Announce it; leave focus where the person is working.

{msg && <div role="status">{msg}</div>}

<div role="status" className="sr-only">{msg}</div>

For loads, put aria-busy="true" on the updating area, say "Loading…" politely, then the outcome: "Loaded, 12 results".

Hiding, two opposite ways

Never put aria-hidden on or above a button, link or input. Tab still lands there, and the reader says nothing exists. To hide something interactive, use inert.

Alt text by purpose

A missing alt is worse than an empty one: the reader falls back to the file name.

The numbers that make a finding

In a review, "this feels inaccessible" is an opinion. A WCAG criterion with its number is a finding. WCAG 2.2 Level A and AA are the rules products are held to:

Disabled controls and logos are exempt from contrast. The 44px touch target and "one <h1> per page" are good advice but not AA, so they are recommendations, never the top severity.

Audit this screen for screen-reader output and WCAG 2.2 AA:
- Pick the quietest announcement per change: focus move, aria-describedby, role="status", role="alert" (failures that block only).
- Live regions are always in the DOM and start empty; never focus a toast.
- Decorative icons aria-hidden; nothing aria-hidden contains a focusable element.
- Alt text by purpose; empty alt for decoration.
- Report each failure as: element, WCAG criterion number, measured value, threshold. Don't change colors unless I ask.