WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Additions to list not read in live region

for

From: Aaron Cannon
Date: Feb 19, 2016 8:06AM

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