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  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>
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
>
> ________________________________________
> From: Léonie Watson <lwatson@tetralogical.com>
> Sent: Friday, June 17, 2022 8:46 AM
> To: Bristow, Alan; 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
>
> --
> Director @TetraLogical
> https://tetralogical.com
>
>
>