タブを使用してjqueryのカルーセルにアクセスできるようにする必要があります

Question

こんにちは私は基本的なjqueryのカルーセルを作成しました。私はタブを使用してアクセス可能にする必要があるので、Prevタブ、Casousalドット、次のタブのようなシーケンスに従います。

<div id="mainDiv"> 
    <div id="buttons"> 
    <a href="#" id="prev" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; left : 300px;">&lt;</a> 
    <a href="#" id="next" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; right: 250px;">&gt;</a> 
</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> 

私はtabIndexプロパティを使用してみましたが、それはうまくいきませんでした。任意のヘルプが歓迎されます:)

Answer 1

あなたのコードにいくつかの問題があります。第1に、「タブ」可能な唯一のアイテムは、2つのタグと、それがタブインデックスを有するものである。カルーセルドットにピントを合わせたい場合は、それらをより適切なフォーカス可能な要素にするようにしてください。

<a href="#" class="slickdot" role="button" onclick ="changeContent()"></a> 

これにより、期待されるホバーカーソル状態を提供するだけでなく、タブキーでドットにアクセスできるようになります。

「Prevタブ、カジュアルドット、次のタブ」のシーケンスに関する次のコメントは、そのフローが自然に発生するようにマークアップを修正することをお勧めします。フォーカス順序をユーザーから乗り越えることは、一般に悪い習慣です。カルーセルドットを前/次のボタンと同じdivに移動することができれば理想的です。こうすることで、ユーザーがコントロールに移動しやすくなり、保守が簡単になります。