RE: Aria on <svg> <g> tags

<a role=“button”> won’t receive focus, so you would have to add an “href” or “tabindex” attribute.

Steve Green
Managing Director
Test Partners Ltd


From: ashraf aleem <ashraf.aleem@gmail.com>
Sent: Wednesday, August 16, 2023 1:05 PM
To: Peter Weil <peter.weil@wisc.edu>
Cc: Ms J <ms.jflz.woop@gmail.com>; w3c-wai-ig@w3.org
Subject: Re: Aria on <svg> <g> tags

<a role=“button”> is understandable as that way one doesn't have to give it a "tab-index", unlike the <g> for keyboard navigation.

Thanks
Ashraf

On Wed, Aug 16, 2023 at 6:53 AM Peter Weil <peter.weil@wisc.edu<mailto:peter.weil@wisc.edu>> wrote:
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<mailto: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