📑

【HTML】tabindexの0と-1について理解する

2023/12/22に公開

はじめに

tabindex属性の適切な使用は、ユーザーがキーボードだけでウェブページを効率良く操作できるようにするために不可欠です。本記事ではtabindex="0"とtabindex="-1"の役割と実際の使用方法について説明します。

tabindex="-1"を持つ要素はキーボードナビゲーションのシーケンスから除外されます。しかし、JavaScriptのfocus()メソッドを使ってプログラム的にフォーカスを当てることは可能です。

<!-- ユーザーはTabでこの要素にフォーカスを当てることはできませんが、JavaScriptからはフォーカスを当てることができます。 -->
<div tabindex="-1" id="error-message">
  このメッセージにはフォーカスできません。
</div>

上記の例では、エラーメッセージがあるがTabキーでアクセス可能ではないように設定してあります。しかし、以下のようにJavascriptを使えばフォーカスを当てることができます。

document.getElementById('error-message').focus();

このテクニックは、スクリーンリーダーで読むためだけにエラーメッセージを表示したい場合などに役立ちます。

tabindex="0"を持つ要素は、ソースコード上の位置に基づき、キーボードナビゲーションでフォーカスを受け取ることができます。

<!-- Tabキーのシーケンスには文書のソース内の順序で定義されます。 -->
<button tabindex="0">私はタブナビゲーションに含まれます</button>

tabindex="0"は特に、本来はフォーカスを受けられない要素にフォーカスを可能にしたい場合に使います。

負の値（通常は-1）は要素をキーボードナビゲーションから除外しつつ、フォーカスを当てることを可能にします。一方、正の値はナビゲーションのタブ順序をユーザー定義できますが、0以外の値は特別な場合を除いて避けるべきです。

対話型のHTML要素ではないものにtabindex属性を適用するのは、アクセシビリティの観点から避けるべきです。

キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。

ユーザーが対話的なコンテンツを簡単にナビゲートできるよう、アクセシビリティと利便性を考慮してコンテンツを設計することが重要です。

tabindex属性の適切な使用は、すべてのユーザーにとってキーボードナビゲーションをスムーズにするために必要です。0や-1以外の値を使う際には注意し、対話的ではない要素に使用することは避けましょう。これにより、利用者全員に直感的でアクセスしやすい体験を提供できます。