My website has carousel/slider panels with tabbed navigation. Each panel shows a “river” of book covers. 5 covers are shown at a time and clicking next/prev slides 3 books out and 3 new books in. The order of the books in the DOM doesn’t change, just their left position and their visibility.

<div class="books">
<a class="book"><img>#1</a>
<a class="book"><img>#2</a>
<a class="book"><img>#3</a>
<a class="book"><img>#4</a>
...
<a class="book"><img>#25</a>
</div>

For accessibility, i need to keep the tab order for keyboard navigation as [prev button][book 1][book 2][book 3][book 4][book 5][next button] even when prev/next is clicked.

The image shows my problem: if prev is clicked, three books slide in, but in the DOM they are books #23, #24, and #25. When tab is pressed, focus jumps to book #1 in the DOM, now positioned fourth from left.

This is only a problem the first time prev is clicked, but it was still flagged as an accessibility problem. (I knew these kinds of sliders would be challenging for accessibility)

I tried setting the flexbox order dynamically when clicking prev and next, but found tab order is not affected by CSS properties. Setting the tabindex to 1, 2, 3, 4, 5 makes the book covers, halfway down the page, into the first focusable items of course– undesirable!

Is there something I’m missing about setting tabindex dynamically, so it’s restricted to its container somehow? My original slider design worked by actually moving items in the DOM, which presented its own issues. Is there any way to keep the focus order logical as the visibility setting of the books changes, without changing the DOM order? Am I missing an ARIA feature?