noSvgWithoutTitle (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/noSvgWithoutTitle
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noSvgWithoutTitle": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a supported labeling pattern for non-decorative SVG elements.

An <svg> cannot use the alt attribute available to <img>. The rule accepts a non-empty <title> as the first child. An SVG with an image role may instead have an aria-label attribute, or an aria-labelledby value that matches a child element’s id. The rule checks that aria-label exists but does not check whether its value is empty.

Decorative SVGs marked with aria-hidden="true" or role="presentation" are ignored.

Examples

Invalid

1
<svg>foo</svg>

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

1
<svg>
2
    <title></title>
3
    <circle />
4
</svg>

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

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

1
<svg role="img" title="title">
2
    <span id="">foo</span>
3
</svg>

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

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg role="img" title="title">
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │     <span id="">foo</span>
  > 3 │ </svg>
      │ ^^^^^^
    4 │ 
  
  ℹ 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.

1
<svg role="img" aria-labelledby="title">
2
    <span id="title2">foo</span>
3
</svg>

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

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg role="img" aria-labelledby="title">
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │     <span id="title2">foo</span>
  > 3 │ </svg>
      │ ^^^^^^
    4 │ 
  
  ℹ 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.

1
<svg>
2
    <rect />
3
    <rect />
4
    <g>
5
        <title>foo</title>
6
        <circle />
7
        <circle />
8
    </g>
9
</svg>

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

  ✖ Alternative text title element cannot be empty
  
   > 1 │ <svg>
       │ ^^^^^
   > 2 │     <rect />
   > 3 │     <rect />
   > 4 │     <g>
   > 5 │         <title>foo</title>
   > 6 │         <circle />
   > 7 │         <circle />
   > 8 │     </g>
   > 9 │ </svg>
       │ ^^^^^^
    10 │ 
  
  ℹ 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.

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

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

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg role="graphics-symbol"><rect /></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.

Valid

1
<svg>
2
    <title>Pass</title>
3
    <circle />
4
</svg>

1
<svg role="img" aria-labelledby="title">
2
    <span id="title">Pass</span>
3
</svg>

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

1
<svg role="img" aria-label="">
2
    <span id="">Pass</span>
3
</svg>

1
<svg role="graphics-symbol">
2
    <title>Pass</title>
3
    <rect />
4
</svg>

1
<svg aria-hidden="true"><rect /></svg>

1
<svg role="presentation">foo</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