---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
	<svg>foo</svg>
	<svg>
		<title></title>
		<circle />
	</svg>
	<svg role="img" title="title">
		<span id="">foo</span>
	</svg>
	<svg role="img" aria-labelledby="title">
		<span id="">foo</span>
	</svg>
	<svg role="">
		<span>implicit role</span>
	</svg>
</>;

```

# Diagnostics
```
invalid.jsx:2:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Alternative text title element cannot be empty
  
    1 │ <>
  > 2 │ 	<svg>foo</svg>
      │ 	^^^^^
    3 │ 	<svg>
    4 │ 		<title></title>
  
  i 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.
  

```

```
invalid.jsx:3:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

```

```
invalid.jsx:7:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Alternative text title element cannot be empty
  
    5 │ 		<circle />
    6 │ 	</svg>
  > 7 │ 	<svg role="img" title="title">
      │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 │ 		<span id="">foo</span>
    9 │ 	</svg>
  
  i 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.
  

```

```
invalid.jsx:10:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Alternative text title element cannot be empty
  
     8 │ 		<span id="">foo</span>
     9 │ 	</svg>
  > 10 │ 	<svg role="img" aria-labelledby="title">
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    11 │ 		<span id="">foo</span>
    12 │ 	</svg>
  
  i 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.
  

```

```
invalid.jsx:13:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Alternative text title element cannot be empty
  
    11 │ 		<span id="">foo</span>
    12 │ 	</svg>
  > 13 │ 	<svg role="">
       │ 	^^^^^^^^^^^^^
    14 │ 		<span>implicit role</span>
    15 │ 	</svg>
  
  i 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.
  

```