How labels for interactions are found

When browser agent detects that an interaction started from the user interacting with some element (for example clicking a button), we try to label the element with the first found non-empty:

  1. A <label> element that has for attribute that matches the element id:

    <input type="checkbox" id="newsletter">
    <label for="newsletter">Send me marketing e-mails</label>
  2. Within the DOM tree (starting from interaction target) the first found:

    1. A parent <label> element

          <input type="checkbox" id="newsletter">
          Send me marketing e-mails
    2. An element with aria-label attribute

      <input type="text" name="location" aria-label="Location">
    3. An element with aria-labelledby attribute

      <input type="text" name="location" aria-labelledby="location-help">
      <p id="location-help">Enter Location</p>
  3. <img> alt attribute

    <a href="/sale">
        <img src="/img/sale.png" alt="Hot Sales">

  4. <img> filename

    <a href="/sale"><img src="/img/sale.png"></a>

  5. <input> value if type is button, radio or submit

    <input type="submit" value="Purchase">

  6. The text of first <option> element in <select>

    <select name="delivery">
        <option value="0">Select Delivery Method</option>
        <option value="1">Courier</option>

  7. title attribute of <i>

    <i class="fa fa-times" title="Remove">

  8. The text in closest parent <a>, <button>, <label>, <span>, <td> or <th>

    <a href="#">Continue to checkout</a>

Should none of these be found, a css selector is constructed from the target element and it's parents.

<ul id="todo-list">
    <li class="item">
        <input type="text" name="item[]" value="Test labels">

Results in: ul#todo-list > li.item > input[type="text"][name="item[]"]