Re: Aria on <svg> <g> tags

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