observablehq / observablehq/plot
SVGGElements without text content are not meaningful to user agents
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the related #944 discussion and the linked SVG and graphics-ARIA specifications. Verify how axe-core and Lighthouse interpret aria-label on textless elements, and compare the graphics-object and approaches. Done means establishing and implementing a verified accessibility resolution, with its behavior documented or covered by the project’s existing checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100