HTML Guide for aria-labelledby

labelledby is not a valid attribute for the <svg> element. Perhaps you meant aria-labelledby?

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.

Example:

<div id="myBillingId">Billing</div>

<div>
    <div id="myNameId">Name</div>
    <input type="text" aria-labelledby="myBillingId myNameId"/>
</div>
<div>
    <div id="myAddressId">Address</div>
    <input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>

Set a non-empty list of valid ID references in the aria-labelledby attribute on the <a> element, or remove the attribute and provide an accessible name another way.

The aria-labelledby attribute takes an IDREFS value: a space-separated list of one or more element IDs, each of which must be non-empty, exist in the document, and be unique. An empty value ("") violates the ARIA/HTML constraints and triggers the validator error. On an <a> element, aria-labelledby supplies the accessible name for the link by concatenating the text from the referenced elements. If you don’t have IDs to reference, use visible link text or aria-label. Avoid leaving aria-labelledby empty (common with templating when a variable is blank); either omit the attribute entirely or populate it with valid IDs. Remember that aria-labelledby overrides other naming methods, so an empty or broken reference can result in a link with no accessible name.

HTML examples

• Invalid (what triggers the error)

  <a href="/report" aria-labelledby=""></a>

• Fixed by referencing an existing element with a valid id

  <a href="/report" aria-labelledby="report-link-text">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>
  <span id="report-link-text">View report</span>

• Fixed with multiple IDs (space-separated)

  <a href="/apples" aria-labelledby="prefix apples-text">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>
  <span id="prefix">Learn more: </span>
  <span id="apples-text">Apples</span>

• Fixed by using visible text content (no ARIA needed)

  <a href="/report">View report</a>

• Fixed by using aria-label for an icon-only link (when no separate label element exists)

  <a href="/search" aria-label="Search">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>

Empty aria-labelledby on the <svg> is invalid because it must reference one or more existing IDs with non-empty, non-whitespace text.

The aria-labelledby attribute takes a space-separated list of element IDs (IDREFS). Each ID must exist in the document and point to elements that provide an accessible name. On <svg>, this is commonly a <title> or other visible text element. If you have no label to reference, either remove aria-labelledby or provide a valid referenced element. Alternatively, use the aria-label attribute with a text string. Do not leave aria-labelledby empty, and ensure IDs are unique and match exactly (case-sensitive). Examples: reference a <title> with an id, or use aria-label directly on the <svg>.

HTML Examples

Example showing the issue

<svg role="img" aria-labelledby="">
  <use href="#icon-star"></use>
</svg>

Fixed examples

<!-- Option A: Reference a title by ID -->

<svg role="img" aria-labelledby="starTitle">
  <title id="starTitle">Favorite</title>
  <use href="#icon-star"></use>
</svg>

<!-- Option B: Use aria-label instead (no referenced IDs needed) -->

<svg role="img" aria-label="Favorite">
  <use href="#icon-star"></use>
</svg>

<!-- Option C: Decorative icon (no name) -->

<svg aria-hidden="true" focusable="false">
  <use href="#icon-star"></use>
</svg>

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs. It should reference an existing ID on the same document, but that id was not found.