Announcing What Changed

The specific problem with React. Content appears and disappears without a page load. Someone reading the screen visually notices immediately. Someone using a screen reader is told nothing, because nothing about the document told the browser to say anything.

This affects exactly the four states from module 7: results arriving, errors appearing, empty states, and loading finishing.

Live regions. Mark the element that changes so it is announced when it updates.

role="alert" for errors, announced immediately and interrupting.

aria-live="polite" for status, announced at the next natural pause.

The element must exist in the document before the message appears. Rendering the live region and its content at the same moment often announces nothing, because there was no change to notice.

Try it

Change it to {msg && <p aria-live="polite">{msg}</p>}. It looks identical and announces far less reliably, because the region arrives at the same instant as the text.

loading editor…

loading React…

The paragraph is always rendered. Only its contents change, which is what a live region is designed to detect.

◈ Graded Component

Build an accessible search result announcer. Render a real labeled input with id q whose label reads Search and is properly associated. Render a real button with id go. Clicking it must put the text 3 results found into a status element with id status that is present in the document from the very first render and carries aria-live of polite. Before the button is clicked, that element must be empty.

Checked against what your component renders and how it responds, not against how you wrote it. 4 visible and 3 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back