E-mail List Archives
Thread: Safari Voice Over: Empty Groups
Number of posts in this thread: 7 (In chronological order)
From: Michael H
Date: Wed, Aug 18 2021 1:33PM
Subject: Safari Voice Over: Empty Groups
No previous message | Next message →
Hello,
In an effort to improve Voice Over on macOS, we have been adding
role="none" to elements where voice over will read "empty group".
Is this the best way to make it so Safari doesn't read "empty group" for
DOM that has children?
Is this a VO bug on macOS?
I find it strange, and slightly frustrating, that we have to add
role="none" to everything just to make voice over not say "empty group".
I was hoping someone could shed some light on why VO does this, and if it's
a bug or a feature? Why would someone care to know that the element they
are on is an empty group?
Thanks!
From: Birkir R. Gunnarsson
Date: Wed, Aug 18 2021 7:50PM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | Next message →
Can you give specific examples of pages/parts where Voiceover does this?
Sounds like a bug to me.
On 8/18/21, Michael H < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
>
> In an effort to improve Voice Over on macOS, we have been adding
> role="none" to elements where voice over will read "empty group".
>
> Is this the best way to make it so Safari doesn't read "empty group" for
> DOM that has children?
>
> Is this a VO bug on macOS?
>
> I find it strange, and slightly frustrating, that we have to add
> role="none" to everything just to make voice over not say "empty group".
>
> I was hoping someone could shed some light on why VO does this, and if it's
> a bug or a feature? Why would someone care to know that the element they
> are on is an empty group?
>
> Thanks!
> > > > >
--
Work hard. Have fun. Make history.
From: Michael H
Date: Wed, Aug 18 2021 11:27PM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | Next message →
On Wed, Aug 18, 2021 at 6:50 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> Can you give specific examples of pages/parts where Voiceover does this?
> Sounds like a bug to me.
Thank you Birkir for your reply and help, I really appreciate it!
I should have made a demo to begin with, as that did help me to clear up
some confusion in terms of what I thought the problem was.
Here's a demo with basic test cases:
https://codepen.io/mhulse/full/wvdLRxQ
I realized that we are seeing "Group" when using aria-label.
I think we started using role="none" as some developers tested VO in
Chrome, and it got rid of the "Group" thing (whereas in Safari, it looks
like "Group" appears in all examples with an aria-label).
If you test my demo above in Chrome, you'll notice it handles the examples
slightly differently.
With all that said, why does VO add "Group" when aria-label is applied? Is
there any way to avoid this?
Our UX a11y expert flags "Group" as a problem when they come across it ...
Needless to say, I've been wondering if it's a feature, or a bug, of macOS
VoiceOver/Safari?
Thank you!
From: Graham Armfield
Date: Thu, Aug 19 2021 3:33AM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | Next message →
Hi Michael,
In your Codepen example the rendered output seems to be a numbered list.
If that's what your aiming for I'm not sure why you would do it that way.
Surely an unordered list <ol> would be easier and give a more structured
result for screen reader users.
In my experience, using aria-label on a div doesn't usually give you much
as the div has no role.
If you're wanting to section areas of a page, you could use aria-label on a
section element, or try adding role="region" to the div.
Or alternatively use headings at the start of each section.
But maybe I am misunderstanding what you're trying to do.
Regards
Graham Armfield
Coolfields Consulting
From: glen walker
Date: Thu, Aug 19 2021 8:33AM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | Next message →
I don't have a Mac to try this on but was curious what VO on iOS did. It
just says "1 blah" through "6 blah" (and skips 5 since it's aria-hidden).
It doesn't mention groups.
I know the codepen is sort of contrived, trying to mimic what you're really
doing so am not sure what your original intent is. In general, divs and
spans are non-semantic to begin with so specifying role="none" or
role="presentation" seems superfluous. It shouldn't make a difference but
it sounds like VO on the Mac behaves differently with the role.
Also, regarding aria-label on divs, check out "2.10 Practical Support:
aria-label, aria-labelledby and aria-describedby" at
https://www.w3.org/TR/using-aria/#label-support. In particular, the third
last bullet point addressing divs and spans.
ARIA attributes should be your last resort to get things accessible.
Hopefully semantic html gets you the behavior you need, and if not, then a
little tweaking of ARIA can help. As pointed out often on this list,
follow the first rule of ARIA use, https://www.w3.org/TR/aria-in-html/#rule1,
which is *not* to use ARIA.
From: Michael H
Date: Thu, Aug 19 2021 5:30PM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | Next message →
Hello Graham! Thanks so much for the help! I really appreciate it!
On Thu, Aug 19, 2021 at 2:33 AM Graham Armfield
< = EMAIL ADDRESS REMOVED = > wrote:
> In your Codepen example the rendered output seems to be a numbered list.
Ah, sorry for the confusion there. I thought the numbers might be
helpful as a reference device. I can see where this caused confusion
so I removed the numbers:
https://codepen.io/mhulse/full/wvdLRxQ
> In my experience, using aria-label on a div doesn't usually give you much
> as the div has no role.
> If you're wanting to section areas of a page, you could use aria-label on a
> section element, or try adding role="region" to the div.
> Or alternatively use headings at the start of each section.
Great points and ideas, thank you!!!
> But maybe I am misunderstanding what you're trying to do.
Oh, I think I'm just confusing myself. We (my coworkers and I) started
adding "role=none" on a lot of elements in order to avoid VO from
reading it as a group. I think some folks were testing in Chrome, and
others in Safari (each aforementioned browser yields different
results, hence the lack of clarity in my questions and demo).
From: Michael H
Date: Thu, Aug 19 2021 5:35PM
Subject: Re: Safari Voice Over: Empty Groups
← Previous message | No next message
Hi Glen! Thank you for your help! It's greatly appreciated! :)
On Thu, Aug 19, 2021 at 7:34 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I don't have a Mac to try this on but was curious what VO on iOS did. It
> just says "1 blah" through "6 blah" (and skips 5 since it's aria-hidden).
> It doesn't mention groups.
Ugh, :: face palm ::
This feels like a moving target.
> I know the codepen is sort of contrived, trying to mimic what you're really
> doing so am not sure what your original intent is. In general, divs and
Ugh, I know. Sorry about that! Thanks for understanding.
I posted a more real-world example of what we do in our Angular SPA:
https://codepen.io/mhulse/full/KKmOqmv
Note that I recently re-worked the above example (in our real-world
app) to not use aria-label/role and just use
visuallyhidden/aria-hidden text ... It seems to behave much better in
Safari after the update.
> spans are non-semantic to begin with so specifying role="none" or
> role="presentation" seems superfluous. It shouldn't make a difference but
> it sounds like VO on the Mac behaves differently with the role.
I think we fixed VO in Chrome using role=none + aria-labels, but
caused Safari to say Empty Group for the same elements.
Sorry for the confusion.
> Also, regarding aria-label on divs, check out "2.10 Practical Support:
> aria-label, aria-labelledby and aria-describedby" at
> https://www.w3.org/TR/using-aria/#label-support. In particular, the third
> last bullet point addressing divs and spans.
Awesome! Thank you for the link and the quote!
I'll talk with my teammates to see if we can all get on the same page.
Thanks again for the help!