52

As question really. I have an input box on my page that I would like to ignore when navigating using the keyboard tab key.

I'm using this input box as a simple bot honeytrap and positioning it off the page, so at the moment when using the tab key, it looks to the user as though nothing has focus when they tab to this element.

thor
  • 1,318
  • 2
  • 15
  • 24

4 Answers4

80

You can set the tabindex="-1" on this element so it's ignored in the tab order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.

Michael Zajac
  • 55,144
  • 7
  • 113
  • 138
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Should we ignore elements though? I imagine having every element available via tab is kind of an accessibility staple. – MMalke Aug 23 '22 at 18:13
  • On the current standard: https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute "-1 Causes the element to be focusable, and indicates that the author would prefer the element to be click focusable but not sequentially focusable." – Ciro Santilli OurBigBook.com Aug 31 '22 at 14:57
13

You can use tabindex attribute to define order in which the tab key should cycle through elements. If you set tabindex="-1" the element will be skipped.

More info is available here http://www.webcheatsheet.com/HTML/controll_tab_order.php for example.

UPDATE changed tabindex="0" to "-1" based on comments

mike
  • 5,047
  • 2
  • 26
  • 32
  • This is only part of the solution, though - the focus will end up at the element at some point, just later. – Pekka May 03 '10 at 12:38
  • Tabindex=0 causes the element to be indexed using the normal conventions — http://www.w3.org/TR/html5/editing.html#negative-tabindex — it is used to add elements to the normal sequence that are not normally focusable, not to exclude them. – Quentin May 03 '10 at 12:39
  • +1 `tabindex='-1'` indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach. – Pekka May 03 '10 at 13:44
  • Setting tabindex to -1 works great - thanks for all the replies and suggestions. – thor May 05 '10 at 10:12
  • i could not get tabindex='-1' to work with a display:none element. – Ben Sewards Jan 20 '15 at 15:16
4

display: none it instead.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • True, but more advanced bots might check for that. (as they might for positioning it off the page, but that's real advanced). – Konerak May 03 '10 at 12:37
  • 1
    That is, hypothetically, possible. OTOH, if you off-screen it then screen readers will present it to real users. – Quentin May 03 '10 at 12:40
  • I did consider setting display to none but I was concerned that bots would find this much easier to check than positioning off-page, as Konerak stated. I'd already tested it with some screen-reading software and noticed it appears as an unlabelled text input box. This is obviously an issue but it's one I think we're going to have to live with for the time being and take another look at it later. – thor May 05 '10 at 10:10
1

I used workaround disabled flag on my input element, because no user input is wanted in my case :)

Example with 3 inputs: 

.container {
  display: flex;
  flex-direction: column;
}
input {
  width: 200px;
  margin-bottom: 10px;
}
<div class="container">
  <input placeholder="Not disabled"/>
  <input placeholder="Disabled - skipped by tab" disabled/>
  <input placeholder="Not disabled"/> 
</div>

Hope it works well for somebody <3 - Chrome, Edge, Firefox and also "pseudo" browser IE tested.

Hourglasser
  • 667
  • 1
  • 9
  • 17