WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver

for

From: Birkir R. Gunnarsson
Date: May 26, 2017 11:47AM

YOu can tinker with the Live region playground
https://dequeuniversity.com/library/aria/content-feedback/liveregion-playground
(this is an old example I created with one of the aXe developers a few
years ago when I worked for Deque).

The announcing of live regions can be affected by user settings,
screen reader compatibility and the way the content is updated.

Best compatibility is when you inject content into a live region
container dynamically.
HTML:

<div aria-live="assertive" id="l1">
</div>
JavaScript:

document.getElementById("l1").texContent="live region text".

Some combinations work when you have content inside a live region but
change its display status:
HTML:
<div aria-live="assertive">
<span id="lr2" class="display: none;">live region content</span>
</div>
Javascript:
Remove the display: none class or change it to display: block.

If you use JavaScript to inject an element that already has a live
region attribute, it often does not get announced by a screen reader.

If you think about it, when you do that you don't change the content
inside the live region element itself, so the accessible event may not
get fired by the browser.

Ditto if you have a live region element that gets populated on page
load, it often ends up not being announced.




On 5/26/17, Roel Van Gils < <EMAIL REMOVED> > wrote:
> Hi,
>
> Does anyone have links to aria-live examples that actually work on macOS
> with VoiceOver?
>
> The examples by Terrill Thompson
> (https://terrillthompson.com/tests/aria/live-scores.html) and most of Heydon
> Pickering's practical ARIA Examples
> (http://heydonworks.com/practical_aria_examples/) don't work as expected.
>
> I've also set up this (rather classic) example myself:
>
> https://codepen.io/roelvangils/pen/BRErYZ
>
> It does work on iOS VoiceOver, but I can't get VoiceOver on macOS to alert
> the change in `<div class="confirmation" role="region"
> aria-live="assertive"></div>`. I find this odd because I remember tinkering
> with aria-live a few months ago and then in worked fine. VoiceOver on macOS
> keeps quiet when the element is updated :(
>
> Perhaps I'm doing something wrong. Thanks for your help.
>
> Thanks,
> Roel
>
> --
> Roel Van Gils
> Inclusive Design & Accessibility Consultant
>
> Tel.: +32 473 88 18 06
> Skype: roelvangils
> Twitter: twitter.com/roelvangils
> LinkedIn: linkedin.com/in/roelvangils
>
>
> > > > >


--
Work hard. Have fun. Make history.