E-mail List Archives
Thread: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
Number of posts in this thread: 7 (In chronological order)
From: Roel Van Gils
Date: Fri, May 26 2017 11:30AM
Subject: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Fri, May 26 2017 11:47AM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | Next message →
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 ADDRESS 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.
From: Chaals is Charles McCathie Nevile
Date: Fri, May 26 2017 12:05PM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | Next message →
It's an animated SVG, not a text document, but
http://svg-access-w3cg.github.io/use-case-examples/beaker.html uses a
live region that should work - did last time I checked in VoiceOver and
Safari or Blink-based browsers.
Not sure if that answers the question you were really trying for though.
cheers
On 26/05/17 19:30, Roel Van Gils 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
>
>
> > > > --
Charles McCathie Nevile - standards - Yandex
= EMAIL ADDRESS REMOVED = - Find more at http://yandex.com
From: Roel Van Gils
Date: Fri, May 26 2017 4:58PM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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.
> > > >
From: Shane Anderson
Date: Sat, May 27 2017 5:05AM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | Next message →
Roel,
I tested your codepen and the ARIA live worked fine for me.
Safari version 10.1.1 (12603.2.4)
MacOS version 10.12.5 (16F73)
Regards
Shane Anderson
On Fri, May 26, 2017 at 6:58 PM, Roel Van Gils < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > > > > > > >
> > > > >
From: Jonathan Cohn
Date: Sat, May 27 2017 8:32AM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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.
>> >> >> >> >
> > > >
From: Roel Van Gils
Date: Sat, May 27 2017 3:51PM
Subject: Re: Looking for aria-live examples that actually work as expected on Desktop Safari (or Chrome) with VoiceOver
← Previous message | No next message
> On 27 May 2017, at 16:32, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
>
> Open the VoiceOver utility and move over to the web section and verify that this check box is checked:
>
> Enable Live Regions checked checkbox
Thanks, Jonathan! 'Enable Live Region' was checked. I reset VoiceOver to its default settings ('File' → 'Reset All VoiceOver Settings' in VoiceOver Utility) and seems to have fixed it :) Most aria-live on the web (and my own) work find now. i must have tinkered a bit too much with its settings, I guess. Still weird though.
Cheers,
Roel