Discord GitHub GitHub Twitter

Lint Rules

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:

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