Skip to main content

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

YouTube embeds track user data for advertising purposes. You can watch the video on YouTube if you prefer not to grant consent for YouTube embeds.

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.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development