Skip to main content

a11y/noSvgWithoutTitle

MISSING DOCUMENTATION

Examples

Invalid

<svg>foo</svg>

 file.tsx:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Alternative text title element cannot be empty

    <svg>foo</svg>
    ^^^^^^^^^^^^^^

  For accessibility purposes, SVGs should have an alternative text,
    provided via title element.


<svg>
    <title></title>
    <circle />
</svg>

 file.tsx:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Alternative text title element cannot be empty

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

  For accessibility purposes, SVGs should have an alternative text,
    provided via title element.

<svg>foo</svg>

 file.html:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Alternative text title element cannot be empty

    <svg>foo</svg>
    ^^^^^^^^^^^^^

  For accessibility purposes, SVGs should have an alternative text,
    provided via title element.


<svg>
    <title></title>
    <circle />
</svg>

 file.html:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Alternative text title element cannot be empty

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

  For accessibility purposes, SVGs should have an alternative text,
    provided via title element.

Valid

<svg>
	<rect />
	<rect />
	<g>
		<circle />
		<circle />
		<g>
			<title>
				Pass
			</title>
			<circle />
			<circle />
		</g>
	</g>
</svg>
<svg>
    <title>Pass</title>
    <circle />
</svg>
<svg>
	<rect />
	<rect />
	<g>
		<circle />
		<circle />
		<g>
			<title>
				Pass
			</title>
			<circle />
			<circle />
		</g>
	</g>
</svg>
<svg>
    <title>Pass</title>
    <circle />
</svg>