visibility:hiddenしたフォームコントロールはタブフォーカスできない.md

タイトルで出オチ。

説明

visibility:hiddenしたフォームコントロールはタブフォーカスできない（タブオーダーから外れる）ことに気が付きました。

display:noneしたフォームコントロールがタブフォーカスできないのは知っていたし理解できるけど、visibilityは

• 「見えてるか見えてないか」の表示性を表すプロパティであり、
• displayのように存在までなくしてしまうわけではない

から、まさかタブオーダーから外されるとは思わなかった（マウス操作はできるし）。

こんなときが危険

input要素を消して、独自の見た目を実装するボタンコンポーネントとか。

<label class="toggle-button"><input type="radio"><span><span>どこの席でもよい</span></span></label>
<label class="toggle-button"><input type="radio"><span><span>窓側</span></span></label>
<label class="toggle-button"><input type="radio"><span><span>通路側</span></span></label>

タブオーダーから外れると、キーボードでは操作できなくなってしまいます。

display, visibility, opacityの違い

ざっくり。

• display:none
  • 表示を消す。存在も消す。存在が消えた結果、見えなくなる。
  • マウス操作不可。
  • キーボード操作（タブフォーカス）不可。
• visibility:hidden
  • 表示を消す。存在は消さない。見えないが存在自体は残るので、触ることは可能。
  • マウス操作可。
  • キーボード操作（タブフォーカス）不可。
• opacity:0
  • 透明にすることで表示を消す。存在は消さない。
  • マウス操作可。
  • キーボード操作（タブフォーカス）可。