Get element by aria-label using JavaScript

Get Element by aria-label using JavaScript

This article gives you two methods (quesrySelector and querySelectorAll) to get element by aria-label using JavaScript. This is an important skill when you are working with HTML elements in Javascript.

How to get element by aria-label using JavaScript

Using querySelector()

This method returns the first element that matches with a CSS selector given.

Syntax:

querySelector(selector)

Parameter:

  • selector: a CSS selector string that represents the aria-label.

Basically, aria-label is an attribute provided by HTML5 to enhance explanations for people with disabilities. It is an important part of Web Accessibility. With the help of querySelector, you can easily get an element by aria-label in your document:

<html>
    <body>
        <h1>LEARNSHAREIT</h1>
        <button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
        <script>
            // Get the first element with aria-label is "Say Hello"
            let hello = document.querySelector('[aria-label="Say Hello"]');
            console.log(hello);
      	</script>
    </body>
</html>

Output: 

<button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>

In the example above, we use the querySelector() function to select the first element with the aria-label as ‘Say Hello’. As you can see on the HTML page, there is a button Hello with the aria-label “Say Hello”. If you don’t know the exact aria-label you want to get, but you know a part of it. Then it would be best if you did as follows:

<html>
    <body>
        <h1>LEARNSHAREIT</h1>
        <button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
        <script>
            // Get the first element by aria-label STARTS with "Say"
            console.log(document.querySelector('[aria-label^="Say"]'));

            // Get the first element by aria-label ENDS with "llo"
            console.log(document.querySelector('[aria-label$="llo"]'));

            // Get the first element by aria-label CONTAINS " "
            console.log(document.querySelector('[aria-label*=" "]'));

            // Get the first element by aria-label CONTAINS "LEARNSHAREIT"
            console.log(document.querySelector('[aria-label^="LEARNSHAREIT"]'));
        </script>
    </body>
</html>

Output: 

<button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
<button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
<button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
null

As you can see, using this approach, you don’t have to type the exact aria-label. Instead, you just need to know a part of it.

Using querySelectorAll()

This function returns an array of matched elements based on a specific selector instead of first found like the previous method.

Syntax:

querySelectorAll(selector)

Parameter:

  • selector: a selector which represents the aria-label  .

You can use the querySelectorAll() function to get all the elements that have a specific aria-label:

<html>
    <body>
        <h1>LEARNSHAREIT</h1>
        <button aria-label="Say Hello" onclick="alert('Hello')">Hello</button>
        <button aria-label="Say Hello" onclick="alert('Hello')">Hi</button>
        <button aria-label="Say Hello" onclick="alert('Hello')">Ciao</button>
        <script>
            // Get the first element with aria-label is "Say Hello"
            let hello = document.querySelectorAll('[aria-label="Say Hello"]');
            console.log(hello);
        </script>
    </body>
</html>

Output:

NodeList(3) [button, button, button]

As you can see, there are three buttons in the HTML document that have the same aria-label “Say Hello”, and therefore, this method searches all of the matched elements and returns a list of nodes (array of elements). If you want to get a specific element at a given index, just use the brackets to reference it from the array.

Summary

In this tutorial, we have discovered how to get element by aria-label using JavaScript using two different approaches. We suggest you use querySelector() as it returns the first found element for you. Have a nice day.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *