Re: Aria on <svg> <g> tags

Hi

Yep, I used aria-labelledby as I have <text> in the SVG, so it made sense to point at that instead of create a separate aria-label.

Francis

From: Peter Weil <peter.weil@wisc.edu>
Date: Wednesday, August 16, 2023 at 10:12
To: Storr, Francis <francis.storr@intel.com>
Cc: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: Re: Aria on <svg> <g> tags
Thanks Francis. This is great.

Question: when you wrote  “I had to use aria-labelledby on the “button” to guarantee the text label would be announced”, did you mean aria-labelledby as opposed to aria -label?

Looking back at my own code, I don’t know why why I used aria-label instead of aria-labelledby, since I easily could have used the latter. I’ll probably go in and change that.

Thanks!

Peter

> On Aug 16, 2023, at 11:55 AM, Storr, Francis <francis.storr@intel.com> wrote:
>
> I worked on something recently and used the same link-with-button-role technique as Peter.
>
> With this code:
> <nav aria-labelledby=”…”>
>   <svg>
>     <g role=”list”>
>       <g role=”listitem”>
>         <a aria-labelledby=”text-label-1” href=”#somewhere-on-the-same-page” role=”button”>
>            <text id=”text-label-1“>text label</text>
>         </a>
>     </g>
>      …
>     </g>
>   </svg>
> </nav>
>
> You get these results:
>
> MacOS 13.5 + Edge 115 + VoiceOver: “[text label], button, group”
> MacOS 13.5 + Safari + VoiceOver: “[text label], button”
> MacOS 13.5 + Firefox 116 + VoiceOver: “[the full page URL including anchor] [text label], button, group”
>
> Win11 + Edge 115 + NVDA 2023.1: “[text label], button, graphic”
> Win11 + Firefox 116 + NVDA 2023.1: “[text label], button”
> Win11 + Edge 115 + JAWS 2023.2307: “[text label], button”
> Win11 + Firefox 116 + JAWS 2023.2307: “[text label], button”
>
> Note: from memory, I had to use aria-labelledby on the “button” to guarantee the text label would be announced. I can’t remember which combination of browser + screen reader didn’t work as expected without that.
>
> Hope that helps.
>
> Francis
>
> From: Peter Weil <peter.weil@wisc.edu>
> Date: Wednesday, August 16, 2023 at 05:55
> To: Marc Haunschild <haunschild@mhis.onmicrosoft.de>
> Cc: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
> Subject: Re: Aria on <svg> <g> tags
>
> Marc,
>
> I wish we had the time and resources to do real testing! (standard complaint about budgeting goes here). I did test with Safari and Voiceover on my Mac. Other than that, I relied on others (colleagues and users) to report issues. This feature was for a special promotion of the site, and there was fairly heavy usage for a while, with no problem reports, for what it’s worth. I have not looked at the analytics, either.
>
> I’d be the first to say that this is little assurance that this worked well for various screenreader/browser combos. It’s frustrating, but these are the constraints under which we work.
>
> Peter
>
> > On Aug 16, 2023, at 7:00 AM, Marc Haunschild <haunschild@mhis.onmicrosoft.de> wrote:
> >
> > What combinations of browsers, screenreaders, operating systems have you used for testing?
> >
> > Maybe you can post the results? - That’ll be quite interesting and useful.
> >
> > --
> > Mit freundlichen Grüßen
> >
> > Marc Haunschild
> > https://Accessibility.Consulting

> >
> >> Am 16.08.2023 um 13:53 schrieb Peter Weil <peter.weil@wisc.edu>:
> >>
> >> I had a situation like this recently when I needed clickable areas within <g> elements of an svg map. Since the <button> element isn’t allowed inside the <g> element, but an anchor (<a>) is, I used <a role=“button”>. And gave it an aria-label, too. I’m no expert at working with SVGs by any stretch, but this seems to work fine and doesn’t cause any issues that I’m aware of.
> >>
> >> Peter
> >>
> >>> On Aug 16, 2023, at 6:08 AM, Ms J <ms.jflz.woop@gmail.com> wrote:
> >>> Hello
> >>> If there is an interactive svg with <g> tags made into interactive buttons, can aria such as role=button be used on these <g> elements? Is that legitimate mark-up? I can't find any resources on this.
> >>> Thanks
> >>> Sarah
> >>> Sent from Outlook for iOS
> >>
> >>
> >>
> >> --
> >> Peter Weil
> >> Web Developer
> >> Web Services, University Marketing
> >> Office of Strategic Communications
> >> University of Wisconsin–Madison
> >> 608-220-3089
>