New rule proposal around SVGs

[ematipico]

Hi! As suggested by @ljharb (rome/tools#556 (comment)), I wanted to open an issue to propose few new rules around accessibility for SVGs.

More details can be found here inside the rome project: rome/tools#556

• svg-has-title: maybe the name should be reviewed because it's not just svg but also other elements that can be considered images (e.g. ellipse). A SVG image should always have a <title> as direct child;
• svg-has-aria-label: if an SVG has role='img', it should also have a aria-label (source);

[ljharb]

These seem reasonable to me; @jessebeach, thoughts?

[mat-sf]

Ping - @jessebeach, thoughts?

[khiga8]

I was about to open a duplicate issue for a rule to ensure SVG has an accessible name. This would be great.

EDIT: I think aria-hidden="true" is also valid for SVG, as they can be decorative.

Related:

• svg-img-alt rule in axe-core
• smashing magazine: accessible SVG patterns

[raylin666666]

@ljharb I have implemented the rule and reviewed with Jesse. Right now the rule is testing on the FB codebase. Will push to open source later.

Basically the new implementation verifies:

1. role='img' + title/aria-label/aria-labelledby attribute is missing or empty
2. title element is not the first element of svg or it is empty or SVG shapes inside SVG doesn't have title,

[khiga8]

Hey @raylin666666! Were you still planning to upstream your rule here? This rule would greatly benefit my projects!