Description
My research
#944 discusses how an SVGGElement (<g>
) can have aria-label assigned to them per spec 1.2. However, axe-core
(used by Google Lighthouse for accessibility reporting) will flag aria-label usage on <g>
without text content as an error because of their accessibility supported standard.
I assume this is because user agents interpret the layout of SVG and HTML elements to be unimportant by default. This default makes sense for responsive web design, but also means we need to indicate when graphic elements have semantic meaning explicitly (i.e. tick marks, bars in a bar chart). So when Plot labels a group of graphics with aria-label
, user agents assume they've encountered a "label for nothing" because they cannot interpret the meaning of text-less content without help.
Possible Solutions
The graphics-object
role is similar to the group
role, except visual appearance is implied to have meaning. Since the <svg>
element is a graphics-document
by default, it makes sense to change the role of a <g>
which has an aria-label
to graphics-object
. This change should indicate the placement text and graphics in a chart are noteworthy, and thus should be a flat bonus to accessibility. (Needs verification though, because I could be interpreting the aria standards badly.)
The <desc>
element is another solution to this problem. It allows you to add text content to SVG graphics without it being visible. User agents then use that text content to derive meaning for elements with no semantics by default, like <g>
. This could be nice for small charts, but I don't think it would scale well.