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: Roel Van Gils
Date: May 26, 2017 4:58PM

Thanks, Birkir.

I've tried the Live region playground, but again: Safari (Version 10.1.1 (12603.2.4)) doesn't announce any new or updated information. I'm using default VoiceOver settings. Can you conform that this works on your end? :)

I also followed your advice and changed my own example so this hidden on load (in the CSS):

`<div id="confirmation" role="region" aria-live="assertive">Thanks for subscribing</div>`

And its display property is set to 'block' when a button is activated, like so:

`document.querySelector('#confirmation').style.display = 'block';`

Unfortunately, this makes no difference. VoiceOver is quiet as a mouse :(

-- Roel

> On 26 May 2017, at 19:47, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>
> 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.
> > > >