Re: Accessible name on SVG and the G element

Thanks Bryan,


I've not tried that and only seen foreignObject mentioned, so something interesting to read up on

: )


I will try, likely Mon, and see what happens, thanks again.


Regards,

Alan
. . . . -   . . - - -
Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>
________________________________
From: bryan rasmussen <rasmussen.bryan@gmail.com>
Sent: Friday, June 17, 2022 12:06 PM
To: Bristow, Alan
Cc: Léonie Watson; w3c-wai-ig@w3.org
Subject: Re: Accessible name on SVG and the G element

Hey,

Haven't tested this but what about a foreignObject elementhttps://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject<http://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject>  inside of the g, and aria on that, or aria labels in the content inside the foreignObject

Best Regards,
Bryan Rasmussen

On Fri, Jun 17, 2022 at 3:09 PM Bristow, Alan <Alan.Bristow@elections.ca<mailto:Alan.Bristow@elections.ca>> wrote:
Thank you Léonie,

We do have role="img" on the SVG, but not on the G; MDN says it *can* be used on the G.., but perhaps it is only beneficial when used on the SVG..?

As for the Gs being buried deep in an SVG, sadly yes they are
: (

Given:

> if the <g> element is buried within a more complex SVG the results are a lot less certain.

it seems the practical solution, today at least, is to avoid relying on aria-label on G elements, and use an alternate method, my go-tos would be:

1. aria-labelledby on the svg
2. concatenating the texts that *would* have been in the G aria-labels, into a single aria-label on the SVG

Regards,

Alan
. . . . -   . . - - -
Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>

________________________________________
From: Léonie Watson <lwatson@tetralogical.com<mailto:lwatson@tetralogical.com>>
Sent: Friday, June 17, 2022 8:46 AM
To: Bristow, Alan; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: Accessible name on SVG and the G element

You can use aria-label on a <g> element but you'll also need to use
role="img". Otherwise, the label will not be recognised.

You'll also want to do some thorough browser and screen reader testing.
In isolation a <g> element with these ARIA attributes will likely be
well supported, but if the <g> element is buried within a more complex
SVG the results are a lot less certain.

Léonie



On 17/06/2022 14:02, Bristow, Alan wrote:
> Hi,
>
> Due to no (in my very limited experience) screen reader support for ARIA-LABEL on the G element (inside the SVG element), I am considering concatenating all label info from G elements into one "sentence" for the content of the ARIA-LABEL on the SVG element. It seems an ARIA-LABEL on the SVG element IS read out.
>
>
> Background
>
> There are lots of articles on accessibly naming SVGs. I don't think I've seen one that explicitly uses ARIA-LABEL with the G element, or says not to, but I see that it is a valid attribute https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g#aria_attributes
>
> A JavaScript library my client is using to help the automated build of SVGs from data, is producing SVGs with G elements, each G element with an ARIA-LABEL, yet my AT (NVDA+Chrome+Win10) plus one or two I've read about, are not reading those ARIA-LABELs. Changing nothing except hand-editing so an ARIA-LABEL is on the SVG element results in that ARIA-LABEL being read out.
>
> Does anyone know about this?
>
> (I hope this is sufficiently a11y focused to be allowed here).
>
> Thanks in advance
>
> Regards,
>
> Alan
>
> . . . . -   . . - - -
> Alan Bristow ( he / him / il )
> Web Developer / Développeur Web
> Elections Canada / Élections Canada
> alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>

--
Director @TetraLogical
https://tetralogical.com