HTML Guide for descendant

The aria-activedescendant attribute on the input element must reference a non-empty, valid ID of an existing element.

The aria-activedescendant attribute is used in accessible widgets to indicate which element is currently active or selected within a composite widget, such as a listbox or autocomplete dropdown. Its value should be the id of an element within the DOM.

The attribute value must not be an empty string and must match the id of an existing element. Using an empty string ("") is invalid and triggers the W3C validator error.

Correct usage:

• Reference a valid, non-empty element id as the value.
• Remove the attribute if no element is currently active.

Example: Incorrect usage (invalid)

<input type="text" aria-activedescendant="" />

Example: Correct usage with a referenced ID

<ul id="suggestions">
  <li id="option1">Option 1</li>
  <li id="option2">Option 2</li>
</ul>
<input type="text" aria-activedescendant="option1" />

To eliminate errors, do not set aria-activedescendant to an empty string. Only include the attribute when it references a valid element’s id.

The label element may only contain one labelable descendant.

For example:

<label for="age">
  Age
  <select id="age">
    <option>young</option>
    <option>old</option>
  </select>
</label>

A label element is not allowed as a descendant of a button element.

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

The label element may contain only one labelable descendant.

For example:

<label for="age">
  Age
  <select id="age">
    <option>young</option>
    <option>old</option>
  </select>
</label>