タブ移動時のチェックマークについての概要を見る

Question

チェックマークにフォーカスアウトラインを追加するにはどうすればよいですか？例えば、キーボード上の「タブ」を押すと、ユーザは、タブを付けられた各コンテンツの輪郭を見ることになる。

td:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label for="A1"> 
 
        <span class="hidden">A-1</span> 
 
        <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
        <span aria-hidden="true">&nbsp;</span> 
 
       </label> 
 
    </td> 
 
    </tr> 
 
</table>

私はまさに私が間違っているのかわかりません。

Answer 1

フォーカスを当てたいものに関係なく、要素のタグにtabindex="0"を追加します。

td:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; color:red; 
 
}

<table> 
 
    <tr> 
 
     <td tabindex="0" > 
 
      <label for="A1"> 
 
       <span class="hidden">A-1</span> 
 
       <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
       <span aria-hidden="true">&nbsp;</span> 
 
      </label> 
 
     </td> 
 
    </tr> 
 
</table>

EDIT：あなたは別の整数> 0に "0" を変更したときに完全にするために、それは、タブ順序で、その要素の場所となります。例えば。 tabindex="3"は、ページのタブ順に要素を3番目にします。

Answer 2

チェックボックスだけを指定する場合は、属性セレクタを使用できます。

input[type="checkbox"]:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label for="A1"> 
 
     <span class="hidden">A-1</span> 
 
     <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
     <span aria-hidden="true">&nbsp;</span> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
</table>