🏷️ Get computed label

Get an element's computed label ("Accessible Name") from the Accessibility Tree

💡 Why?

Say you have a button which looks like this (this is invalid markup):

<button
  alt="Alternate text"
  title="Title text"
  aria-label="ARIA label"
  aria-labelledby="ref1"
>
  <span id="ref">A span with an ID</span>
  <span>Inner text</span>
</button>

What would a screen reader read?

Using the Accessibility Tree, screen readers and other assistive technologies figure out what they should read. In this case, even though the <button> has inner text, the ARIA attributes take precedence. Even in that, the aria-labelledby is higher in the accessibility order than aria-label, but in this case, the element with the ID #ref1 doesn't exist, so we fall back to aria-label.

Finally, the label is computed to be Aria label.

💻 Usage

Install the package from NPM:

npm install get-computed-label

import getComputedLabel from "get-computed-label";
 
const label = getComputedLabel(document.getElementById("example"));
console.log(label);

You can also add this to the prototype, if you're into that:

HTMLElement.prototype.getComputedLabel = function() {
  return getComputedLabel(this);
};
 
const image = document.querySelector("img");
console.log(image.getComputedLabel());

ℹ️ Further reading

• Accessible Name and Description Computation 1.1
• TODO Use computation method described above

📝 License

MIT © Anand Chowdhary