Need to make my jquery carousal accessible using tab - html

Question

Hi I have created a basic jquery carousal. I need to make it accessible using tab, so that it follows sequence like Prev tab, casousal dots, next tab.
<div id="mainDiv">
<div id="buttons">
<
>
</div>
<div onclick ="changeContent()" id="sliderDiv">
<ul tabindex="1" class="slider">
<li>
<h3>Image 1</h3>
<img src="images/1.jpg" alt="Image not found">
</li>
<li>
<h3>Image 2</h3>
<img src="images/2.jpg" alt="Image not found">
</li>
<li>
<h3>Image 3</h3>
<img src="images/3.jpg" alt="Image not found">
</li>
<li>
<h3>Image 4</h3>
<img src="images/4.jpg" alt="Image not found">
</li>
<li>
<h3>Iframe</h3>
<iframe src="testIframe.html"></iframe>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="carousalDots">
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
</div>
I tried using tabindex property but it didn't work. Any help will be appreciated :)

Answer 1

There are a few issues with your code. First, the only items that are 'tab'-able are the two tags and the which has a tabindex set. If you want the carousel dots to be focusable, you should try to make them into a more appropriate focusable element. something like:
This will allow the dots to be accessed via the tab key, as well as provide the expected hover cursor state.
For your next comment about the sequence being "Prev tab, casousal dots, next tab", I'd suggest reworking your markup to allow for that flow to happen naturally. It's generally bad practice to hijack the focus order away from the user. If you could move the carousel dots into the same div as the prev/next buttons it'd be ideal. This way it's easier for users to navigate to the controls and it's easier to maintain.