Build Accessibly with Progressive Enhancement: JavaScript (Video)

01-20-20 Corinne Ling

This series teaches you to build accessible components through progressive enhancement. In this video, learn how to add JavaScript to toggle ARIA attributes.

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

View the JavaScript CodePen

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-expanded values 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-expanded value 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 let to set a variable when I should have used const, 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 on let vs const.

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.