Get Element by aria-label using JavaScript

avatar

Borislav Hadzhiev

Mon Dec 27 20213 min read

banner

Photo by Drew Sal

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, e.g. document.querySelector('[aria-label="Close"]'). 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button aria-label="Close">X</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// ✅ 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]
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.

In short, 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 of the elements in the document that have an aria-label attribute set to Close.

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
// ✅ 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

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
// ✅ 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"]');
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
const el1 = document.querySelector('[aria-label^="Clo"]');
You might be familiar with the caret ^ symbol, which has the same meaning when used with regular expressions.

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

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

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

index.js
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.

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

index.js
// ✅ 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.