Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Add aria-expanded to add semantic value and styling

    Lindsey KopaczLindsey Kopacz

    In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute to style.

    This accomplished double duty because we have semantic value and visual indicators that a button is open and closed.

    To test this, I opened up Safari and used CMD + F5 to turn VoiceOver on.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Today, we are creating an accessible pop up button. We'll be using this button that says, "Helpful links to open and close this unordered list of links." In the markup, we have a button with the class pop-upopen and that has the inner text helpful links. Then we have an unordered list with the class pop-upitems. Then we have three list items with links.

    A lot of times when people want to show something is open or closed, they'll add a class open and then use the styling that way. Today, we're going to make it a little bit more semantic and use aria-expanded.

    On page load, I'm going to add an aria-expanded attribute. I'm just going to write the JavaScript in the HTML file with some script tags. First, let's grab const showButton = document.querySelector and we're going to take the class pop-up__open.

    Once the JavaScript loads, we are going to add an attribute called aria-expanded and we are going to set that to false. Let's refresh the page and just double check. Great.

    Now we have the aria-expanded = false on that button. We will add an event listener onto that show button and it's going to be a click event listener. We'll create an arrow function here. Before I toggle anything, I'm going to create a variable called aria-expanded and just grab that value of that attribute.

    As a note, this will return a string and not a Boolean, which is why I'm not going to do if aria-expanded because that's not going to work. I will say if aria-expanded = "true," then we are going to show button, set attribute aria-expanded false.

    Then, we are going to do an else statement. Basically, I'm going to copy and paste and do the opposite. If we refresh this page, you can see that this is toggling true and false.

    We're done with the JavaScript, let's go to the styling. I'm going to use the attribute and then I'm also going to use the sibling combinator, and I am going to say display:block. For the opposite, I'm going to do display:none. See, now this toggles open and closed.

    Now, let's test it on a screen reader in Safari.

    Instructor: Now that button either says expanded or collapsed depending on the state of that pop-up. To summarize, we use JavaScript to add an aria-expanded onto this button, then on the event listener of that button, we toggle that value, and then we use the attribute to style it.