WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Additions to list not read in live region

for

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

From: Robert Fentress
Date: Thu, Feb 18 2016 2:49PM
Subject: Additions to list not read in live region
No previous message | Next message →

Hello, all.

Just wanted to let folks know of a quirk I discovered in how live regions
are handled, in case anybody else goes searching on the list archives for a
solution.

If you have created an unordered list in your page using standard HTML
markup, and have made that list a live region, then JAWS with Firefox will
not voice any items added to that list, if aria-atomic is false. It
doesn't matter what you set aria-relevant to. Here is a simplified example:

<ul aria-live="polite" aria-atomic="false" aria-relevant="additions">

<li>item 1</li>
<li>item 2</li>

</ul>

Then, if you try to add the following to the list, nothing is voiced:
<li>item 3</li>

This is not an issue with anything else I've tested it on, only
JAWS/Firefox.

The best solution I've come up with so far, if you want to preserve the
list semantics, is to change the <ul> and <li> tags to divs, and set their
respective roles with aria to list and listitem. So that would be:

<div aria-live="polite" aria-atomic="false" aria-relevant="additions"
role="list">

<div role="listitem">item 1</div>
<div role="listitem">item 2</div>

</div>

This seems to work, but is not ideal.

If anyone has a better idea or knows what I'm doing wrong, let me know.
Either way, I thought I'd contribute to the body of knowledge, either
through example or non-example, as the case may be.

Here are a couple of codepens for the non-example and example


- Non-example using <ul> and <li> broken in JAWS/FF
http://codepen.io/robfentress/pen/ZQNpjJ

- Example using aria
http://codepen.io/robfentress/pen/YwbGjg




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: James Nurthen
Date: Thu, Feb 18 2016 5:00PM
Subject: Re: Additions to list not read in live region
← Previous message | Next message →

This sounds very similar to a bug we currently have open with Freedom
Scientific. This used to work fine (JAWS 16) but broke sometime in the JAWS
17 release.

On Thu, Feb 18, 2016 at 1:49 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:

> Hello, all.
>
> Just wanted to let folks know of a quirk I discovered in how live regions
> are handled, in case anybody else goes searching on the list archives for a
> solution.
>
> If you have created an unordered list in your page using standard HTML
> markup, and have made that list a live region, then JAWS with Firefox will
> not voice any items added to that list, if aria-atomic is false. It
> doesn't matter what you set aria-relevant to. Here is a simplified
> example:
>
> <ul aria-live="polite" aria-atomic="false" aria-relevant="additions">
>
> <li>item 1</li>
> <li>item 2</li>
>
> </ul>
>
> Then, if you try to add the following to the list, nothing is voiced:
> <li>item 3</li>
>
> This is not an issue with anything else I've tested it on, only
> JAWS/Firefox.
>
> The best solution I've come up with so far, if you want to preserve the
> list semantics, is to change the <ul> and <li> tags to divs, and set their
> respective roles with aria to list and listitem. So that would be:
>
> <div aria-live="polite" aria-atomic="false" aria-relevant="additions"
> role="list">
>
> <div role="listitem">item 1</div>
> <div role="listitem">item 2</div>
>
> </div>
>
> This seems to work, but is not ideal.
>
> If anyone has a better idea or knows what I'm doing wrong, let me know.
> Either way, I thought I'd contribute to the body of knowledge, either
> through example or non-example, as the case may be.
>
> Here are a couple of codepens for the non-example and example
>
>
> - Non-example using <ul> and <li> broken in JAWS/FF
> http://codepen.io/robfentress/pen/ZQNpjJ
>
> - Example using aria
> http://codepen.io/robfentress/pen/YwbGjg
>
>
>
>
> 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: Aaron Cannon
Date: Fri, Feb 19 2016 8:06AM
Subject: Re: Additions to list not read in live region
← Previous message | Next message →

I recently filed a ticket for a somewhat similar issue on NVDA:
https://github.com/nvaccess/nvda/issues/5749

Aaron

On 2/18/16, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> This sounds very similar to a bug we currently have open with Freedom
> Scientific. This used to work fine (JAWS 16) but broke sometime in the JAWS
> 17 release.
>
> On Thu, Feb 18, 2016 at 1:49 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hello, all.
>>
>> Just wanted to let folks know of a quirk I discovered in how live regions
>> are handled, in case anybody else goes searching on the list archives for
>> a
>> solution.
>>
>> If you have created an unordered list in your page using standard HTML
>> markup, and have made that list a live region, then JAWS with Firefox will
>> not voice any items added to that list, if aria-atomic is false. It
>> doesn't matter what you set aria-relevant to. Here is a simplified
>> example:
>>
>> <ul aria-live="polite" aria-atomic="false" aria-relevant="additions">
>>
>> <li>item 1</li>
>> <li>item 2</li>
>>
>> </ul>
>>
>> Then, if you try to add the following to the list, nothing is voiced:
>> <li>item 3</li>
>>
>> This is not an issue with anything else I've tested it on, only
>> JAWS/Firefox.
>>
>> The best solution I've come up with so far, if you want to preserve the
>> list semantics, is to change the <ul> and <li> tags to divs, and set their
>> respective roles with aria to list and listitem. So that would be:
>>
>> <div aria-live="polite" aria-atomic="false" aria-relevant="additions"
>> role="list">
>>
>> <div role="listitem">item 1</div>
>> <div role="listitem">item 2</div>
>>
>> </div>
>>
>> This seems to work, but is not ideal.
>>
>> If anyone has a better idea or knows what I'm doing wrong, let me know.
>> Either way, I thought I'd contribute to the body of knowledge, either
>> through example or non-example, as the case may be.
>>
>> Here are a couple of codepens for the non-example and example
>>
>>
>> - Non-example using <ul> and <li> broken in JAWS/FF
>> http://codepen.io/robfentress/pen/ZQNpjJ
>>
>> - Example using aria
>> http://codepen.io/robfentress/pen/YwbGjg
>>
>>
>>
>>
>> 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: Robert Fentress
Date: Fri, Feb 19 2016 10:53AM
Subject: Re: Additions to list not read in live region
← Previous message | No next message

So, I think I've discovered a better solution. If you surround the list
with a div and make that the live region, rather than the list itself, it
works with standard html list markup.
Here is the codepen:
http://codepen.io/robfentress/pen/XXwPpR

Still not sure why it didn't work before though.

On Fri, Feb 19, 2016 at 10:06 AM, Aaron Cannon <
= EMAIL ADDRESS REMOVED = > wrote:

> I recently filed a ticket for a somewhat similar issue on NVDA:
> https://github.com/nvaccess/nvda/issues/5749
>
> Aaron
>
> On 2/18/16, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> > This sounds very similar to a bug we currently have open with Freedom
> > Scientific. This used to work fine (JAWS 16) but broke sometime in the
> JAWS
> > 17 release.
> >
> > On Thu, Feb 18, 2016 at 1:49 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Hello, all.
> >>
> >> Just wanted to let folks know of a quirk I discovered in how live
> regions
> >> are handled, in case anybody else goes searching on the list archives
> for
> >> a
> >> solution.
> >>
> >> If you have created an unordered list in your page using standard HTML
> >> markup, and have made that list a live region, then JAWS with Firefox
> will
> >> not voice any items added to that list, if aria-atomic is false. It
> >> doesn't matter what you set aria-relevant to. Here is a simplified
> >> example:
> >>
> >> <ul aria-live="polite" aria-atomic="false" aria-relevant="additions">
> >>
> >> <li>item 1</li>
> >> <li>item 2</li>
> >>
> >> </ul>
> >>
> >> Then, if you try to add the following to the list, nothing is voiced:
> >> <li>item 3</li>
> >>
> >> This is not an issue with anything else I've tested it on, only
> >> JAWS/Firefox.
> >>
> >> The best solution I've come up with so far, if you want to preserve the
> >> list semantics, is to change the <ul> and <li> tags to divs, and set
> their
> >> respective roles with aria to list and listitem. So that would be:
> >>
> >> <div aria-live="polite" aria-atomic="false" aria-relevant="additions"
> >> role="list">
> >>
> >> <div role="listitem">item 1</div>
> >> <div role="listitem">item 2</div>
> >>
> >> </div>
> >>
> >> This seems to work, but is not ideal.
> >>
> >> If anyone has a better idea or knows what I'm doing wrong, let me know.
> >> Either way, I thought I'd contribute to the body of knowledge, either
> >> through example or non-example, as the case may be.
> >>
> >> Here are a couple of codepens for the non-example and example
> >>
> >>
> >> - Non-example using <ul> and <li> broken in JAWS/FF
> >> http://codepen.io/robfentress/pen/ZQNpjJ
> >>
> >> - Example using aria
> >> http://codepen.io/robfentress/pen/YwbGjg
> >>
> >>
> >>
> >>
> >> 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
> >> > >> > >> > >> > >>
> > > > > > > > > >
> > > > >



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