divを「tabbable」にするにはどうすればよいですか？

Question

私はdiv要素であるボタンを持っており、ユーザーがキーボードのタブキーを押してそれらの間を移動できるようにしたいと考えています。アンカータグでテキストを折り返してみましたが、うまくいかないようです。

解決方法はありますか？

Answer 1

div要素に属性tabindexを追加します。

例：あなたは要素がページ内にあるところから逸脱するタブオーダーをしたくない場合はsteveaxさんのコメントパー

<div tabindex="1">First</div> 
<div tabindex="2">Second</div> 

は、0にtabindex属性を設定します。

<div tabindex="0">First</div> 
<div tabindex="0">Second</div> 

Answer 2

興味のある方は、受け入れられた回答に加えて、次のjqueryを追加して、タブをクリックするとdivスタイルを変更したり、EnterとSpaceを押してクリックをトリガーしたりすることができます（クリックハンドラが残りを行います）

$(document).on('focus', '.button',function(){ 
    $(this).css('border','1px dotted black') 
}); 
$(document).on('keyup', '.button',function(e){ 
    if(e.which==13 || e.which==32) 
     $(this).click() 
}); 

私は誰かが（JQプラグイン$にこれをしたと確信している）。makeTabStop

Answer 3

は、それぞれにtabindex="0"属性を追加し、あなたがtabbableたいDIV。例えば、hoverと：focusというCSS擬似クラスを使用します。例えば、divをフォーカスしてクリック可能にしていることをアプリユーザーに示す場合などです。 JavaScriptを使用してクリックを処理します。あなたはボタンの間のタブにしたい

var doc = document; 
 
var providers = doc.getElementsByClassName("provider"); 
 

 
for (var i = 0; i < providers.length; i++) { 
 
    providers[i].onclick = function() { 
 
     console.log(this.innerHTML); 
 
    }; 
 
}

.provider { 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    width: 256px; 
 
    height: 48px; 
 
    margin-top: 12px; 
 
    margin-right: 12px; 
 
    text-align: center; 
 
    line-height: 48px; 
 
    
 
    text-transform: uppercase; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: 10%; 
 
    background-color: gray; 
 
} 
 

 
.provider:hover{ 
 
    cursor: pointer; 
 
} 
 

 
.provider:focus{ 
 
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4); 
 
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4); 
 
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4); 
 
}

<h4>Click in this area first then press tab</h4> 
 
<div id="email" class="provider" tabindex="0">email</div> 
 
<div id="facebook" class="provider" tabindex="0">facebook</div> 
 
<div id="github" class="provider" tabindex="0">github</div> 
 
<div id="google" class="provider" tabindex="0">google</div> 
 
<div id="twitter" class="provider" tabindex="0">twitter</div>