noSvgWithoutTitle

Diagnostic Category: lint/a11y/noSvgWithoutTitle

JSX and TSX

Since: v1.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 to svg
provide role="img" and aria-label or aria-labelledby to svg

Examples

Invalid

<svg>foo</svg>

code-block.jsx: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>

code-block.jsx:1:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg>
      │ ^^^^^
    2 │     <title></title>
    3 │     <circle />
  
  ℹ 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>foo</svg>

code-block.jsx: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 role="img" aria-label="">
    <span id="">Pass</span>
</svg>

<svg role="presentation">foo</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-labelledby="title">
    <span id="title">Pass</span>
</svg>

<svg role="img" aria-label="title">
    <span id="title">Pass</span>
</svg>

<svg role="graphics-symbol"><rect /></svg>

<svg role="graphics-symbol img"><rect /></svg>

<svg aria-hidden="true"><rect /></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 Accessible SVGs