フォーカス管理の悩みを解消

「シーケンシャル フォーカス ナビゲーションの開始ポイント」機能は、フォーカスされたエリアがないときに、シーケンシャル フォーカス ナビゲーション([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" をフォーカス可能に設定していないためです。そのため、anchor という名前の #recipes をクリックしてもフォーカスが移動しませんでした。これはちょっとした間違いで、マウスを使っている方には大したことではありません。しかし、キーボードを使うユーザーや、別のデバイスを使用するユーザーにとっては、これは非常に大きな問題となる可能性があります。一般的なウィキペディアのページの相互リンクの量を考えてみましょう。何度も何度もアンカーを行き来するのは大変ですよね。

次に、Chrome 50 で同じ操作方法を見てみましょう。

これを実現することができました。何より、コードを変更する必要がありません。ブラウザは、ドキュメント内の現在の位置に基づいてフォーカスの移動先を認識しただけです。

仕組み

フォーカス開始点を実装する前は、フォーカスは常に前のフォーカスされた要素またはページの上部から移動します。つまり、次にフォーカスする対象を選択するには、コンテナ要素や見出しなど、実際にはフォーカス可能ではないものにフォーカスを移動する必要があります。これにより、何かを軽視したときにフォーカス リングが表示されるなど、さまざまな異常が発生します。

フォーカス開始ポイントは、その名前が示すように、Tab または Shift-Tab を押したときに、次にフォーカス可能な要素を探す場所を提案するメカニズムを提供します。

次のように、いくつかの方法で設定できます。何かがフォーカスされている場合、以前と同様に、フォーカス ナビゲーションの開始点でもあります。また、前と同様に、フォーカス ナビゲーションの開始点が他に設定されていない場合は、現在の document になります。また、使用が可能でサポートされていれば、現在アクティブな dialog になります。上記の例のようにページ フラグメントに移動すると、フォーカスの開始ポイントが設定されます。また、ページ上の要素をクリックすると、その要素がフォーカス可能かどうかにかかわらず、フォーカス ナビゲーションの開始ポイントが設定されます。最後に、フォーカスの開始点だった要素が DOM から削除されると、その親がフォーカスの開始点になります。モルハモリにこだわらないように!

その他のユースケース

上記の例以外にも、この機能が役立つシナリオは多数あります。

要素を非表示にする

visibility: hidden または display: none に設定する必要があるアイテムにユーザーがフォーカスを合わせる場合があります。たとえば、カルーセル内のクリック可能なアイテムなどです。Chrome の以前のバージョンでは、この方法で現在フォーカスされているアイテムを非表示にすると、フォーカスがデフォルトの開始点にリセットされ、前述のカルーセルが運動障がいのあるユーザーにとって厄介なトラップになっていました。シーケンシャル フォーカスの開始点では、これは該当しません。上記のいずれかの方法で要素を非表示にした場合、Tab キーを押すと、次のフォーカス可能な項目に移動します。

スキップリンクは非表示のアンカーで、キーボードからのみアクセスできます。ナビゲーション要素を「スキップ」してページのコンテンツにすぐに移動できるため、キーボード使用やデバイスの切り替えの際に非常に便利です。WebAIM のサイトで説明されているとおり

多くの人気ウェブサイトにスキップリンクが実装されていますが、ユーザーがこれまで気づいたことはありません。

GitHub.com のスキップリンク

スキップリンクはアンカーという名前なので、元の目次の例と同じように機能します。

注意事項とサポート

現在、フォーカス ナビゲーションの開始ポイントは Chrome 50、Firefox、Opera でのみサポートされています。すべてのブラウザでこの機能がサポートされるまでは、名前付きアンカー ターゲットに tabindex="-1" を追加する(およびフォーカスの枠線を削除)する必要があります。

デモ

シーケンシャル フォーカス ナビゲーションの開始点は、ブラウザのユーザー補助プリミティブに加えて非常に便利です。簡単に操作でき、実際に、アプリケーションからコードを削除できるとともに、ユーザー エクスペリエンスを向上させることができます。二重勝利!この機能について詳しく知るには、デモをご覧ください。