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.
Instructor: [00:00] 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-up__open and that has the inner text helpful links. Then we have an unordered list with the class pop-up__items. Then we have three list items with links.
[00:28] 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.
[01:17] 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.
[01:39] 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.
[02:10] 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.
[02:44] Now, let's test it on a screen reader in Safari.
[02:47] [Safari VoiceOver]