Get Element by aria-label using JavaScript

# Table of Contents

# Get Element by aria-label using JavaScript

To get an element by aria-label, pass a selector that targets the specific aria-label value to the querySelector() method.

The querySelector method returns the first element in the document that matches the provided selector.

Here is the HTML for the examples in the article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <button aria-label="Close">X</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ Get first element with aria-label = "Close"
const element = document.querySelector('[aria-label="Close"]');
console.log(element); // 👉️ button

// ✅ Get all elements with aria-label = "Close"
const elements = document.querySelectorAll(
  '[aria-label="Close"]',
);
console.log(elements); // 👉️ [button]

get element by aria label

The code for this article is available on GitHub

For selecting elements based on a partial match of the aria-label attribute value, scroll down to the next subheading.

The first example uses the document.querySelector() method to get the first element in the document that has an aria-label attribute set to Close.

index.js

Copied!
// ✅ Get first element with aria-label = "Close"
const element = document.querySelector('[aria-label="Close"]');
console.log(element); // 👉️ button

If you need a collection of elements, use the document.querySelectorAll() method and if you need the first element that matches the provided selector, use the document.querySelector method.

The second example selects all the elements in the document that have an aria-label attribute set to Close.

index.js

Copied!
// ✅ Get all elements with aria-label = "Close"
const elements = document.querySelectorAll('[aria-label="Close"]');
console.log(elements); // 👉️ [button]

The code for this article is available on GitHub

You can also narrow things down by selecting only button or div elements that have the aria-label attribute or selecting elements that have the attribute set, regardless of the value.

index.js

Copied!
// ✅ select `button` with aria-label = "Close"
const el1 = document.querySelector('button[aria-label="Close"]');
console.log(el1); // 👉️ button

// ✅ select any element with aria-label attribute set
const el2 = document.querySelector('[aria-label]');
console.log(el2); // 👉️ button

selecting specific elements by aria label

The first example looks for a button element that has the aria-label attribute set to Close.

Any div or p elements that have the attribute set would not satisfy the condition.

The second example looks for a DOM element that has the aria-label attribute set.

The attribute could be set to any value for the condition to be met.

If you are looking for a collection of elements and not the first matching element, use the querySelectorAll method instead of querySelector.

# Get Element by Partial Match of the aria-label Value

To get a DOM element by partially matching the aria-label value, use the querySelector method with a selector that matches the attribute where the value starts with, ends with, or contains a specific string.

index.js

Copied!
// ✅ Get element where aria-label STARTS with Clo
const el1 = document.querySelector('[aria-label^="Clo"]');

// ✅ Get element where aria-label ENDS with ose
const el2 = document.querySelector('[aria-label$="ose"]');

// ✅ Get element where aria-label CONTAINS Close
const el3 = document.querySelector('[aria-label*="Close"]');

The code for this article is available on GitHub

If you need a collection of the matching elements and not just the first element, use the querySelectorAll method instead of querySelector.

The first example selects a DOM element where the value of the aria-label attribute starts with Clo.

index.js

Copied!
const el1 = document.querySelector('[aria-label^="Clo"]');

You might be familiar with the caret ^ symbol, which has the same meaning when used in regular expressions.

The second example selects a DOM element where the value of the aria-label attribute ends with ose.

index.js

Copied!
const el2 = document.querySelector('[aria-label$="ose"]');

The code for this article is available on GitHub

The third example selects a DOM element where the value of the aria-label attribute contains Close.

index.js

Copied!
const el3 = document.querySelector('[aria-label*="Close"]');

The string Close could be located anywhere in the aria-label attribute, as long as it is contained, the condition would be satisfied.

You could also prefix the selector with a specific type of element you want to match to narrow down the results.

index.js

Copied!
// ✅ Get `button` where aria-label STARTS with Clo
const el1 = document.querySelector('button[aria-label^="Clo"]');

The example selects a button element where the value of the aria-label attribute starts with Clo.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get Element by aria-label using JavaScript

# Table of Contents