noSvgWithoutTitle (since v12.0.0)
This rule is recommended by Rome.
Enforces the usage of the title
element for the svg
element.
It is not possible to specify the alt
attribute for the svg
as for the img
. To make svg accessible, the following methods are available:
- provide the
title
element as the first child tosvg
- provide
role="img"
andaria-label
oraria-labelledby
tosvg
Examples
Invalid
<svg>foo</svg>
a11y/noSvgWithoutTitle.js:1:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Alternative text title element cannot be empty
> 1 │ <svg>foo</svg>
│ ^^^^^
2 │
ℹ For accessibility purposes, SVGs should have an alternative text,
provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
<svg>
<title></title>
<circle />
</svg>
``
```js,expect_diagnostic
<svg>foo</svg>
a11y/noSvgWithoutTitle.js:7:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ unterminated template literal
5 │ ``
6 │
> 7 │ ```js,expect_diagnostic
│ ^^^^^^^^^^^^^^^^^^^^
> 8 │ <svg>foo</svg>
> 9 │
│
<svg role="img" aria-label="">
<span id="">Pass</span>
</svg>
Valid
<svg>
<rect />
<rect />
<g>
<circle />
<circle />
<g>
<title>Pass</title>
<circle />
<circle />
</g>
</g>
</svg>
<svg>
<title>Pass</title>
<circle />
</svg>
<svg role="img" aria-label="title">
<span id="title">Pass</span>
</svg>
Accessibility guidelines
Document Structure – SVG 1.1 (Second Edition) ARIA: img role - Accessibility | MDN Accessible SVGs | CSS-Tricks - CSS-Tricks Contextually Marking up accessible images and SVGs | scottohara.me