Tabキーでフォーカスさせる／させない要素を制御する

gravity-works (2024年10月 1日 15:12) | コメント(0)
Webページをキーボード操作で閲覧しやすくする施策になります。

Tabキーでページ内のリンク要素を選択していく際、<a>タグや<button>タグなどはデフォルトで選択できるようになっていますが、JavaScriptで<div>タグや<span>タグなどをボタンとして使用している場合はそのままでは選択されません。

●Tabキーで選択できるようにする
tabindex="0"
をつけることでTabキーで選択できるようになります。

（例）
<div> ... </div>
　↓
<div tabindex="0"> ... </div>

●Tabキーで選択できないようにする
逆にTabキーで選択できないようにしたい場合は
tabindex="-1"
をつけます。


カテゴリ:

コメントする

検索

このブログ記事について

このページは、gravity-worksが2024年10月 1日 15:12に書いたブログ記事です。

ひとつ前のブログ記事は「親gridの行や列を引き継いだ子gridの作り方」です。

次のブログ記事は「外部SVGファイルの色をCSSで変更する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。