[Accessibility] Screenreader users should be notified that their button presses do something

[citelao]

Repro

Use a screenreader to play the game:

1. Start the game; start VoiceOver or Narrator
2. Navigate to an action button (tab works)
3. Press it with enter/space/VO+space/however you like to activate buttons with keyboard. I do not hear the result of my action; I'm left thinking nothing occured.

Expected behavior

I get the experience of a slot machine rolling: "Will you succeed? Quite probably!" and then "SUCCESS!"

Potential mitigations

This is a bit tough, since doing aria-live can be tricky.

You want to make the slot machine an aria-live region. I've made an example CodePen; which is aria-live="polite". assertive regions can be annoying.

Unfortunately, I don't know of a good way of recreating a "spinner" in just audio. If I were designing this as a self-voicing app (it talks by itself rather than requiring a screenreader), I might introduce a satisfying spinner click sound for all the "success" hearts.

I need to investigate how navigation to the next section should work.

[citelao]

I did a bit more investigation, and it might be worth putting an aria-live tag on the entire book, instead, or looking into role="log" for the book.

Your code doesn't work too well with the whole book being live, although it is a bit nicer by my preference. I don't think that's reason enough to pursue it, though 😁.

Unfortunately, I don't have a good answer for the "proper" experience at the moment. Anything more than aria-live on your slot machine is ease-of-use rather than strict functionality. Certainly worth considering for a full release.