noSvgWithoutTitle (since v12.0.0)
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>
nursery/noSvgWithoutTitle.js:1:1 lint/nursery/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>
nursery/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