Categories
Code Tutorial

Learning via Terrible Ideas: Replacing Text on Click, Part 2

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

Entering code and tabbing through the elements to show the focus ring moving.

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

Adding code in the console, then clicking to the page and tabbing to elements. Each keypress changes the focused element's text to "Daddy eats fart popsicles."

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.

By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s