Upgrade success Alerts to role="alert" so they're read consistently #573
Conversation
echappen
changed the title
| role = 'status'; | ||
| } | ||
| if (type === 'error' || type === 'emergency') { | ||
| if (type === 'error' || type === 'emergency' || type === 'success') { | ||
| role = 'alert'; |
There was a problem hiding this comment.
Eleni! Thank you very much for pulling all this together. (And for all the research in #531!)
I’m curious if this change might potentially be trading one set of usability issues for another? At least, I was under the impression that role="alert"/aria-live="assertive" were to be reserved for urgent messages that need a timely response, as they’ll interrupt any other message currently being read to the user by their AT. I’m worried that could be differently disorienting than what we’ve already got.
Dunno; what do you think?
There was a problem hiding this comment.
That's a good point and I agree that this seems odd. In our use cases, success messages were not being read when they were given a role of status, which to me seemed even more disorienting for AT users. But they were read consistently when upgraded to role of alert.
There was a problem hiding this comment.
I'm up for fiddling with the /prototype/alert page more to see if we can still get status alerts to work more consistently. Adding and removing the status alert from the DOM gave no SR announcements. I tried keeping a status alert in the DOM while updating the text inside of it, but the SR would only read it the first time it changed.
There was a problem hiding this comment.
Thanks Eleni! I was finally able to access /prototype/alert (#575), and can confirm messages aren’t being read consistently in Safari/VO.
Out of curiosity, would it be possible to have an empty ARIA live region in the document by default, and inject our messages into that container? I wonder if that’d fix the timing issue. (I think we might have discussed this briefly on a call, and specifically that this wasn’t possible; apologies if I’m asking a pre-answered question.)
There was a problem hiding this comment.
I considered that, but ultimately concluded that it would be a workaround for alerts not acting properly, which they should be. I'd like for future devs to be able to use the Alert component wherever and have it work as expected. I'm happy to talk through it more (maybe at the next a11y jam?).
There was a problem hiding this comment.
That sounds great, let’s do it!
|
Closing in favor of #581 |
Changes proposed in this pull request:
/prototype/alert) that demonstrates how Alert components are read when they're added dynamically to a page.See comments on #531 for further explanation.
Related issues
Part of research for #531
Submitter checklist
Added logging is not capturing sensitive data and is set to an appropriate level (DEBUG vs INFO etc)Updated relevant documentation (README, ADRs, explainers, diagrams)Security considerations
None - UI only