a11y code

Repairing an inaccessible button

Context

We have two buttons on this page. Each button, when clicked, changes the color theme of the page. However, people with hand tremors, such as those caused by Parkinson's disease, may struggle to use a mouse and instead rely heavily on keyboard navigation.

Desired functionality

Users should be able to interact with each button using only the keyboard:

  • navigate to the button using the Tab key

  • notice a focus ring around the button

  • activate the button by pressing either the Enter key or Space bar

Problem

Currently, one of the buttons is inaccessible via keyboard. How to tell? Refresh the page and press the tab key. Can you reach both buttons? Can you complete all the steps listed in the section above? Yes, but only for one button.

Coding challenge

Notice how the button built with the <button> element is keyboard-accessible? That's because it has built-in keyboard accessibility. This is the best way to create a button.

But, if you start with an existing codebase where this isn't the case, and switching to <button> tags is not an option, it’s good to know how to repair it. Usually, this involves adding HTML and/or ARIA attributes, and sometimes JavaScript.

For this challenge, your task is to add one HTML attribute and some JavaScript code to make the other button keyboard-accessible as well. Once done, compare the code for the two buttons. Isn't the native <button> element so much easier to work with?

You can test and implement your solution using this CodePenopens in a new tab.

Connect and learn

Follow our LinkedIn conversationopens in a new tab to share your solution or ask questions.

Interested in learning more about accessibility?

Visit Web for Everyoneopens in a new tab for a beginner-friendly intro to accessibility.

Code for Theme toggle one button

HTML for Theme toggle one button

<button class="button one"> Theme toggle ONE </button>

JavaScript for Theme toggle one button

const buttonOne = document.querySelector('.button.one') buttonOne.addEventListener('click', toggleTheme)
Theme toggle TWO

Code for Theme toggle two button

HTML for Theme toggle two button

<div class="button two"> Theme toggle TWO </div>

JavaScript for Theme toggle one button

const buttonTwo = document.querySelector('.button.two') buttonTwo.addEventListener('click', toggleTheme)