WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Use of live regions for announcing additions and deleteions

for

Number of posts in this thread: 13 (In chronological order)

From: Robert Fentress
Date: Fri, May 15 2015 1:50PM
Subject: Use of live regions for announcing additions and deleteions
No previous message | Next message →

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

From: Lynn Holdsworth
Date: Fri, May 15 2015 2:46PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

Hi Rob,

As a screenreader user, I personally prefer the shortest message
possible that gives me enough information to know what happened. "Item
added" and "Item deleted" would work for me.

Making the live region invisible may cause it not to be read by
screenreaders on mobile devices.

KR, Lynn

On 15/05/2015, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
> 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
> > > > >

From: Don Mauck
Date: Fri, May 15 2015 4:03PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

I believe that live regions are not visible to a sighted user in the first place. I like your first choice the best and I think that is a good solution in my opinion.

From: Bryan Garaventa
Date: Fri, May 15 2015 5:19PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

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.

From: Don Mauck
Date: Fri, May 15 2015 7:08PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

Yes, that would be better than an ARIA live, alert would indeed handle this well.

From: Léonie Watson
Date: Sat, May 16 2015 8:59AM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

I believe that live regions are not visible to a sighted user in the first place. I like your first choice the best and I think that is a good solution in my opinion.

Any piece of content can be a live region. It can be visible to sighted people or hidden from sight.


HTH.
Léonie.


--
@LeonieWatson Tink.UK Carpe diem

From: Robert Fentress
Date: Sat, May 16 2015 1:28PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

Live regions can be visible to sighted users. Some would argue that they
should be, in many cases, as information provided to users who are blind
may be of use to sighted users, especially those with certain cognitive
disabilities or those with a narrow field of view. For instance, if
someone is using screen magnification, clicking the "Add" button at the top
of the page may result in items being added to the bottom of the list, and
this change may not be visible. A notification near the "Add" button
indicating either success in adding an item or an updated record count
might be a useful cue to those users as well.

Best,
Rob

On Sat, May 16, 2015 at 10:59 AM, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:

> I believe that live regions are not visible to a sighted user in the first
> place. I like your first choice the best and I think that is a good
> solution in my opinion.
>
> Any piece of content can be a live region. It can be visible to sighted
> people or hidden from sight.
>
>
> HTH.
> Léonie.
>
>
> --
> @LeonieWatson Tink.UK Carpe diem
>
>
> > > > >



--
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

From: Robert Fentress
Date: Sat, May 16 2015 1:44PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

The alert role is a type of live region, and I wasn't sure whether this was
appropriate or not. Alert suggested to my mind something vital and
unexpected, like a warning. The use cases I gave may or may not fit the
bill. I think they deserve to be assertive, so it may well be that alert
is best. It is an interesting question though: what deserves to be an
alert versus simply an unspecified live region. Do all assertive live
regions deserve to be alerts?

Best,
Rob

On Fri, May 15, 2015 at 9:08 PM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:

> Yes, that would be better than an ARIA live, alert would indeed handle
> this well.
>

From: Robert Fentress
Date: Sat, May 16 2015 1:51PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

Responses inserted below:

On Fri, May 15, 2015 at 4:46 PM, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi Rob,
>
> As a screenreader user, I personally prefer the shortest message
> possible that gives me enough information to know what happened. "Item
> added" and "Item deleted" would work for me.
>

So, if the record count live region was included, as I think it should be
anyway, due to the search field that dynamically updates the list of
records, do you think this would be enough? Or would both the record count
live region and a separate live region for the "Item added/deleted" be best?


>
> Making the live region invisible may cause it not to be read by
> screenreaders on mobile devices.
>

Good to know. Thanks!

Best,
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

From: Lynn Holdsworth
Date: Sat, May 16 2015 2:41PM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | Next message →

Hi Rob,

The various screenreaders might treat two alerts firing off at once very differently, so you may want to avoid this approach. Just to be sure the messages are read in the order you want, you could choose not to give the second region a role of "alert" and set its aria-live value to "polite".

KR, Lynn



> On 16 May 2015, at 20:51, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
>
> Responses inserted below:
>
> On Fri, May 15, 2015 at 4:46 PM, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Hi Rob,
>>
>> As a screenreader user, I personally prefer the shortest message
>> possible that gives me enough information to know what happened. "Item
>> added" and "Item deleted" would work for me.
>
> So, if the record count live region was included, as I think it should be
> anyway, due to the search field that dynamically updates the list of
> records, do you think this would be enough? Or would both the record count
> live region and a separate live region for the "Item added/deleted" be best?
>
>
>>
>> Making the live region invisible may cause it not to be read by
>> screenreaders on mobile devices.
>
> Good to know. Thanks!
>
> Best,
> 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
> > > >

From: Bryan Garaventa
Date: Sat, May 16 2015 10:18PM
Subject: Re: Use of live regions for announcing additions anddeleteions
← Previous message | Next message →

Very true, multiple firings of the Alert role will cause anything announced before it to be interrupted, so alerts in general should only be to convey very important information at one time.

Though less severe as Alert, the use of aria-live="assertive" will sometimes interrupt speech on some devices too, so this is important to keep in mind as well.

If you need to have multiple contiguous messages announced in succession, aria-live="polite" should be used.

From: _mallory
Date: Sun, May 17 2015 10:57AM
Subject: Re: Use of live regions for announcing additions anddeleteions
← Previous message | Next message →

I'm not sure what's changed since this list of tables was created,
but may be of use to check combinations.

http://maxdesign.com.au/jobs/sample-accessibility/10-notifications/index.html

_mallory

From: Robert Fentress
Date: Mon, May 18 2015 7:56AM
Subject: Re: Use of live regions for announcing additions and deleteions
← Previous message | No next message

Wow! Great matrix.

It raises a question that I've been wondering about, though. Are people
developing for Chrome, since it is so idiosyncratic and since, as of the
last data I saw, is used by almost no blind people?
http://webaim.org/projects/screenreadersurvey5/#browsers

If so, are you developing for Chrome Vox or for compatibility with other
screen readers?
On May 17, 2015 12:58 PM, "_mallory" < = EMAIL ADDRESS REMOVED = > wrote:

> I'm not sure what's changed since this list of tables was created,
> but may be of use to check combinations.
>
>
> http://maxdesign.com.au/jobs/sample-accessibility/10-notifications/index.html
>
> _mallory
> > > > >