Use aria-live for Panel notifications and form controls

[joachimesque]

Description

When a page is locked (or not yet saved), sighted people can see an orange button that’s always on the screen as a reminder to save the page. Due to how vocalization works, it’s harder for screenreader users to notice that the page still needs to be saved, and they have to be extra careful not to lock the page for other users.

Expected behavior

One solution, proposed by one of our team members who is blind, would be to add an indication in the <title> of the page. Many apps and some CMSs use an asterisk at the start of the page title as a subtle but effective way to remind the author (sighted or blind) that something is up with the page, like the need for changes to be saved.

Screenshots

Additional context

I filed this as a bug, because it concerns accessibility. For blind people who rely on screen readers, a crucial element of the panel interface is (not altogether missing, but) very hard to be aware of.

Thanks in advance!

[bastianallgeier]

I'm honest, I have no idea if this is a god solution from an a11y standpoint. Do you have more information about it? Does the changed title actually help?

[distantnative]

Was wondering this myself or if there is rather a solution with aria live attributes.

[distantnative]

I have rephrased the title. After reading a bit, I don't think changing the title tag is the appropriate way to handle this.

However, we should make use more of role="status" and aria-live, both for our Panel notifications but also to indicate the change from saved to unsaved and vice-versa. https://a11y-blog.dev/en/articles/aria-live-regions/

I have made a first experiment, but ran into the wall that after typing in a field, VoiceOver would start to announce my aria-live message, only to get interrupted a second later (before finishing the message) by announcing the field value again. We would probably need some help from someone more knowledgable about this than us to figure out the best way to implement it.