この記事では、ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.0 および 2.1 の操作可能原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 操作可能とは、ユーザーインターフェイス・コンポーネントとナビゲーションが操作可能でなければならないということです。
注: 操作可能の W3C の定義とそのガイドラインおよび達成基準を読むには、原則 2: 操作可能 — ユーザーインターフェース・コンポーネントとナビゲーションが操作可能でなければならない（英語）を参照してください。
このガイドラインは、キーボード制御に頼るユーザーがコアウェブサイト機能にアクセスできるように、他の手段（例えば、マウス）に加えてキーボードを介してそれらを利用可能にする必要性をカバーする。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 2.1.1 キーボード (A) | キーボードを使用して行えない場合（例えば、フリーハンド描画）を除き、全ての機能はキーボード制御を使用してアクセス可能であるべきです。 可能な場合は組み込みのコントロールを使用するべきで（例えば、フォームコントロール間のタブ移動）、必要な場合にのみカスタム機能を組み込むべきです。 | UI コントロールとキーボード・アクセシビリティを取り戻すを参照してください。 |
| 2.1.2 キーボードを閉じ込めない (A) |
キーボードを使用してある機能のセクションに入るときは、キーボードのみを使用してそのセクションから再び出ることができるべきです。 例えば、フォーカスのあるボタンの上で Enter / Return を押してオプションウィンドウを開いたら、キーボードを使ってそのウィンドウを再び閉じてメインコンテンツに戻ることができるべきです。 キーボードユーザーをアプリの特定のセクションに閉じ込めないようにするために、これは非常に重要です。 |
|
| 2.1.3 キーボード — 全機能 (AAA) | これは、基準 2.1.1 を超えるさらなるステップです。 AAA 準拠を達成するために、全ての機能はキーボードコントロールを使用してアクセス可能であるべきです — 例外なく。 | UI コントロールとキーボード・アクセシビリティを取り戻すを参照してください。 |
| 2.1.4 文字キーショートカット (A) 2.1 で追加（英語） | 単一文字キーショートカットが存在する場合は、少なくとも次の1つが当てはまります。 単一文字キーショートカットは、オフにする、再マップする、または関連するユーザーインターフェース・コンポーネントにフォーカスがあるときにのみアクティブにすることができます。 | 文字キーショートカットを理解する（英語） |
注: ガイドライン 2.1: キーボードアクセス可能: キーボードから全ての機能を利用可能にする（英語）に関する WCAG の説明も参照してください。
このガイドラインでは、機能に制限時間があるかもしれない状況について説明します。 例えば、セキュリティ上の理由から、購入を制限時間内に完了する必要がある場合があります。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 2.2.1 タイミングは調整可能 (A) |
制限時間付きの機能の場合（例えば、ホテルやフライトの予約を完了するには制限時間があることが多い）、ユーザーには、制限時間の調整、延長、または無効化を許可するコントロールを与えるべきです。 これに対する例外は、20時間を超える制限時間のある活動、リアルタイムイベント（例えば、ライブマルチプレイヤーゲーム）、および制限時間が必要で、無効にされた場合に無効になるその他の活動です。 |
|
| 2.2.2 一時停止、停止、非表示 (A) |
自動的に開始され、5秒以上続き、他のコンテンツと一緒に表示されるコンテンツを移動や点滅させるには、一時停止、停止、または非表示にするためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの移動や点滅には適用されません。 例としては、テキストのスクロールと動画があります。 自動的に開始され、他のコンテンツと一緒に表示される自動更新情報の場合は、一時停止、停止、または非表示にするため、あるいは更新頻度を制御するためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの自動更新には当てはまりません。 例としては、回転木馬や回転アナウンスがあります。 |
|
| 2.2.3 制限時間なし (AAA) | これは基準 2.2.1 に基づいており、AAA 適合に合格したいコンテンツには制限時間がないことを述べています。 | |
| 2.2.4 中断を抑止する (AAA) | アラートやインタースティシャル広告などによる中断には、緊急アラートでない限り、それらを抑制または延期するための機能を用意するべきです。 | |
| 2.2.5 再認証 (AAA) | ウェブアプリの使用中に認証セッションが期限切れになった場合、ユーザーはデータを失うことなく再認証して使用を続けることができます。 | |
| 2.2.6 タイムアウト (AAA) 2.1 で追加（英語） |
タイムアウトした場合（ユーザーの非活動状態が原因で）、プロセスの開始時にユーザーに警告するので、タイムアウトが存在していても驚くことはありません（または、20時間の非活動状態の後にのみタイムアウトするようにします）。 |
タイムアウトを理解する（英語） |
注: ガイドライン 2.2: 十分な時間: コンテンツを読んで使用するのに十分な時間をユーザーに提供する（英語）に関する WCAG の説明も参照してください。
これは、変更しないとてんかんなどの症状のあるユーザーに発作を起こす可能性がある、または前庭障碍などの症状のあるユーザーに身体的反応（めまいなど）を引き起こす可能性があるコンテンツを意味します。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 2.3.1 3回の閃光、またはしきい値を下回る (A) | コンテンツに1秒間に3回以上の閃光を放つアスペクトが含まれていない、または閃光を放つコンテンツが許容できる閃光および赤色閃光のしきい値（英語）を下回っている。 | |
| 2.3.2 3回の閃光 (AAA) | コンテンツには、1秒間に3回以上の閃光を放つアスペクトは含まれていません。 | |
| 2.3.3 インタラクションによるアニメーション (AAA) 2.1 で追加（英語） | ユーザーがインタラクションによるアニメーションを無効にできるようにする（アニメーションが必須でない限り）。 | インタラクションによるアニメーションを理解する（英語） |
注: ガイドライン 2.3: 発作と身体的反応: 発作や身体的反応を引き起こすことが知られている方法でコンテンツをデザインしないでください（英語）に関する WCAG の説明も参照してください。
このガイドラインの下での適合基準は、ユーザーが自分自身を指向し、サイトの現在のページや他のページで探しているコンテンツと機能を見つけることが期待できる方法に関連しています。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 2.4.1 ブロックのバイパス (A) |
繰り返される機能（会社のロゴやナビゲーションなど）を通り過ぎて、ユーザーがページにあるメインコンテンツや機能に直接スキップできるようにするメカニズムを提供するべきです。 これはしばしば、スキップリンク（"skip links"）を使用して達成されます — メインコンテンツにリンクする CSS によって隠されたリンクはページのソースのトップに置かれます。 見出しと意味論のコンテナの適切な構造（例えば、{{htmlelement("section")}}、{{htmlelement("aside")}} など）がナビゲートするために提供されている場合は、追加のスキップリンクは必要ありません。 |
スキップリンクのセクションを追加する必要があります。 |
| 2.4.2 ページタイトルを含める (A) | 各ウェブページには有益な {{htmlelement("title")}} を含めるべきです。 そのコンテンツは、ページのコンテンツや目的を説明しています。 | タイトルの追加を参照してください。 |
| 2.4.3 論理的なフォーカスの順序 (A) | フォーカス可能なページ機能（例えば、リンク、ボタン、フォーム入力）の「タブ順序」は論理的に意味があり、そのページはまだ非晴眼者でもキーボードのユーザーでも使用可能であることを意味します。 | コントロールへのタブ移動に関する一般的なアドバイスについては、UI コントロールを参照してください。 要素を独特なレイアウトに配置する必要がある場合は、ソースの順序が適切であることを確認してから、配置などの CSS 機能を使用してレイアウトを扱うことをお勧めします。 |
| 2.4.4 リンクの目的（コンテキストにそった）（A） | リンクの目的や行き先は、リンクテキストから、またはその周囲（例えば、周囲のテキスト）から決定することができます。 例外は、リンクの目的が全てのユーザーにとってあいまいな場合です（これに関する有用な説明については、一般的にユーザーにとってあいまい（英語）を参照してください）。 | わかりやすいテキストラベルを参照してください。 また、同じテキストの複数のコピーが異なる場所にリンクされている場合は最小限に抑えるべきです。 これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧がコンテキストから外れて表示されることがよくあります — 全てが「ここをクリック」、「ここをクリック」、「ここをクリック」とラベル付けされたいくつかのリンクは混乱を招くでしょう。 |
| 2.4.5 複数のナビゲーションメカニズム (AA) |
ウェブサイト上のページを見つけるために少なくとも二つの一般的なナビゲーションメカニズム、例えば、ナビゲーションメニュー、パンくずリスト、サイト検索、サイトマップ、関連リンクのリストなどを提供するべきです。 これに対する唯一の例外は、ページがプロセスの1ステップである場合で、論理的には前後のステップへのリンクのみを持つべきです。 |
これらのメカニズムのほとんどは、単純な HTML 機能を使用して作成できます。 例えば、検索フィールド、ナビゲーションメニューの作成、ボタンとしてのリンクのスタイリングを参照してください。 |
| 2.4.6 見出しとラベル (AA) | 見出し（例えば、{{htmlelement("h2")}}）および {{htmlelement("label")}} 要素は、それらが説明していると思われるコンテンツおよびフォーム要素の目的を明確に説明しています。 |
UI コントロール、わかりやすいテキストラベル、見出しと段落の基本、<label> 要素を参照してください。 構造上、それらを簡単に区別できない場合を除き、見出しやラベルの重複は避けるべきです（例えば、「詳細情報」が複数ある場合）。 |
| 2.4.7 フォーカス可能な要素に対する可視フォーカス (AA) | リンクやフォーム入力などのフォーカス可能な要素間をタブ移動するときは、どの要素に現在フォーカスがあるかを示す視覚的なインジケーターがあるはずです。 これは通常、デフォルトでは点線や青のアウトラインです（ブラウザ、プラットフォームなどによって異なります）が、CSS によって上書きすることができます。 | ネイティブなキーボード・アクセシビリティの使用を参照してください。 |
| 2.4.8 サイト内の場所 (AAA) | 複雑なサイトまたは一連のステップ内のページにいる場合は、パンくずリスト、サイトマップ、「Form page 2 of 10」といったテキストなど、サイト内の場所を示すインジケーターをユーザーに提示するべきです。 | |
| 2.4.9 リンクの目的（リンクのみ） (AAA) | この基準は 2.4.4 に基づいており、AAA に準拠するためには、コンテキストから外れていてもリンクの目的やリンク先はリンクテキストのみから決定可能であるべきであると述べています。 | わかりやすいテキストラベルを参照してください。 また、同じテキストの複数のコピーが異なる場所にリンクされている場合は最小限に抑えるべきです。 これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧がコンテキストから外れて表示されることがよくあります — 全てが「ここをクリック」、「ここをクリック」、「ここをクリック」とラベル付けされたいくつかのリンクは混乱を招くでしょう。 |
| 2.4.10 セクション見出し (AAA) |
便利な文書構造を作成するだけでなく、見出しも正確に記述し、コンテンツ領域を論理的なセクションに分割するべきです。 この基準は、一般的なウェブコンテンツの見出しとタイトルを指すことに注意してください（例えば、テキストコンテンツ内の見出し）。 ユーザーインターフェースの見出しとタイトルは、基準 4.1.2 で扱われる特別なケースです。 |
見出しと段落の基本を参照してください。 |
注: ガイドライン 2.4: ナビゲート可能：ユーザーがナビゲートし、コンテンツを見つけ、どこにいるのかを判断するのに役立つ方法を提供する（英語）に関する WCAG の説明も参照してください。
このガイドラインの適合基準は、ユーザーがキーボードやマウス以外のさまざまな入力方法（タッチスクリーン、音声、デバイスの動き、その他の入力デバイスを含む）を使用してデジタルテクノロジーと対話できることを保証します。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 2.5.1 ポインタジェスチャー (A) 2.1 で追加（英語） | ポインタで操作できる全ての機能は、シングルポイントのアクションで操作できます。 パスベースやマルチポイントのジェスチャーは、機能を操作するために必要ではありません。 例外があります。 | ポインタジェスチャーを理解する（英語） |
| 2.5.2 ポインタキャンセル (A) 2.1 で追加（英語） | シングルポインタを使用して操作できる機能については、次のうち少なくとも1つが当てはまります。 ダウンイベントなし、中止や元に戻す、アップリバーサル、必要不可欠。 | ポインタキャンセルを理解する（英語） |
| 2.5.3 名前のラベル (A) 2.1 で追加（英語） | 表示可能なテキストラベルを含む各ユーザーインターフェイス・コンポーネントについて、アクセス可能な名前がラベルの表示可能なテキストと一致する（または含まれる）ことを確認します。 | 名前のラベルを理解する（英語） |
| 2.5.4 動きによる作動 (A) 2.1 で追加（英語） | a）デバイスの動き（揺れ、傾きのような）、または b）デバイスのセンサー（カメラを含む）によって検出されたユーザーのジェスチャーによって引き起こされる可能性のある機能について、次の両方が当てはまることを確認します。 1) 動きによる作動を無効にすることができ、2) 機能をデバイスの動きやユーザーのジェスチャーを使用せずに動作させることができる。 例外があります。 | 動きによる作動を理解する（英語） |
| 2.5.5 ターゲットサイズ (AAA) 2.1 で追加（英語） | アクション可能アイテムのタッチターゲットのサイズは、幅と高さの両方で少なくとも 44 CSS ピクセルにする必要があります。 例外があります。 | ターゲットサイズを理解する（英語） |
| 2.5.6 同時入力メカニズム (AAA) 2.1 で追加（英語） | タッチスクリーン、キーボード、マウス、音声コマンド、その他の入力デバイスを含むデジタルコンテンツと対話するときに、さまざまな入力モードを使用したり切り替えたりできることを確認します。 本質的な例外があります。 | 同時入力メカニズムを理解する（英語） |
注: ガイドライン2.5: 入力様式: キーボードを超えた様々な入力を通して機能をユーザーが操作しやすくする（英語）に関する WCAG の説明も参照してください。