The attribute aria-pressed is used to communicate a pressed/unpressed state by setting its value to true or false. When aria-pressed is set to true, it informs screen reader users that the control is pressed.

Let’s practice coding a toggle button. You will need a codepen account. Here’s the codepen where you can follow along (https://codepen.io/josephyang/pen/GROyRBm). Be sure to fork the pen (bottom right footer) to keep a copy in your own codepen that you can reference for the future.

In the HTML section of the project, you will find the following markup. btn is a custom CSS class that is styling the button. fa-regular and fa-bookmark are referencing Font Awesome, which is generating the bookmark icon.

<button class="btn fa-regular fa-bookmark"></button>

Since we are making this a toggle button, we should indicate the current state of the button. To do this, we will apply aria-pressed=”false” to the button. Additionally, we need to give this button a name. So we’ll also apply aria-label=”bookmark” to the button.

<button class="btn fa-regular fa-bookmark" aria-pressed="false" aria-label="bookmark"></button>

In the JS window of codepen, we need to find the button we just created so that we can change its visual appearance and state. The code below will search the DOM for the button element. We will then stick that button within a variable called bookmark.

const bookmark = document.querySelector('.btn');

Now that we have a variable pointing to our button, let’s apply the addEventListener() method to listen for any clicks, and then run a function (using arrow function ()=> {} ).

const bookmark = document.querySelector('.btn');

bookmark.addEventListner('click', ()=> {
	
})

Inside the curly braces { }, we will include an bookmark.classList.toggle(’fa-solid’); to provide a visual indicator for the pressed state. What this code is doing, is adding the class fa-solid to the button, giving the bookmark a filled appearance.

const bookmark = document.querySelector('.btn');

bookmark.addEventListener('click', ()=> {
  bookmark.classList.toggle('fa-solid');
  
})

Below our last code above, we’ll add an if else statement. We will use this if else statement to toggle true or false for aria-pressed.

First, we’ll reference our variable, and get the attribute aria-pressed. So when the button is pressed, if the current aria-pressed attribute is set to false, then set it to true.

if(bookmark.getAttribute('aria-pressed') === 'false') {
	bookmark.getAttribute('aria-pressed', 'true')
} else {

}

Second, we’ll write the code for the else statement. When the button is pressed, if the current aria-pressed is not equal to false (because it’s value true), then set it to false.

if(bookmark.getAttribute('aria-pressed') === 'false') {
	bookmark.getAttribute('aria-pressed', 'true')
} else {
	bookmark.setAttribute('aria-pressed', 'false');
}

Here’s how the JS file should look like:

const bookmark = document.querySelector('.btn');

bookmark.addEventListener('click', ()=> {
  bookmark.classList.toggle('fa-solid');
  if(bookmark.getAttribute('aria-pressed') === 'false'){
    bookmark.setAttribute('aria-pressed', 'true');
  } else {
    bookmark.setAttribute('aria-pressed', 'false');
  }
})