1

I try to select all elements on page with ARIA attributes in order to check the page for incorrect use of them. As you well know, the attribute starts with aria-[NAME].

Since i can't use regex with element selectors, and the css selectors doesn't give me the option to wildcard choose the attribute name (or does it?), i wonder how could i do this?

Simple test page:

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is optional</div>
</div>

<script>
let elAria1 = document.querySelectorAll('[aria-*]'); // this doesn't work
let elAria2 = document.querySelectorAll('[aria-'*]); // this doesn't work either
let elAria3 = document.querySelectorAll([aria-*]); // this doesn't work too
</script>
A. Meshu
  • 4,053
  • 2
  • 20
  • 34

1 Answers1

1

Right, unless you already have a list of the attribute names you need to find, there's no way to use a query string to filter for the ones you want. You'll have to do it more programmatically, by checking whether any attributes of an element start with aria:

const ariaElements = [...document.querySelectorAll('*')]
  .filter(elm => [...elm.attributes].some(
    ({ name }) => name.startsWith('aria-')
  ));
console.log(ariaElements);
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is optional</div>
</div>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Thank you for that minimal compact great example! – A. Meshu Nov 10 '19 at 22:20
  • I’ve closed the question as a duplicate, but I do like your answer for the brevity and use of contemporary syntax. Would you consider adding your answer to the linked dupe? I considered adding to my own existing answer, but that feels a little too much like plagiarism. – David Thomas Nov 10 '19 at 22:44