WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Use of live regions for announcing additions and deleteions

for

From: Don Mauck
Date: May 15, 2015 7:08PM

Yes, that would be better than an ARIA live, alert would indeed handle this well.
-----Original Message-----
From: Bryan Garaventa [mailto: <EMAIL REMOVED> ]
Sent: Friday, May 15, 2015 5:19 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Use of live regions for announcing additions and deleteions

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.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Robert Fentress
Sent: Friday, May 15, 2015 12:51 PM
To: WebAIM Discussion List
Subject: [WebAIM] Use of live regions for announcing additions and deleteions

Hope you folks can help me on this one.

*Scenario:*

- There is a rich internet application containing a list of items
- At the end of any item in the list is a button menu containing a
number of options for what to do with the item, one of which is to delete it
- At the top of the list is an "Add" button, which launches a dialog
containing a form. Filling out the form and hitting the "Save" button adds
an item to the list.

*Question:*

- Is it appropriate to alert users who are using a screen reader that
they have successfully added or deleted an item by using a live region?

*Justification:* A sighted user would immediately see that they had succeeded in their task, because the list would update, but a blind user would have to consciously scan the list to determine whether they had succeeded. This all assumes that focus would go to an appropriate place, such as to an item adjacent to the deleted item in the case of deletes, or back to the "Add" button in the case of adding an item.

*Options:*

- Whether or not the live region should be visually hidden
- What the live region should say:
1. "Item successfully deleted" and "Item added" *or*
2. "Item successfully deleted. Focus moving to next item." and "Item
added" *or*
3. It could simply be a counter indicating how many items are in the
list, eg. "5 items". This option is nice, since it also works for the live
filter search that is above the list, which automatically updates the
number of items displayed as the user types.
4. Some combination of the above.

Is any of this necessary or would success simply be assumed by the user, and intrusive notifications to that effect would be distracting?

So, how about it folks? What do you think?

Thanks,
Rob

--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061