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

Received on Friday, 17 June 2022 12:46:44 UTC