Tabkey navigation HTML

Question

So i have 3 buttons: "Cancel", "Prev." and "Next", is there a way to limit tab navigation only to these 3 buttons. Desired tab key cycle: Next->Prev->Cancel->Next->... Any ideas how to achieve this?

Edit: I must decorate every element that i don't want to be accessible via tab sequential navigation with tabindex="-1"? what if i have a lot of elements that i don't want to be accessible this way?

Edit 2: The answers described bellow make the tab key jump through address bar of the browser, so it is not a good solution for me.

@G.Stoynev nothing, basicaly only markup for this buttons and tabindex on them to set the order — Alex, Sep 14 '16 at 15:08
Similar to this SO question: http://stackoverflow.com/questions/5192859/html-remove-element-from-tab-index — Nick Barth, Sep 14 '16 at 15:08

ksav · Answer 1 · 2016-09-14T16:22:15.787

2

A negative tabindex value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;

<button tabindex="1">Next</button>
<button tabindex="3">Prev</button>
<button tabindex="2">Cancel</button>

<button tabindex="-1">Other</button>

edited Sep 14 '16 at 16:22

answered Sep 14 '16 at 15:08

ksav

20,015
6
46
66

score -1 · Answer 2 · answered Sep 14 '16 at 15:07

Using tabindex with a negative value should do the trick, I think. https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

Edit: Yep, it does: https://jsfiddle.net/Lgmxmsfm/
At least on my Chrome.

<a tabindex="1" href="#">first</a><br/>
<a tabindex="3" href="#">third</a><br/>
<a tabindex="-3" href="#">nope</a><br/>
<a tabindex="2" href="#">second</a>

Tabkey navigation HTML

2 Answers2