https://github.com/anandchowdhary/get-computed-label

🏷️ Get an element's computed label from the Accessibility Tree
https://github.com/anandchowdhary/get-computed-label

a11y accessibility aria dom javascript library typescript

Last synced: 3 months ago
JSON representation

🏷️ Get an element's computed label from the Accessibility Tree

• Host: GitHub
• URL: https://github.com/anandchowdhary/get-computed-label
• Owner: AnandChowdhary
• Created: 2019-09-12T07:52:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T22:07:06.000Z (8 months ago)
• Last Synced: 2024-10-04T18:21:13.051Z (4 months ago)
• Topics: a11y, accessibility, aria, dom, javascript, library, typescript
• Language: TypeScript
• Homepage: https://npmjs.com/package/get-computed-label
• Size: 191 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🏷️ 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):

```html

  A span with an ID

  Inner text

```

![Screenshot of the HTML button markup](https://user-images.githubusercontent.com/2841780/64767150-d47e3e80-d564-11e9-8563-c692779a4dcd.png)

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 `` has inner text, the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/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:

```bash

npm install get-computed-label

```

```js

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:

```js

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](https://www.w3.org/TR/accname-1.1/)

- **TODO** Use computation method described above

## 📝 License

[MIT](https://github.com/AnandChowdhary/get-computed-label/blob/master/LICENSE) © [Anand Chowdhary](https://anandchowdhary.com)