I was building a signup form. The moment I focused the email field, an error popped up: “Invalid email format.” I hadn’t typed a single character yet. The password confirmation field was the opposite. I typed the whole password, submitted the form, and only then did it say “Passwords don’t match” — after I’d already finished typing. Then I hit submit, and seven error messages showed up all at once. ...
I’d been happily shipping a React SPA for a while when an accessibility audit came back with this note: “The page changed, but the screen reader said nothing.” The page transition animated smoothly, the URL updated, the content changed… but as far as a screen reader user was concerned, nothing happened at all. That’s the hidden trap of SPAs. Traditional Websites vs. SPAs What happens when you click a link on a traditional multi-page site? ...
Click “Add to Cart” on an online store, and the badge in the top-right corner flips from 3 to 4. For someone who can see the screen, that’s feedback enough. But what about someone browsing the web with a screen reader — software that reads the screen aloud? A number quietly changing somewhere on the page tells them nothing. Whether the item was added, how many are in the cart now, whether it failed — there’s no way to know. ...
A green toast reading “Saved” pops up in the bottom-right corner of the screen. It disappears two seconds later. For someone using a mouse, that’s complete feedback. But for someone who isn’t looking at the screen? That toast never happened. There’s no way to know whether the save succeeded or not. This is exactly what live regions exist to solve. Mark a region ahead of time as one whose content can change without a page refresh, and when the text inside it changes, the screen reader reads it out automatically. One line — aria-live="polite" — is all it takes. ...