# Bad value “” for attribute “aria-labelledby” on element “div”: An IDREFS value must contain at least one non-whitespace character.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-aria-labelledby-on-element-div-an-idrefs-value-must-contain-at-least-one-non-whitespace-character
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `aria-labelledby` attribute on a `div` must list at least one element ID, so an empty value, or one made only of spaces, is invalid.

The attribute takes an IDREFS value: one or more `id` values, separated by spaces, that point at the elements whose text names the `div`. Screen readers use that text as the name of the `div`, which is often the heading of a dialog or a page region. A value of `""` or `" "` points at nothing, so the `div` gets no name from it. The validator reports both with the same message and prints the bad value between the quotes, so one report shows `“”` and another shows spaces between them.

The usual cause is a shared component or template that writes every ARIA attribute on its wrapper `div` and fills each one only when the caller passes a value. When the caller passes no label ID, the template still prints the attribute, just empty. Change the template so it leaves `aria-labelledby` out when it has no ID to point at.

When the `div` has a role that takes a name, such as `dialog` or `region`, give the labeling element an `id` and reference it. When the `div` has no `role`, delete the attribute: `aria-labelledby` isn't allowed on a plain `div`, and the validator flags that in a separate message too. An empty `role=""` is invalid as well and gets its own message.

## Invalid example

The dialog has a visible heading, but the empty `aria-labelledby` doesn't reference it.

```html
<div role="dialog" aria-modal="true" aria-labelledby="">
  <h2>Sign in</h2>
  <p>Enter your email address to continue.</p>
</div>
```

## Valid example

The heading has an `id`, and `aria-labelledby` references it, so screen readers announce the dialog as "Sign in".

```html
<div role="dialog" aria-modal="true" aria-labelledby="signin-title">
  <h2 id="signin-title">Sign in</h2>
  <p>Enter your email address to continue.</p>
</div>
```