Modify element tabindex order

Question

I have a website and I'm making it available for keyboard users. This might have been asked before but I haven't found a way to make it work yet. :(

The issues that I'm having is that on a certain point there is a slideshow and a pauze/play link. When a users tabs through the site, he first has to go through the entire slideshow and then the focus lands on the pauze/play link.

I've tried recreating it as best and simple as possible.

Fiddle here

When you tab through the elements you notice that the focus goes directly on the slides and afterwards goes to the pauze/play link. I know this is normal behaviour because of the HTML structure.

My question is: How can I manipulate this order that whenever I tab from the last "link" the focus goes straight to the pauze/play instead of going to the slides.

I've tried messing around with tabindex="0 / 1"; but then I need to put this on all the elements?

(sidenote: on the website are a lot more HTML elements above this 'slideshow' and I cannot change the structure that is given)

Thanks in advance!

Answer 1

The only way to change this order is to reorder your HTML elements.

tabindex itself can do 2 things:

• it sets the order of "focusable" elements
• it makes element "focusable".

tabindex = -1 Element will not get focus
tabindex = 0 Element will be focusable in the normal tab (semantic) order
tabindex = 1 Element with positive values will be focused first

Answer 2

There is no way to change the tab selection without using tabindex (or JavaScript).

jsfiddle