多くのユーザーはキーボード、または スイッチ デバイスなどのキーボードの機能を、ユーザーの代わりに ナビゲーションです。手首の骨折など、一時的に身体的障害がある人 手根管のような軽度の運動障がいがある人や キーボードでページを移動することもできますが、 ハードウェアの故障などです
ロービジョンまたは目の見えないユーザーはナビゲーションにキーボードと スクリーン リーダーのソフトウェアが必要です。ただし、 キーボード ショートカット コマンドを使って画面上を移動します。
これらすべての障がいや状況に対応するキーボードのサポートが不可欠です。 キーボードのユーザー補助の大部分はフォーカスが中心です。フォーカスとは画面上のどの要素を指しますか？ キーボードからの入力を受信します。
このモジュールでは、HTML 構造と CSS スタイル設定に焦点を当て、 キーボードやフォーカス可能な要素などです「 JavaScript モジュールには、 インタラクティブ要素のフォーカス管理とキー入力に関する情報が表示されます。
フォーカス順序
キーボード ユーザーが移動できる要素は「フォーカス可能」と呼ばれる あります。フォーカス順序 タブまたはナビゲーション順序とも呼ばれる 焦点を当てますデフォルトのフォーカス順序は、論理的で直感的で、ビジュアルと整合性のあるものにする必要があります。 決定できます
ほとんどの言語では、フォーカス順序はページの上部から始まり、下部で左から右へ向かって終了します。ただし、一部の言語は右から左に読み取られるため、ページの主要な言語では別のフォーカス順序が必要となる場合があります。
デフォルトでは、フォーカス順序には、 リンク、チェックボックス、テキスト入力です。当然フォーカス可能な HTML 要素には、 組み込みのタブ順序サポートと基本的なキーボード イベントの処理。
フォーカスの順序を更新して、通常は含まれない要素を含められます。 フォーカスの取得（非インタラクティブ HTML 要素、カスタム コンポーネント、 ARIA を持つ要素で、 セマンティクスを提供します。
タブインデックス
フォーカス順序は、正の値の要素から始まります。 タブインデックス 属性（存在する場合）に移動し、最小の正の数から （1、2、3 など）。次に、TabIndex の値を持つ要素を 0 になります。負の tabindex を持つ要素 自然のフォーカス順序から外れます
tabindex が
ゼロ（tabindex="0"）が、通常はフォーカス不可能な要素に適用された場合、
表示に合わせてページの自然なフォーカス順に追加されます
説明します。ただし、自然にフォーカス可能な HTML 要素とは異なり、
追加のキーボードのサポートを提供する
完全にアクセスできるようにする必要があります
同様に、通常はフォーカス可能であるものの、
非アクティブ（入力フィールドが入力されるまで使用できないボタンなど）
この要素に負のタブインデックス（tabindex="-1"）を追加する必要があります。追加しています
支援技術やキーボードに TabIndex が挿入されていないことを
ボタンを削除する必要があります。ただし、
必要に応じて JavaScript を使用して要素にフォーカスを戻します。
この例では、属性が指定されていない要素に tabindex 属性が追加されています。
自然に焦点が当たってきます要素の順序は、
tabindex がフォーカス順序に対する能力を示します。これは
悪い例です。
<ph type="x-smartling-placeholder">リンクをスキップ
今日のほとんどのウェブサイトでは、ページのメインヘッダーにメニューリンクの長いリストがあります。 ページ間の整合性を確認しますこれは一般的なナビゲーションには最適ですが、 キーボードのみのユーザーの場合、ウェブサイトのメイン コンテンツに コンテンツを自動で作成できます。
冗長なリンクや役に立たないリンクのグループを飛ばす一つの方法は、 リンクをスキップできます。スキップリンクはアンカーです 同じページの別のセクションに移動するリンク（そのセクションの ID を使用して、ユーザーをウェブサイトの別のページや外部 リソースです。スキップリンクは通常、ユーザーが最初にフォーカス可能な要素として追加されます。 ウェブサイトへのアクセス時に発生し、表示 / 非表示の 2 種類があります。 ユーザーがそのタブを使用するまで、アプリはデザイン上の要件に応じて選択できます。
ユーザーが Tab キーを押すと、アクティブなスキップリンクがある場合、 スキップリンクに移動しますユーザーはこのスキップリンクをクリックして ヘッダーセクションとメインナビゲーションを 通過します広告をクリックして リンクをスキップして DOM に移動すると、次の フォーカス可能な要素を指定します。
他のリンクと同様に、スキップリンクにもコンテンツに関するコンテキストが
指定します。「メイン コンテンツにスキップ」というフレーズを追加してユーザーに知らせる
そのリンクがリンク先に示されていますさまざまなコードのオプションから
リンクに追加のコンテキスト情報を提供します
aria-labelledby、
aria-label または
この例に示されているように、<a> 要素のテキスト コンテンツに追加します。
フォーカス インジケーター
ここまで学習したように、フォーカス順序はキーボードの重要な機能です。 学びました。そのフォーカスのスタイルを決めることも重要です。なぜなら、 ユーザーはフォーカス順が良かったとしても、自分が今どこにいるのかをどうやって知ることができますか？ どうなるでしょうか
フォーカス インジケーターの表示 サイトの現在の状態を常にユーザーに知らせるうえで できます。これは、目の見えるキーボードのみのユーザーにとっては特に重要です。
ブラウザのデフォルトのスタイル
現在、最新のウェブブラウザには、デフォルトのビジュアル スタイルがそれぞれ異なります。 は、ウェブサイトまたはアプリのフォーカス可能な要素に適用されます。 向上しますユーザーがページ内を移動すると、このスタイルは 要素がキーボード フォーカスを受け取ります。
ブラウザでフォーカスのスタイル設定を処理できるようにする場合は、
テーマがブラウザのデフォルトの設定をオーバーライドしないことをコードで確認できます。
カスタマイズします。オーバーライドは、多くの場合、"outline: 0" または "outline: none" と記述します。
スタイルシートに追加します。この小さなコードによって、ブラウザのデフォルト フォーカスが取り除かれます。
表示スタイルが異なるため、ユーザーが広告を
アクセスします。
a:focus {
outline: none; /* don't do this! */
}
a:focus {
outline: auto 5px Highlight; /* for non-webkit browsers */
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}
カスタム スタイル
もちろん、デフォルトのブラウザのスタイルに加えて、カスタム レイアウトを作成することもできます。 フォーカス インジケーター。カスタム フォーカスを作成する場合 自由に創造性を発揮できます。
フォーカス インジケーターの形状には、枠線、枠線、 下線、ボックス、背景の変更、その他の明らかな文体の変更 キーボードのフォーカスがアクティブであることを示すため、色だけでは不十分です。 表示されます。
フォーカス インジケーターのスタイルを変更して、 説明します。たとえば、ページの背景が白の場合、 ボタン フォーカス インジケーターを青色の背景に変えました。ページに青色のアイコンが 同じボタン フォーカス スタイルを白い背景に設定することもできます。
フォーカス要素のスタイルは、要素のタイプに基づいて変更できます。たとえば 本文へのリンクには点線の下線を使用し、 作成します。
<ph type="x-smartling-placeholder">1 つのフォーカス インジケーターのスタイルの数に決まりはありません。 ただし、無用な状態にならないよう、 混同です。
まとめ
ウェブサイトやアプリがアクセス可能と見なされるためには、 マウスでアクセスする場合も、キーボードでアクセスする必要があります。このモジュール キーボードのユーザー補助の視覚的な面、特に 順序インジケーターです。
理解度をチェックする
ARIA と HTML に関する知識をテストする
白い背景で最もアクセスしやすい :focus CSS スタイルの例はどれですか。
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;スキップリンクの目的は何ですか。