Skip to content
Biome
Docs Enterprise Playground
Blog

noSvgWithoutTitle

Summary

Section titled Summary
  • Rule available since: v1.0.0
  • Diagnostic Category: lint/a11y/noSvgWithoutTitle
  • This rule is recommended, which means is enabled by default.
  • This rule doesn’t have a fix.
  • The default severity of this rule is error.

Description

Section titled Description

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

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "a11y": {
        "noSvgWithoutTitle": "error"
      }
    }
  }
}
Section titled Related links