Re: Aria on <svg> <g> tags

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 11:51:52 UTC