「連続フォーカス ナビゲーションの開始ポイント」機能では、フォーカスされている領域がない場合、連続フォーカス ナビゲーション（[Tab] キーまたは [Shift] + [Tab] キー）でフォーカス可能な要素を検索する開始ポイントを定義します。これは、「リンクをスキップ」やドキュメント内のフォーカスの管理などのユーザー補助機能に特に役立ちます。
HTML には、キーボード操作に対応するための多くの組み込みサポートが用意されています。つまり、キーボードで操作できるページを簡単に作成できます。これは、運動障害のためにマウスを使用できない場合や、キーボードから手を離すことで貴重なミリ秒を無駄にすることを避けたい場合などに役立ちます。
キーボードの処理はフォーカスを中心に行われます。フォーカスは、ページ内のキーボード イベントの行き先を決定します。これまで、キーボード ユーザー向けに適切に動作させるために、追加の作業が必要となる状況がいくつかありました。focus() メソッドを使用すると、ユーザー アクションに応じてフォーカスする要素を選択的に選択することで、フォーカスを管理できます。ただし、このベスト プラクティスには多くの落とし穴があり、ベースライン エクスペリエンスを提供するには、JavaScript の高度なハッキングが必要です。
この手法がすぐに完全になくなることはありませんが、Chrome 50 では、連続フォーカス ナビゲーションの開始ポイントにより、必要となるケースが減ります。この変更により、適切に作成されたページは、手動でフォーカスを管理しなくても、自動的にアクセシビリティが向上します。例を見てみましょう。
ページ内のリンク
テキストの多いサイトでは、ユーザーが重要なセクションにすぐに移動できるように、同じページ内で相互リンクを設定することがよくあります。
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
キーボード ユーザー（オーストラリア料理好き）なら、次のような操作を行います。
Tabを 2 回押して [レシピ] リンクをフォーカスします。Enterを押すと [レシピ] セクションに移動できますTabをもう一度押して「もっと見る」リンクをフォーカスします
Chrome 49 で実際に確認してみましょう。
予定どおりにはいかなかったようですね。
Tab を最後に押すと、[もっと見る] リンクにフォーカスが移動するのではなく、目次の次の項目にフォーカスが移動しました。これは、デベロッパーがヘッダーをフォーカス可能にするために tabindex="-1" を設定していないためです。そのため、#recipes という名前のアンカーをクリックしてもフォーカスが移動しませんでした。これは微妙な間違いであり、マウスを使用している場合は問題ありません。ただし、キーボードやスイッチ デバイスをご利用の場合は、非常に大きな問題になる可能性があります。一般的な Wikipedia ページの相互リンクの量を考えてみてください。これらのアンカーをすべてタブで移動するのは大変です。
では、Chrome 50 で同じ操作を行ってみましょう。
まさに求めていたものでした。何より、コードを変更する必要がありませんでした。ブラウザは、ドキュメント内の位置に基づいてフォーカスを移動する場所を判断しました。
仕組み
フォーカス開始ポイントの実装前は、フォーカスは常に、フォーカスされていた前の要素またはページの上部から移動していました。つまり、次にフォーカスを移動する対象を選択する際に、コンテナ要素や見出しなど、実際にはフォーカスできない要素にフォーカスを移動する可能性があります。これにより、そのような要素を偶然クリックしたときにフォーカス リングが表示されるなど、さまざまな異常が発生します。
フォーカス開始ポイントは、その名前が示すように、Tab または Shift-Tab を押したときに、次のフォーカス可能な要素を探す場所を提案するメカニズムを提供します。
フォーカスがある場合は、以前と同様にフォーカス ナビゲーションの開始ポイントにもなります。また、以前と同様に、フォーカス ナビゲーションの開始ポイントが他に設定されていない場合は、現在の document になります。また、利用可能でサポートされている場合は、現在アクティブな dialog になります。上記の例のようにページ フラグメントに移動すると、フォーカスの開始ポイントが設定されます。また、ページ上の任意の要素をクリックすると、フォーカス可能な要素かどうかにかかわらず、フォーカス ナビゲーションの開始ポイントが設定されるようになりました。最後に、フォーカス開始点だった要素が DOM から削除された場合、その親要素がフォーカス開始点になります。フォーカスの切り替えを繰り返す必要はありません。
その他のユースケース
上記の例以外にも、この機能が役立つシナリオは他にも多数あります。
要素の非表示
ユーザーが visibility: hidden または display: none に設定する必要があるアイテムにフォーカスを合わせている場合があります。たとえば、カルーセル内のクリック可能なアイテムなどです。以前のバージョンの Chrome では、現在フォーカスされているアイテムをこのように非表示にすると、フォーカスがデフォルトの開始ポイントにリセットされ、前述のカルーセルが運動障がいのあるユーザーにとって厄介なトラップになっていました。連続フォーカスの開始ポイントでは、この問題は発生しません。上記のいずれかの方法で要素が非表示になっている場合、Tab キーを押すと、フォーカス可能な次の項目に移動します。
リンクをスキップ
スキップリンクは、キーボード経由でのみアクセスできる目に見えないアンカーです。ユーザーはナビゲーション要素を「スキップ」して、ページのコンテンツに直接ジャンプできます。これは、キーボードやスイッチ デバイスのユーザーにとって非常に有益です。WebAIM のサイトに記載されているとおりです。
多くの人気ウェブサイトにはスキップリンクが実装されていますが、気づかなかったかもしれません。
スキップリンクは名前付きアンカーであるため、元の「目次」の例と同じように機能します。
注意事項とサポート
連続フォーカス ナビゲーションの開始ポイントは、現在 Chrome 50、Firefox、Opera でのみサポートされています。すべてのブラウザでサポートされるまで、名前付きアンカー ターゲットに tabindex="-1" を追加し（フォーカスの枠線を削除）、
デモ
シーケンシャル フォーカス ナビゲーションの開始点は、ブラウザのアクセシビリティ プリミティブのセットに加える優れた機能です。理解しやすく、ユーザー エクスペリエンスを向上させながら、アプリケーションからコードを削除できます。2 つのメリットがあります。この機能について詳しくは、デモをご覧ください。