HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ariaLabelledByElements vs attribute</title>
</head>
<body>
  <span id="label_1">Street name</span>
  <input aria-labelledby="label_1 label_2" />
  <span id="label_2">(just the name, no "Street" or "Road" or "Place")</span>
  <pre id="out"></pre>
  <script>
    var input = document.querySelector("input");
    document.getElementById("out").textContent = JSON.stringify({
      fromAttribute: input.getAttribute("aria-labelledby"),
      supported: "ariaLabelledByElements" in Element.prototype,
      fromProperty: "ariaLabelledByElements" in Element.prototype
        ? input.ariaLabelledByElements.map(function (el) { return el.id; })
        : null
    }, null, 2);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.ariaLabelledByElements — vs attribute (Try It)