Skip to content

SVGGElements without text content are not meaningful to user agents #1760

Open
@pjhanzlik

Description

@pjhanzlik

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions