WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Use of live regions for announcing additions and deleteions

for

From: Bryan Garaventa
Date: May 15, 2015 5:19PM

I've often encountered the same, after performing an action, nothing appears to happen and it's not clear if the item saved, was removed, or errored out in some way, and it's annoying having to hunt around for the confirmation message just to find out which one it is.

Since this is actually quite an important confirmation message type, I'd recommend using role=alert for this purpose.

If this isn't displayed visually, you can use an offscreen tag placed at the end of the Body element for this purpose, then use innerHTML to write the text message to it, which will then be announced.

The following class works well for this across desktop and mobile.

.offscreenText {
position: absolute;
clip: rect(1px1px1px1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

For the reason why, visit:
https://developer.yahoo.com/blogs/tenydnblog/clip-hidden-content-better-accessibility-53456.html

Then use a container like the following to write your message to, which should be appended at the end of the Body element.

<div class="offscreenText" role="alert"></div>

After the message is written to the container, it helps to clear the text after a couple of seconds so that it's not encountered during Virtual Buffer navigation on desktops.