My previous article and video discussed how you can style an accessible component with CSS when developing in the progressive enhancement mindset. This article and video covers the next step: adding JavaScript to toggle the ARIA attributes.
Step 3: JavaScript
The thing I love about JavaScript is that there are so many ways to do the same thing. For this example, I’m going to approach this with plain old JavaScript.
Set up Your Widget to Work without JavaScript
Add a function that toggles all of the
aria-expandedvalues to false. That way when JavaScript loads on the page, all of the accordions will be closed, which is the desired functionality for this component.
Use JavaScript to Toggle ARIA Attribute Values
Make a function to toggle the
aria-expandedvalue of a specific accordion button when it is clicked.Now a screen reader will be able to communicate to screen reader users when an accordion is closed and can be opened (and vice versa).
In the video, I used
letto set a variable when I should have usedconst, because it’s not being reassigned. You’ll be able to see this updated in the final CodePen. For a more detailed explanation on the differences, check out Wes Bos’s post onletvsconst.
To see everything we just did, view the final CodePen with JavaScript. Now that we’ve built our component, the next step will be to test it, ensuring that the content is available for all users. Check The Foundry again soon for the next and final article and video! And sign up for Sparkbox Newsletters to be sure you don’t miss a thing.
