WebFundamentalsこのレッスンでは、フォーカスと、アプリケーションでフォーカスを管理する方法について説明します。フォーカスとは、現在キーボードからの入力を受信している画面上のコントロール(フィールド、チェックボックス、ボタン、リンクなどの入力アイテム)、またはコンテンツを貼り付けた場合は、クリップボードからの入力を現在受信している画面上のコントロールを意味します。すべてのユーザーがキーボードの使い方を知っており、関連付けやテストが簡単で、大半のユーザーにメリットがあるため、アクセシビリティについて学習する際は、まずフォーカスに注目することをお勧めします。永久まひや手首の捻挫など、運動障害のあるユーザーは、キーボードを利用するか、デバイスを切り替えてページを操作します。そのため、こうしたユーザーに快適なエクスペリエンスを提供するには、優れたフォーカス戦略が重要です。ショートカットを知っているパワーユーザーは、キーボードだけでサイトをすばやく操作できる機能があれば、確実に生産性が向上します。したがって、フォーカス戦略をうまく実装することで、アプリケーションを使用するすべてのユーザーにより快適なエクスペリエンスを提供できます。支援技術のユーザー、実際にはすべてのユーザーをサポートする上で、フォーカスに注力することがいかに重要かを今後のレッスンで説明します。イベントの行き先を決定します。イベントを受信し、入力された文字を表示します。フォーカスがある間は、クリップボードから貼り付けられた入力も受信します。このスタイルは、ブラウザとページ作成者が適用したスタイル設定の両方に依存します。一部のユーザーは、ほぼすべてのコンピュータ操作にキーボードまたはその他の入力デバイスを使用します。このようなユーザーにとって、フォーカスは画面上のあらゆる要素にアクセスする主要な手段であり、非常に重要なものです。キーボードで処理できないもの(手書き図など)を除き、すべてのページ機能をキーボードで使用できるようにする必要があると明記しています。ユーザーは、Tab、Shift+Tab、または矢印キーを使用して、現在フォーカスされている要素を制御できます。この動作は少し異なります。セクションで変更できます)。インタラクティブな要素を前後に移動する順序は、タブオーダーと呼ばれます。後ほど説明しますが、論理的なタブオーダーでページを設計することは重要なステップとなります。要素は、暗黙的にフォーカスが可能です。イベントを処理できるようになっています。すべての要素がフォーカス可能とは限りません。段落、div、その他のさまざまなページ要素は設計上、ページをタブで移動してもフォーカスされないような設計になっています。通常、ユーザーが操作できないものは、フォーカスする必要はありません。説明したフォーカス技術の一部を試してみましょう。ページに移動し、キーボード入力のみを使用して特定のチケットを検索します。確実にキーボードで操作をしてもらうため、このページはマウス入力を受け付けないようになっています(皆さんを信頼していないわけではありません)。パラメータは次のとおりです。ボタンをアクティベートすると、フォームはクリアされ、リセットされます。先に進んでフォームを完了して、戻ります。フォームでどのようにキーボード入力が使用されるかを確認しましょう。アイテムがハイライト表示されます。名前と住所のフィールドに進み、必要な情報を入力します。行き先選択要素に到達すると、矢印キーを使用して都市を選択するか、入力を開始してフィールドをオートコンプリートできます。同様に、日付フィールドでも、矢印キーを使用するか日付を入力できます。座席タイプの選択には矢印キーを使用するか、「w」、「a」、または「n」を入力して座席オプションにジャンプできます。オファーのチェックボックスがフォーカスされている場合は、スペースバーを押してその既定値を無効にできます。押してフォームを送信します。キーボードのみを使用してフォームを操作できると非常に便利であり、いったんマウスに切り替えてからキーボードに戻ってタスクを完了する必要がありません。タグであるため、フォームはキーボードで適切に動作し、フォーカス動作の追加や管理のためのコードを記述する必要はありません。