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: Shane Anderson
Date: May 27, 2017 5:05AM

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 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.
> > > > > > > > >
> > > > >