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
>

Received on Wednesday, 16 August 2023 17:11:58 UTC