The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

フォーカスの紹介

このレッスンでは、フォーカスと、アプリケーションでフォーカスを管理する方法について説明します。フォーカスとは、現在キーボードからの入力を受信している画面上のコントロール(フィールド、チェックボックス、ボタン、リンクなどの入力アイテム)、またはコンテンツを貼り付けた場合は、クリップボードからの入力を現在受信している画面上のコントロールを意味します。

すべてのユーザーがキーボードの使い方を知っており、関連付けやテストが簡単で、大半のユーザーにメリットがあるため、アクセシビリティについて学習する際は、まずフォーカスに注目することをお勧めします。

永久まひや手首の捻挫など、運動障害のあるユーザーは、キーボードを利用するか、デバイスを切り替えてページを操作します。そのため、こうしたユーザーに快適なエクスペリエンスを提供するには、優れたフォーカス戦略が重要です。

マシンのすべてのキーボード ショートカットを知っているパワーユーザーは、キーボードだけでサイトをすばやく操作できる機能があれば、確実に生産性が向上します。

したがって、フォーカス戦略をうまく実装することで、アプリケーションを使用するすべてのユーザーにより快適なエクスペリエンスを提供できます。支援技術のユーザー、実際にはすべてのユーザーをサポートする上で、フォーカスに注力することがいかに重要かを今後のレッスンで説明します。

フォーカスとは

フォーカスは、任意の時点におけるキーボード イベントの行き先を決定します。たとえば、テキスト入力フィールドにフォーカスを合わせて入力を開始すると、入力フィールドはキーボード イベントを受信し、入力された文字を表示します。フォーカスがある間は、クリップボードから貼り付けられた入力も受信します。

テキスト フィールドのキーボード フォーカス

現在フォーカスされているアイテムは、多くの場合、フォーカス リングで示されます。このスタイルは、ブラウザとページ作成者が適用したスタイル設定の両方に依存します。たとえば、Chrome では、通常、フォーカスされている要素が青色の枠でハイライト表示されますが、Firefox では破線が使用されます。

サインアップ ボタン

一部のユーザーは、ほぼすべてのコンピュータ操作にキーボードまたはその他の入力デバイスを使用します。このようなユーザーにとって、フォーカスは画面上のあらゆる要素にアクセスする主要な手段であり、非常に重要なものです。このような理由から、WebAIM チェックリストのセクション 2.1.1 では、キーボードで処理できないもの(手書き図など)を除き、すべてのページ機能をキーボードで使用できるようにする必要があると明記しています。

ユーザーは、TabShift+Tab、または矢印キーを使用して、現在フォーカスされている要素を制御できます。Mac OSX では、この動作は少し異なります。Chrome では常に Tab でナビゲートできますが、Safari などの他のブラウザでは Option+Tab を押してフォーカスを変更する必要があります(この設定は、[System Preferences] の [Keyboard] セクションで変更できます)。

キーボード プリファレンスのダイアログ

フォーカスが Tab でインタラクティブな要素を前後に移動する順序は、タブオーダーと呼ばれます。後ほど説明しますが、論理的なタブオーダーでページを設計することは重要なステップとなります。

フォーカス可能とは

テキスト フィールド、ボタン、選択リストなどの組み込みのインタラクティブな HTML 要素は、暗黙的にフォーカスが可能です。つまり、これらの要素は自動的にタブオーダーに追加され、デベロッパーが手を加えなくても最初からキーボード イベントを処理できるようになっています。

暗黙的にフォーカス可能なフィールド

ただし、すべての要素がフォーカス可能とは限りません。段落、div、その他のさまざまなページ要素は設計上、ページをタブで移動してもフォーカスされないような設計になっています。通常、ユーザーが操作できないものは、フォーカスする必要はありません。

すべての要素がフォーカス可能とは限らない

フォーカスの使用

説明したフォーカス技術の一部を試してみましょう。Chrome を使用して、この航空会社サイトのモックアップ ページに移動し、キーボード入力のみを使用して特定のチケットを検索します。確実にキーボードで操作をしてもらうため、このページはマウス入力を受け付けないようになっています(皆さんを信頼していないわけではありません)。

航空会社サイトのモックアップ

指定するチケット パラメータは次のとおりです。

  • 片道
  • メルボルン行き
  • 出発日は 2017 年 10 月 12 日(10/12/2017)
  • 帰着日は 2017 年 10 月 23 日(10/23/2017)
  • 窓側の座
  • プロモーション オファーは受け取らない

入力エラーを出さずにフォーム入力を完了して、[Search] ボタンをアクティベートすると、フォームはクリアされ、リセットされます。先に進んでフォームを完了して、戻ります。

フォームでどのようにキーボード入力が使用されるかを確認しましょう。まず Tab を数回押すと、Flights、Hotels、Rental Cars のナビゲーション アイテムがハイライト表示されます。引き続き Tab を押すと、ラジオボタン グループに進み、矢印キーを使用して Round Trip、One Way、Multi City の中から選択できます。

名前と住所のフィールドに進み、必要な情報を入力します。行き先選択要素に到達すると、矢印キーを使用して都市を選択するか、入力を開始してフィールドをオートコンプリートできます。同様に、日付フィールドでも、矢印キーを使用するか日付を入力できます。

座席タイプの選択には矢印キーを使用するか、「w」、「a」、または「n」を入力して座席オプションにジャンプできます。次に、プロモーション オファーのチェックボックスがフォーカスされている場合は、スペースバーを押してその既定値を無効にできます。最後に、[Search] ボタンをフォーカスし、Enter を押してフォームを送信します。

キーボードのみを使用してフォームを操作できると非常に便利であり、いったんマウスに切り替えてからキーボードに戻ってタスクを完了する必要がありません。フォームで使用されているすべての要素は、暗黙的なフォーカスのあるネイティブ HTML タグであるため、フォームはキーボードで適切に動作し、フォーカス動作の追加や管理のためのコードを記述する必要はありません。