Preventing people from tabbing into elements

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Preventing people from tabbing into elements

Let’s say you want to prevent people from tabbing into the <a> and <button> in this HTML:

<div>
  <a href="#">Hello world</a>
  <button>I'm a button</button>
</div>

There are two ways to prevent people from tabbing into elements:

1. Negative tabindex
2. Visibility hidden

Negative tabindex

If you set negative tabindex on a focusable element, you prevent people from tabbing into that element.

<div>
  <a href="#" tabindex="-1">Hello world</a>
  <button tabindex="-1">I'm a button</button>
</div>

Negative tabindex is good if you want to prevent users from tabbing into ONE element. If you need to prevent users from tabbing into a group of elements, visibility: hidden is a better alternative.

Visibility hidden

If you set visibility to hidden, you hide the element completely.

1. You won’t be able to see the element
2. You won’t be able to Tab into the element
3. Screen readers won’t be able to read things in the element (more on this in the accessibility module)

<div>
  <a href="#">Hello world</a>
  <button>I'm a button</button>
</div>

div {
  visibility: hidden;
}

To make an element visible again, you set visibility back to visible.

Visibility hidden and display none

visibility: hidden is similar to display: none. Both methods hide an element away completely.

The difference is:

• You can animate elements when you use visibility: hidden
• You cannot animate elements when you use display: none