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: Jonathan Cohn
Date: May 27, 2017 8:32AM

Open the VoiceOver utility and move over to the web section and verify that this check box is checked:

Enable Live Regions checked checkbox
Best wishes,

Jonathan Cohn



> On May 26, 2017, at 6:58 PM, Roel Van Gils < <EMAIL REMOVED> > wrote:
>
> 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.
>> >> >> >> >
> > > >