WebAIM - Web Accessibility In Mind

E-mail List Archives

Additions to list not read in live region

for

From: Robert Fentress
Date: Feb 18, 2016 2:49PM

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