# Attribute “labelledby” not allowed on element “svg” at this point.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-labelledby-not-allowed-on-element-svg-at-this-point
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-labelledby` attribute is part of the WAI-ARIA specification and provides an accessible name for an element by referencing the `id` values of other elements that contain the labeling text. Without the `aria-` prefix, `labelledby` is simply an unrecognized attribute that browsers and assistive technologies will ignore. This means your SVG graphic won't have the accessible label you intended, leaving screen reader users without a meaningful description of the content.

This issue is especially important for `<svg>` elements because SVG graphics are often used for icons, charts, and illustrations that need descriptive labels for accessibility. Using the incorrect attribute name means the graphic is effectively unlabeled for users who rely on assistive technology.

## How to Fix It

Replace `labelledby` with `aria-labelledby` on your `<svg>` element. The attribute's value should be a space-separated list of one or more `id` values that reference elements containing the label text.

If you want to label an SVG using text that's already visible on the page, `aria-labelledby` is the ideal approach. You can also reference a `<title>` element inside the SVG itself.

## Examples

### ❌ Incorrect: Using `labelledby` (invalid attribute)

```html
<h2 id="chart-title">Monthly Sales</h2>
<svg labelledby="chart-title" role="img" viewBox="0 0 200 100">
  <!-- chart content -->
</svg>
```

### ✅ Correct: Using `aria-labelledby` to reference an external heading

```html
<h2 id="chart-title">Monthly Sales</h2>
<svg aria-labelledby="chart-title" role="img" viewBox="0 0 200 100">
  <!-- chart content -->
</svg>
```

### ✅ Correct: Using `aria-labelledby` to reference the SVG's own `<title>`

```html
<svg aria-labelledby="icon-title" role="img" viewBox="0 0 24 24">
  <title id="icon-title">Search</title>
  <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
</svg>
```

### ✅ Correct: Referencing multiple label sources

You can combine multiple `id` values to build a composite accessible name, separated by spaces:

```html
<h2 id="section-title">Revenue</h2>
<p id="section-desc">Q1 2024 revenue by region</p>
<svg aria-labelledby="section-title section-desc" role="img" viewBox="0 0 400 200">
  <!-- chart content -->
</svg>
```

In this case, a screen reader would announce something like "Revenue Q1 2024 revenue by region" as the accessible name for the SVG.

### Tips

- When using `aria-labelledby` on `<svg>`, also add `role="img"` to ensure consistent behavior across screen readers.
- If the SVG is purely decorative, use `aria-hidden="true"` instead of labeling it.
- The `aria-labelledby` attribute overrides other labeling mechanisms like `aria-label` or the `<title>` element, so use it when you want a specific label to take precedence.