In Part 1 of Learning via Terrible Ideas, we learned how to:

• Open the Console
• Set a variable
• Add a Click Listener

But adding a click listener doesn’t make it accessible to people who use a keyboard or different kind of assistive technology.

To make our example accessible, we’ll need to:

• Give a “focus indicator” to everything. A focus indicator is the little glowing outline to show you where you are on the page. Press the TAB key now, and you’ll get moved to the next “focusable element.”
• Make everything that is clickable via a mouse be able to be “clicked” with a Spacebar or Enter keypress.

Making Everything Focusable

To make this Terrible Idea™️ accessible, we’ll need to give everything an attribute of tabindex="0". This adds it to the “focus order” which makes it able to be focused.

Note: It is common for websites to not have any focus indicators. If you TAB through a site and it doesn’t show you where the focus is, then that is Bad.™️

To give everything a tabindex attribute, we need to:

1. Get all of the elements on the page.
2. Loop through each of the elements.
3. Add the tabindex attribute to each element.

Open your Console like we did in Part 1 (right click on the page -> Inspect -> Console tab). Now enter these lines in the console:

// Get all of the elements on the page.
var elements = document.querySelectorAll( 'body *' )

// Give each element a tabindex of 0. 
elements.forEach( e => e.tabIndex = 0 )

Note: Lines starting with // are comments to help you out. You don’t need to type them. You can, but you don’t need to.

Now move focus back to the page (a “click” anywhere on this post will do). Press the TAB key a few times. You should have the focus moving between elements now.

Add a keydown Listener

In Part 1, we added a click listener. This made something happen each time we clicked on the page. We can “listen” for things other than click events as well.

To make something happen on a keypress, we add a keydown listener. As soon as a key is pressed, it will run our code.

// Set our phrase from Part 1
var phrase = 'Daddy eats fart popsicles'

// Add the Keydown Listener.
document.addEventListener( 'keydown', e => {
  // if our keypress is a Space or Enter key, change the phrase
  if( e.code === 'Space' || e.code === 'Enter' ) {
    e.preventDefault()
    e.target.innerHTML = phrase
  }
})

Play Around!

Now if you press TAB you should see the focus move to the next element. You can use Shift + TAB to move focus backwards. The highlighted focus indicator will show you the element you’re on.

Each time you press Enter or Space, your element should get its text changed to whatever the phrase equals.

What’s Next

Part 3 is coming up. We’ll go over two things that bring a ton of power to JavaScript: arrays and functions.

Be sure to follow me on Twitter or sign up to my email newsletter to find out when Part 3 is finished.