WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Additions to list not read in live region

for

From: Robert Fentress
Date: Feb 19, 2016 10:53AM

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



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