button to announce remaining time on test - #3099
Conversation
|
Claude suggests that clicking the button could trigger the toast that we already have. I'm gong to try that and update here if it seems good. |
b73ce92 to
6b425aa
Compare
|
First, this adds a button under the Gateway Test countdown clock that says "Announce time remaining". If that button is pushed, there is a toast with the current amount of remaining time. This is an aria live region, and a screen reader user will hear the report. Now we have a button for a user to ask "How much time do I have left?" This means that the timer itself can be safely hidden from screen readers. So it is. This also potentially resolves an issue with the toasts that already exist (at 90 seconds, 45 seconds, and 0 seconds) where some screen readers were not announcing them. The issue might have been that the toast was inserted into the DOM fully constructed. Instead, inserting it empty, then updating it with content is the reliable way to get all (working) screen readers to read the update. As usual, I haven't had success actually trying a screen reader to directly hear that this works. |
|
And this makes one small styling improvement about rounded corners on the alert toasts that already existed. |
|
How do other platforms deal with this? I think a button is good, but there are already lots of buttons on tests. Is there a way to make the button only visible to screen readers? Would that be something worth considering or would it be nice to have that button there for everyone? |
|
The toast that announces the time is not good in dark mode. |
No, this is not possible without violating a different accessibility issue. Users still need to get focus onto the button to use it. If you let focus land on an invisible thing, it is confusing to a sighted user. |
6b425aa to
00ed429
Compare
I added |
Co-authored-by: Claude <[email protected]>
00ed429 to
18b8d83
Compare
| requestAnimationFrame(() => { | ||
| toastContainer.querySelector('.toast-body span').textContent = text; | ||
| bsToast.show(); | ||
| }); |
There was a problem hiding this comment.
This doesn't fix Gnome Orca not announcing the content. I wouldn't adjust code to try to get Gnome Orca to work. It often is not quite fully reliable for testing. That is why I try to test with NVDA. Unfortunately, that requires booting to windows.
There was a problem hiding this comment.
Ah, well that's too bad. It still sounds right to me that we should not insert the fully constructed div when it's an aria-live region. The explanation from Claude sounds reasonable, that some screen readers might only respond to an existing live region getting an update and not to a live region being inserted.
Are you recommending changes to the code here?
There was a problem hiding this comment.
I am not sure what is different with our code, but the live example at https://getbootstrap.com/docs/5.3/components/toasts/ is announced by Gnome Orca.
There was a problem hiding this comment.
Claude has a few theories about why Gnome Orca is struggling here. I'll wait to discuss them with you sometime in the future.
3 participants
See revised description two posts below.
First, this adds a button under the Gateway Test countdown clock that says "Announce time remaining". If that button is pushed, a visually hidden div is updated with the current amount of remaining time. This div is an aria-live region, and a screen reader user will hear the time.The button itself should not be visually hidden. So there is a bit of an oddity here for sighted users who see this button and might think it does nothing. Are there any suggestions for improving that?Now we have a button for a user to ask "How much time do I have left?" This means that the timer itself can be safely hidden to screen readers. So it is.As usual, I haven't had success actually trying a screen reader to hear that this works. Related, I am not 100% sure that the time amount is formatted in a helpful way (e.g. "5 minutes", not "300 seconds"). But I am guessing thatformatTimehandles that well.