Tabキーを押下時のフォーカス移動させなくするにはどうしたらよいのか令和4年 3月 11日 作成
概略
Tabキーを押した時、フォーカス可能な要素に対し順々に移動していくのが通常の仕様なのですが、そのTabフォーカスさせなくするにはどうしたらよいのか。
手段
tabindex属性を指定する事により実現可能で、属性値が0以上の場合はフォーカス可能で、-1の場合はフォーカス不可能になります。（Tabキーによるフォーカスが無効になるだけです。）
tabindex属性に1以上の整数が指定されている場合は、Tabキーによるフォーカスの移動順序は値の大きさによって、0が指定されている場合は、Tabキーによるフォーカスの移動順序は出現順となります。
実装方法
HTMLコード
<ul>
<li><a href="#_" tabindex="-1"></a></li>
<li><a href="#_" tabindex="-1"></a></li>
<li><a href="#_" tabindex="-1"></a></li>
</ul>
考察
横長画面において、非表示にしている要素に対してTabフォーカスされて困っていたが、tabindex属性を指定・記述するだけで対応できました。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「1年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
