CODEWITHSUNDEEP
javascripthtmloverridingwai-aria
Gary Wertman
Gary Wertman

Reputation: 9

Toggling the aria-expanded element to true on page load

all.

I'm no programmer (and don't have access to one) and have been asked to automatically expand an aria control on a webpage.

We have very little control over the code (just basic javascript and css) as it's hosted by Okta, and all the examples I've looked at here are baffling to me. Here's what the source for the section looks like:

<a href="#" data-se="needhelp" aria-expanded="false" aria-controls="help-links-container" class="link help js-help">
 Bunch of text here that contains a list.
</a>

How I can expand the aria on page load.

Upvotes: 0

Views: 3092

Answers (2)

Jane
Jane

Reputation: 334

  1. you can give your "a" tag an id, for example, I gave it an id called "link-list"
  2. when page load, you can use "document.getElementById("link-list")", then you can access "a" tag
  3. use "setAttribute("aria-expanded", "true")" to change aria-expanded attribute to false

Here is the code:

<html>
  <head></head>
  <body>
    <a
      id="link-list"
      href="#"
      data-se="needhelp"
      aria-expanded="false"
      aria-controls="help-links-container"
      class="link help js-help"
      >Bunch of text here that contains a list.</a
    >
    <script type="text/javascript">
      window.onload = function () {
        var linkList = document.getElementById("link-list");
        linkList.setAttribute("aria-expanded", "true");
      };
    </script>
  </body>
</html>

Upvotes: 1

Nat
Nat

Reputation: 333

Try:

document.getElementsByClassName("link help js-help").setAttribute("aria-expanded", "true");

Upvotes: 1

Related Questions