# Bad value “” for attribute “aria-describedby” 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-describedby-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/)

Point `aria-describedby` on the `div` at the `id` of the element that holds the description, or remove it, because an empty or whitespace-only value is invalid.

The attribute takes an IDREFS value, a space-separated list of one or more `id` values. Screen readers announce the text of those elements as the description of the `div`, usually after its name and role. Hints and error messages are the typical content. A value of `""` or `" "` gives them nothing to read. The validator shows the bad value between the quotes, so the same mistake appears as `“”` in one report and as spaces between the quotes in another.

This message usually comes with others. A UI component that accepts optional ARIA props often prints all of them on its wrapper `div` with an empty string as the default, and a single element ends up with `id=""`, `role=""`, `aria-label=""`, `aria-labelledby=""` and `aria-describedby=""`. Each empty attribute gets its own validator message. Fix the component once instead of every page that uses it. React and Vue leave out an attribute bound to `null` or `undefined` but print one bound to `""`, so pass `null` when there is no description ID.

`aria-describedby` is allowed on a plain `div` without a `role` (`aria-labelledby` isn't), so the validator accepts it as soon as the value holds a real ID. It only checks the format, not whether that ID exists on the page, so make sure the referenced element is there. Keep the attribute when the `div` is something users move into, such as a group of form controls. On a `div` that only wraps layout, screen readers often skip the description, so delete the attribute.

## Invalid example

The shipping hint is on the page, but the empty `aria-describedby` doesn't point at it.

```html
<div role="group" aria-labelledby="delivery-label" aria-describedby="">
  <p id="delivery-label">Delivery speed</p>
  <p>Orders placed before noon ship the same day.</p>
  <label><input type="radio" name="delivery" value="standard"> Standard</label>
  <label><input type="radio" name="delivery" value="express"> Express</label>
</div>
```

## Valid example

The hint has an `id` and `aria-describedby` references it, so screen readers can read the hint when focus moves into the group.

```html
<div role="group" aria-labelledby="delivery-label" aria-describedby="delivery-hint">
  <p id="delivery-label">Delivery speed</p>
  <p id="delivery-hint">Orders placed before noon ship the same day.</p>
  <label><input type="radio" name="delivery" value="standard"> Standard</label>
  <label><input type="radio" name="delivery" value="express"> Express</label>
</div>
```