noSvgWithoutTitle

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/noSvgWithoutTitle`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). ## How to configure ```json title="biome.json" { "linter": { "rules": { "a11y": { "noSvgWithoutTitle": "error" } } } }

## 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

### Invalid

```jsx
<svg>foo</svg>

jsx

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

jsx

<svg>foo</svg>

jsx

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

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-svg-without-title">lint/a11y/noSvgWithoutTitle</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

Valid

jsx

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

jsx

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

jsx

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

jsx

<svg role="graphics-symbol">
    <title>Pass</title>
    <rect />
</svg>

jsx

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

jsx

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

jsx

<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

</TabItem> <TabItem label="HTML" icon="seti:html"> ## Summary - Rule available since: `v2.4.0` - Diagnostic Category: [`lint/a11y/noSvgWithoutTitle`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). ## How to configure ```json title="biome.json" { "linter": { "rules": { "a11y": { "noSvgWithoutTitle": "error" } } } }

## 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

### Invalid

```html
<svg>foo</svg>

html

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

html

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

<pre class="language-text"><code class="language-text">code-block.html:1:1 <a href="https://biomejs.dev/linter/rules/no-svg-without-title">lint/a11y/noSvgWithoutTitle</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Alternative text title element cannot be empty > 1 │ <svg role="img" title="title"> │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 2 │ foo > 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. </code></pre>

html

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

<pre class="language-text"><code class="language-text">code-block.html:1:1 <a href="https://biomejs.dev/linter/rules/no-svg-without-title">lint/a11y/noSvgWithoutTitle</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Alternative text title element cannot be empty > 1 │ <svg role="img" aria-labelledby="title"> │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 2 │ foo > 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. </code></pre>

html

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

html

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

<pre class="language-text"><code class="language-text">code-block.html:1:1 <a href="https://biomejs.dev/linter/rules/no-svg-without-title">lint/a11y/noSvgWithoutTitle</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

Valid

html

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

html

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

html

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

html

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

html

<svg role="graphics-symbol">
    <title>Pass</title>
    <rect />
</svg>

html

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

html

<svg role="presentation">foo</svg>

Accessibility guidelines

</TabItem> </Tabs>

Valid

Accessibility guidelines

Related links

Valid

Accessibility guidelines

Related links