キーボード操作可能のガイドライン

2.1.1キーボードの達成基準(レベルA)

キーボードだけで操作できるようにする

この達成基準は、コンテンツがキーボードだけで操作可能にすることを目的としています。

実践すべきこと

WCAG 2.0
タブ操作のサポート
  • 利用者がタブキーを使用してページ上のすべての機能にアクセスできるようにする。
キーボード操作の完全サポート
  • ページのすべての機能がキーボードのみで操作可能であることを確保する。

運用者への注意

定期的な確認
  • 新規ページや更新されたコンテンツにおいて、キーボード操作への対応状況を定期的にチェックする。

開発者への注意

適切なタブインデックスの設定
  • フォーカス可能な要素に対して、タブインデックスを適切に設定し、キーボード操作での順序が正しいことを確保する。
適切なフォーカスの設定
  • PC、SPで開閉ナビゲーションなどナビゲーション表示を切り替えている場合、非表示時にフォーカスが当たらないようにする。
  • SPの開閉ナビゲーションを開いた時、自動的に「検索窓」や「最初のリンク」にフォーカスが移動しないようにする。

2.1.2キーボードトラップなしの達成基準(レベルA)『非干渉』

キーボード操作で特定のエリアに閉じ込めてはいけない

この達成基準は、キーボードを使用してページを操作する際に、特定の領域から抜け出せなくなる状況を防ぐことを目的としています。

実践すべきこと

WCAG 2.0
フォーカストラップの回避
  • キーボードフォーカスがページの特定部分に閉じ込められないようにする。

運用者への注意

定期的な確認
  • 新規ページや更新されたコンテンツにおいて、キーボードを使用した操作でフォーカストラップが発生していないかを定期的にチェックする。

開発者への注意

フォーカス制御
  • モーダルウィンドウやダイアログなどのフォーカスを制御する場合、利用者がキーボード操作で簡単に抜け出せるように適切なフォーカスの移動先を設定する。
JavaScriptの使用
  • JavaScriptを使用してフォーカスを操作する場合は、キーボード操作でページの他の部分に移動できるように注意する。

2.1.3 キーボード (例外なし)の達成基準(レベルAAA)

WCAG 2.1 解説書

2.1.4 文字キーのショートカットの達成基準(レベルA)

キーボードショートカットを実装する場合はカスタマイズできるようにする

この達成基準は、キーボードショートカットが実装されている場合において、音声入力ユーザーや誤ってキーを押しやすいユーザーの誤操作を減らすことを目的としています。 文字、句読点、数字、または記号のみを使用するショートカットは、「解除可能、再割り当て可能、フォーカス時のみ有効」のいずれかを提供する必要があります。

実践すべきこと

WCAG 2.1
ショートカットを実装する場合はカスタマイズできるオプションを提供する
  • 文字、句読点、数字、または記号のみを使用するショートカットは、「解除可能、再割り当て可能、フォーカス時のみ有効」のいずれかを提供する。

運用者への注意

定期的な確認
  • 新規ページや更新されたコンテンツにおいて、新しいショートカットがないか定期的にチェックする。
意図しない動作や混乱を防ぐ
  • ショートカットの変更が利用者の意図しない動作や混乱を招かないよう、分かりやすいインターフェイスとドキュメントを提供する。

開発者への注意

ショートカットの柔軟性
  • ショートカットの解除や再割り当てが可能な実装をし、利用者がカスタマイズできるようにする。

目次へ戻る