Skip to content
Biome
Docs Blog Playground

noSvgWithoutTitle

Diagnostic Category: lint/a11y/noSvgWithoutTitle

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

Section titled Examples

Invalid

Section titled 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

Section titled 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

Section titled 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

Section titled Related links