Can I ignore some website element when navigating using the tab key?
up vote
32
down vote
favorite
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.
html css accessibility tabindex
asked May 3 '10 at 12:31
thor
71321224
add a comment |
up vote
32
down vote
favorite
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.
html css accessibility tabindex
asked May 3 '10 at 12:31
thor
71321224
1
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
2
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06
add a comment |
up vote
32
down vote
favorite
up vote
32
down vote
favorite
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.
html css accessibility tabindex
asked May 3 '10 at 12:31
thor
71321224
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.
html css accessibility tabindex
html css accessibility tabindex
asked May 3 '10 at 12:31
thor
71321224
asked May 3 '10 at 12:31
thor
71321224
asked May 3 '10 at 12:31
thor
71321224
asked May 3 '10 at 12:31
thor
71321224
asked May 3 '10 at 12:31
thor
71321224
71321224
1
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
2
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06
add a comment |
1
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
2
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06
1
1
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
2
2
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06
add a comment |
4 Answers
4
active
oldest
votes
up vote
46
down vote
accepted
You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
add a comment |
up vote
12
down vote
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
answered May 3 '10 at 12:35
michal kralik
3,2901719
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
+1tabindex='-1'indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
– Pekka 웃
May 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
|
show 1 more comment
up vote
1
down vote
display: none it instead.
answered May 3 '10 at 12:35
Quentin
630k718481018
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 3 '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 3 '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 5 '10 at 10:10
add a comment |
up vote
0
down vote
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.
answered yesterday
Hourglasser
438
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
46
down vote
accepted
You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
add a comment |
up vote
46
down vote
accepted
You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
add a comment |
up vote
46
down vote
accepted
up vote
46
down vote
accepted
You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
answered May 3 '10 at 12:35
Nick Craver♦
525k11411891096
525k11411891096
add a comment |
add a comment |
up vote
12
down vote
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
answered May 3 '10 at 12:35
michal kralik
3,2901719
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
+1tabindex='-1'indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
– Pekka 웃
May 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
|
show 1 more comment
up vote
12
down vote
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
answered May 3 '10 at 12:35
michal kralik
3,2901719
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
+1tabindex='-1'indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
– Pekka 웃
May 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
|
show 1 more comment
up vote
12
down vote
up vote
12
down vote
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
answered May 3 '10 at 12:35
michal kralik
3,2901719
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
answered May 3 '10 at 12:35
michal kralik
3,2901719
edited May 3 '10 at 12:58
answered May 3 '10 at 12:35
michal kralik
3,2901719
answered May 3 '10 at 12:35
michal kralik
3,2901719
answered May 3 '10 at 12:35
michal kralik
3,2901719
3,2901719
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
+1tabindex='-1'indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
– Pekka 웃
May 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
|
show 1 more comment
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
+1tabindex='-1'indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
– Pekka 웃
May 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
This is only part of the solution, though - the focus will end up at the element at some point, just later.
– Pekka 웃
May 3 '10 at 12:38
3
3
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
This is incorrect: jsfiddle.net/6QuHc
– Nick Craver♦
May 3 '10 at 12:38
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '10 at 12:39
Tabindex=0 causes the element to be indexed using the normal conventions — 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 3 '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 3 '10 at 13:44
+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 3 '10 at 13:44
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
– thor
May 5 '10 at 10:12
|
show 1 more comment
up vote
1
down vote
display: none it instead.
answered May 3 '10 at 12:35
Quentin
630k718481018
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 3 '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 3 '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 5 '10 at 10:10
add a comment |
up vote
1
down vote
display: none it instead.
answered May 3 '10 at 12:35
Quentin
630k718481018
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 3 '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 3 '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 5 '10 at 10:10
add a comment |
up vote
1
down vote
up vote
1
down vote
display: none it instead.
answered May 3 '10 at 12:35
Quentin
630k718481018
display: none it instead.
answered May 3 '10 at 12:35
Quentin
630k718481018
answered May 3 '10 at 12:35
Quentin
630k718481018
answered May 3 '10 at 12:35
Quentin
630k718481018
answered May 3 '10 at 12:35
Quentin
630k718481018
630k718481018
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 3 '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 3 '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 5 '10 at 10:10
add a comment |
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 3 '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 3 '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 5 '10 at 10:10
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 3 '10 at 12:37
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 3 '10 at 12:37
1
1
That is, hypothetically, possible. OTOH, if you off-screen it then screen readers will present it to real users.
– Quentin
May 3 '10 at 12:40
That is, hypothetically, possible. OTOH, if you off-screen it then screen readers will present it to real users.
– Quentin
May 3 '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 5 '10 at 10:10
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 5 '10 at 10:10
add a comment |
up vote
0
down vote
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.
answered yesterday
Hourglasser
438
add a comment |
up vote
0
down vote
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.
answered yesterday
Hourglasser
438
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
answered yesterday
Hourglasser
438
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.
.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>.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>answered yesterday
Hourglasser
438
answered yesterday
Hourglasser
438
answered yesterday
Hourglasser
438
answered yesterday
Hourglasser
438
438
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f2757973%2fcan-i-ignore-some-website-element-when-navigating-using-the-tab-key%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Instead of positioning it off the page, place it in a normal-looking spot and cover it up with another element.
– Rex M
May 3 '10 at 12:38
2
@Rex — which achieves … what? It will still be in the tab order.
– Quentin
May 3 '10 at 12:43
@David and also set the tabindex.
– Rex M
May 3 '10 at 13:06