tabindex 属性

7.4 フォーカス

要素がフォーカスされるとき、ドキュメントが受けるキーイベントのターゲットはその要素でなければいけません。フォーカスされた要素がないかもしれません。もしないときは、ドキュメントが受けるキーイベントのターゲットは、body 要素があれば、それでなければいけません。なければ、Document のルート要素があれば、それでなければいけません。ルート要素もなければ、キーイベントは発出されてはいけません。

ユーザーエージェントは、ブラウジングコンテキストDocument ごとに、フォーカスを追跡することができます。または、トップレベル・ブラウジングコンテキストごとにフォーカス要素を一つだけサポートしても構いません。その際には、ユーザーエージェントは、プラットフォームの慣例に従うべきです。

トップレベル・ブラウジングコンテキストの中のどの要素がその時点でフォーカスを持つのかについては、そのトップレベル・ブラウジングコンテキスト自身がシステム・フォーカスを持つかどうかに依存してはいけません。

子ブラウジングコンテキストがフォーカスされたとき、そのブラウジングコンテキスト・コンテナもフォーカスを持たなければいけません。

要素がフォーカスされたとき、その要素は、CSS の :focus 擬似クラスに一致しなければいけません。

7.4.1 シーケンシャル・フォーカス・ナビゲーションと tabindex 属性

tabindex コンテント属性は、ウェブ制作者が、要素がフォーカス可能かどうかを、そして、シーケンシャル・フォーカス・ナビゲーションを使って該当の要素に到達できるかどうかを、そして、シーケンシャル・フォーカス・ナビゲーションにおける要素の相対的な順番を指定できるようにします。"タブ・インデックス" という名前は、フォーカス可能な要素を渡り動くため、一般的に "タブ" キーが使われていることに由来しています。"タビング" という用語は、シーケンシャル・フォーカス・ナビゲーションを使って到達可能でフォーカス可能な要素を渡り動くことを意味します。

tabindex 属性は、もし指定されれば、その値は妥当な整数でなければいけません。

要素ごとに、以降で定義するタブインデックス・フォーカス・フラグをセットすることができます。このフラグは、次のセクションで説明されている通り、要素がフォーカス可能かどうかを決定するために必要となるものです。

この属性が指定されたら、整数パース規則を使ってパースしなければいけません。この属性の値は次の意味を持ちます:

属性が省略された、または、値をパースしたらエラーになった場合

ユーザーエージェントは、要素にタブインデックス・フォーカス・フラグがセットされているかどうか、セットされているなら、その要素はシーケンシャル・フォーカス・ナビゲーションを使って到達可能なのかどうか、そして、もし到達可能なら、その相対的順番は何か、を決定する際には、プラットフォームの慣例に従うべきです。

モジュロ・プラットフォームの慣例では、次の要素に対して、タブインデックス・フォーカス・フラグがセットすることが推奨されます:

プラットフォームの慣例を無視して要素をフォーカスできるようにする(タブインデックス・フォーカス・フラグをセットする)正当な理由の一つとして、ユーザーが要素をアクティベートする方法が、フォーカスされた要素をトリガーにするキーボードアクションしかない場合が挙げられるでしょう。

値が負の整数の場合

ユーザーエージェントは、該当の要素のタブインデックス・フォーカス・フラグをセットしなければいけません。しかし、シーケンシャル・フォーカス・ナビゲーションを使って該当の要素に到達できるようにするべきではありません。

シーケンシャル・フォーカス・ナビゲーションはウェブ制作者に要素への誘導をさせない、という要件を無視する正当な理由の一つとして、ユーザーがフォーカスを移動するメカニズムとしてシーケンシャル・フォーカス・ナビゲーションしかない場合でしょう。たとえば、キーボードのみのユーザーは、テキストフィールドが負に tabindex がセットされていると、それをクリックすることができませんので、そのユーザーのユーザーエージェントは、ユーザーにそのコントロールにタビングできるようにすることは当然のことでしょう。

値がゼロの場合

ユーザーエージェントは、該当の要素のタブインデックス・フォーカス・フラグをセットしなければいけません。シーケンシャル・フォーカス・ナビゲーションを使って該当の要素に到達できるようにするべきです。そして、該当の要素の相対的順番を決定する際には、プラットフォームの慣例に従うべきです。

値がゼロより大きい場合

ユーザーエージェントは、該当の要素のタブインデックス・フォーカス・フラグをセットしなければいけません。シーケンシャル・フォーカス・ナビゲーションを使って該当の要素に到達できるようにするべきです。そして、シーケンシャル・フォーカス・ナビゲーションの順番を次のようにするべきです:

  • tabindex 属性が省略された、または、値がパースされた時にエラーになるフォーカス可能な要素の前、
  • tabindex 属性が 0 以下の値を持つフォーカス可能な要素の前、
  • tabindex 属性が 0 より大きい値を持つけれども、その要素の tabindex 属性の値より小さい要素の後、
  • tabindex 属性がその要素の tabindex 属性と同じ値を持つけれども、ドキュメントの中でツリー順でその要素より前にある要素の後、
  • tabindex 属性がその要素の tabindex 属性と同じ値を持つけれども、ドキュメントの中でツリー順でその要素より後にある要素の前、そして、
  • tabindex 属性がその要素の tabindex 属性より大きい値を持つ要素の前。

タブインデックス・フォーカス・フラグがセットされているけれどもアクティベーション・ビヘイビアが定義されていない要素は、何もしないアクティベーション・ビヘイビアを持つことになります。

これは、tabindex 属性によってフォーカスだけが可能になった要素は、non-mouse activation への応答において click イベントを発出することを意味します(例:その要素がフォーカスされているときに "enter" キーを押す)。

tabIndex IDL 属性は、tabindex コンテント属性の値を反映しなければいけません。そのデフォルト値は、該当の要素がフォーカス可能なら 0 になり、フォーカス可能でなければ −1 になります。

7.4.2 フォーカス・マネージメント

次の条件がすべて一致したら、その要素はフォーカス可能です:

さらに、area 要素のために生成された輪郭それぞれや、メディア要素のユーザーエージェント提供のあらゆるインタフェース(再生ボタンなど)や、目に見えるフォームコントロールのユーザーインタフェースの部品(<input type=number> のスピンコントロールの "up", "donw" ボタンなど)は、プラットフォームの慣例で禁止されたり、関連の要素が無効でない限り、フォーカス可能にするべきです。(イメージマップはページの複数のイメージを使って再利用できるため、ひとつの area 要素に複数の輪郭を関連付けることができます。)

前述にもかかわらず、ユーザーエージェントは、とりわけ、アクセシビリティの支援や、プラットフォームの慣例により合わせるために、どんな要素だろうが要素の一部であろうがフォーカス可能にできます。


要素にフォーカスを当てる手順は次のとおりです:

  1. 該当の要素が Documentない、または、その要素の Documentブラウジングコンテキストを持たない、または、その要素の Documentブラウジングコンテキストトップレベル・ブラウジングコンテキストを持たない、または、その要素がフォーカス可能でない、または、その要素がすでにフォーカスされているなら、これらの手順を中止します。

  2. 要素にフォーカスを当てることで他の要素からフォーカスを取り除くことになるなら、その要素に対してフォーカスを外す手順を実行します。

  3. 該当の要素を、そのトップレベル・ブラウジングコンテキスト内で、その時点のフォーカス要素にします。

    いくつかの要素は、特に area は、一つ以上の認識可能なフォーカス可能な領域に関連付けることができます。その要素にフォーカスが当たったときに特定の領域が指定されたなら、それが、フォーカスさせなければならない領域です。そうでなければ、たとえば、focus() メソッドを使ったときは、ツリー順で最初の領域が、フォーカスされなければならない領域になります。

  4. ユーザーエージェントは、フォーカスするウィジットに対して、プラットフォーム依存の関連する慣例を適用することができます。

    たとえば、いくつかのプラットフォームは、フィールドにフォーカスを当てるときに、そのフィールドのコンテンツを選択状態にします。

  5. 該当の要素で focus という名前のシンプルなイベントを発出します。

ユーザーエージェントは、ユーザーがフォーカス可能な要素にフォーカスを移動するときは常に、この要素にフォーカスを当てる手順を同期的に実行しなければいけません。

要素からフォーカスを外す手順は次のとおりです:

  1. 該当の要素が input 要素であり、かつ、change イベントがその要素に適用され、かつ、その要素にアクティベーション・ビヘイビアが定義されておらず、かつ、ユーザーがそのコントロールがフォーカスされている間にその要素の選択ファイルのリストを変更し、その変更を確定していなければ、その要素で change という名前のバブリングするシンプルなイベントを発出します。

  2. 該当の要素からフォーカスを外します。

  3. 該当の要素で blur という名前のシンプルなイベントを発出します。

フォーカスされている要素がフォーカス可能な要素であることをやめるとき、または、別の要素が代わりに明示的にフォーカスされないにも関わらずフォーカスされていることをやめるとき、ユーザーエージェントは、影響を受ける要素だけにフォーカスを外す手順を同期的に実行するべきです。

これは、たとえば、要素が Document から削除されたり、hidden 属性が追加された時に起こります。これは、input 要素が無効にされたときにも起こります。

7.4.3 ドキュメントレベルのフォーカス API

document . activeElement

その時点でフォーカスされている要素を返します。

document . hasFocus()

ドキュメントがフォーカスされているなら true を、そうでなければ false を返します。

window . focus()

ウィンドウをフォーカスします。このメソッドの利用は推奨されません。代わりにユーザーがウィンドウのフォーカスをコントロールできるようにしてください。

window . blur()

ウィンドウのフォーカスを外します。このメソッドの利用は推奨されません。代わりにユーザーがウィンドウのフォーカスをコントロールできるようにしてください。

Document オブジェクトの activeElement 属性は、そのドキュメントの中でフォーカスされている要素を返さなければいけません。その Document の中にフォーカスされた要素がなければ、body 要素を返さなければいけません。

子ブラウジングコンテキストがフォーカスされたとき、定義によって、そのブラウジングコンテキスト・コンテナもフォーカスされます。たとえば、ユーザーが iframe の中にあるテキストフィールドにフォーカスを移動したら、その iframe は、親ブラウジングコンテキストの中で、フォーカスを持つ要素になります。

Document オブジェクトの hasFocus() メソッドは、その Documentブラウジングコンテキストがフォーカスされており、かつ、それのすべての祖先ブラウジングコンテキストもフォーカスされており、かつ、トップレベル・ブラウジングコンテキストシステムフォーカスを持っているなら、true を返さなければいけません。Documentブラウジングコンテキストを持っていない、または、そのブラウジングコンテキストトップレベル・ブラウジングコンテキストを持っていないなら、このメソッドは常に false を返すでしょう。

Window オブジェクトの focus() メソッドは、呼び出されたら、ユーザーはこのメソッドが呼び出された Window オブジェクトのブラウジングコンテキストのコンテンツに興味があるかもしれない、とスクリプトが考えていると、ユーザーエージェントにヒントを与えます。

ユーザーエージェントは、この focus() メソッドをきっかけに何かしらの通知をすることが推奨されます。

Window オブジェクトの blur() メソッドは、呼び出されたら、その時点ではユーザーはこのメソッドが呼び出された Window オブジェクトのブラウジングコンテキストのコンテンツに興味がなさそうだが、そのコンテンツは後にまた興味がもたれるかもしれない、とスクリプトが考えていると、ユーザーエージェントにヒントを与えます。

ユーザーエージェントは、blur()メソッドのコールを完全に無視することが推奨されます。

歴史的に、focus()blur() メソッドは、実際にはシステムフォーカスに影響を与えてきましたが、悪意のあるサイトがこの挙動をユーザーの不利益になるよう広く悪用しているのです。

7.4.4 要素レベルのフォーカス API

element . focus()

要素をフォーカスします。

element . blur()

要素からフォーカスを外します。このメソッドを使うことは推奨されません。他の要素をフォーカスしてください。

フォーカスリングを隠すためにこのメソッドを使わないでください。キーボードユーザーからフォーカスリングを隠してしまうような他のメソッドも使わないでください。特に、'outline' プロパティを無効にしてしまう CSS ルールを使わないでください。フォーカスリングを取り除いてしまうと、キーボードを使ってインタラクティブなコンテンツをナビゲートしたり操作するユーザーに対して、深刻なアクセシビリティ問題を引き起こしてしまいます。

focus() メソッドは、呼び出されたら、次のアルゴリズムを実行しなければいけません:

  1. 要素が locked for focus とマークされているなら、これらの手順を中止します。

  2. 該当の要素を locked for focus としてマークします。

  3. 該当の要素に対してフォーカスを当てる手順を実行します。

  4. 該当の要素から locked for focus のマークを外します。

blur() メソッドは、呼び出されたら、このメソッドがコールされた要素に対して、フォーカスを外す手順を実行するべきです。ユーザーエージェントは、ユーザビリティの理由で、選択的に一様に、このメソッドのコールを無視することができます。

たとえば、blur() メソッドは、見た目のために、フォーカスリングを取り除くために、無分別に使われてしまっています。そのページは、キーボードユーザーには使い物にならなくなってしまいます。このメソッドのコールを無視すれば、キーボードユーザーはそのページとやりとりすることができるようになるのです。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#sequential-focus-navigation-and-the-tabindex-attribute