` element (or another visible text element) inside or near the SVG with a unique `id`, then set `aria-labelledby` to that `id`. IDs are case-sensitive, so ensure an exact match. 2. **Use `aria-label` instead:** If you want to provide an accessible name directly as a text string without needing a separate element, replace `aria-labelledby` with `aria-label`. 3. **Remove the attribute:** If the SVG already has an accessible name through other means (such as visible adjacent text or a `<title>` child that doesn't need explicit referencing), simply remove the empty `aria-labelledby`. 4. **Mark as decorative:** If the SVG is purely decorative and adds no information, remove `aria-labelledby` and add `aria-hidden="true"` so assistive technology skips it entirely. When generating `aria-labelledby` dynamically, ensure your code omits the attribute entirely rather than outputting an empty value when no label ID is available. ## Examples ### ❌ Empty `aria-labelledby` (triggers the error) ```html <svg role="img" aria-labelledby=""> <use href="#icon-star"></use> </svg> ``` The empty string is not a valid IDREFS value, so the validator reports an error. ### ✅ Reference a `<title>` element by ID ```html <svg role="img" aria-labelledby="star-title"> <title id="star-title">Favorite

# Bad value “” for attribute “aria-labelledby” on element “svg”: 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-svg-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/) The `aria-labelledby` attribute is an IDREFS attribute, meaning its value must be a space-separated list of one or more `id` values that exist in the document. These referenced elements collectively provide the accessible name for the element. When the value is an empty string (`""`) or contains only whitespace, there are no valid ID references, which violates the IDREFS requirement defined in the WAI-ARIA and HTML specifications. This issue commonly appears when templating systems or JavaScript frameworks conditionally set `aria-labelledby` but output an empty string when no label ID is available. It also occurs when developers add the attribute as a placeholder with the intention of filling it in later but forget to do so. ### Why this matters An empty `aria-labelledby` is problematic for several reasons: - **Accessibility:** Screen readers rely on `aria-labelledby` to announce the accessible name of an element. An empty value can cause unpredictable behavior — some screen readers may ignore the SVG entirely, while others may fall back to reading unhelpful content or nothing at all. This leaves users who depend on assistive technology without a meaningful description of the graphic. - **Standards compliance:** The W3C validator flags this as an error because the HTML specification requires IDREFS attributes to contain at least one non-whitespace character. Shipping invalid HTML can signal broader quality issues and may cause problems in strict parsing environments. - **Maintainability:** An empty `aria-labelledby` is ambiguous. It's unclear whether the developer intended the SVG to be decorative, forgot to add a reference, or encountered a bug in their templating logic. ### How to fix it Choose the approach that matches your intent: 1. **Reference a labeling element by ID:** If the SVG conveys meaning, add a `` element (or another visible text element) inside or near the SVG with a unique `id`, then set `aria-labelledby` to that `id`. IDs are case-sensitive, so ensure an exact match. 2. **Use `aria-label` instead:** If you want to provide an accessible name directly as a text string without needing a separate element, replace `aria-labelledby` with `aria-label`. 3. **Remove the attribute:** If the SVG already has an accessible name through other means (such as visible adjacent text or a `<title>` child that doesn't need explicit referencing), simply remove the empty `aria-labelledby`. 4. **Mark as decorative:** If the SVG is purely decorative and adds no information, remove `aria-labelledby` and add `aria-hidden="true"` so assistive technology skips it entirely. When generating `aria-labelledby` dynamically, ensure your code omits the attribute entirely rather than outputting an empty value when no label ID is available. ## Examples ### ❌ Empty `aria-labelledby` (triggers the error) ```html <svg role="img" aria-labelledby=""> <use href="#icon-star"></use> </svg> ``` The empty string is not a valid IDREFS value, so the validator reports an error. ### ✅ Reference a `<title>` element by ID ```html <svg role="img" aria-labelledby="star-title"> <title id="star-title">Favorite ``` The `aria-labelledby` points to the `` element's `id`, giving the SVG a clear accessible name of "Favorite." ### ✅ Use `aria-label` with a text string ```html <svg role="img" aria-label="Favorite"> <use href="#icon-star"></use> </svg> ``` When you don't need to reference another element, `aria-label` provides the accessible name directly as an attribute value. ### ✅ Reference multiple labeling elements ```html <svg role="img" aria-labelledby="star-title star-desc"> <title id="star-title">Favorite A five-pointed star icon ``` The `aria-labelledby` value can include multiple space-separated IDs. The accessible name is constructed by concatenating the text content of the referenced elements in order. ### ✅ Decorative SVG (no accessible name needed) ```html ``` For purely decorative graphics, `aria-hidden="true"` removes the element from the accessibility tree. Adding `focusable="false"` prevents the SVG from receiving keyboard focus in older versions of Internet Explorer and Edge.