入力ディバイス

これらのガイドラインは、様々な入力ディバイスの利用を可能にするためのもので、すべてのコンテンツが対象です。

キーボードのみでの操作を可能にする

[MUST]キーボード操作を可能にする

ガイドライン

[MUST]マウスまたはタッチUIを使わないと実行できないような機能を作らず、キーボードによる操作を可能にする。

チェック内容
プロダクト(チェックID: 0172
  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

デザイン(チェックID: 0211)、プロダクト(チェックID: 0231
  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

意図

マウスを使わない/使えない視覚障害者、肢体不自由者が、コンテンツを利用できるようにする。

[MUST]適切なフォーカス順序

ガイドライン

[MUST] Tab/Shift+Tabキーなどでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

チェック内容
プロダクト(チェックID: 0172
  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

意図

スクリーン・リーダーなどの支援技術のユーザーや、キーボードのみで操作しているユーザーが適切にコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[MUST]フォーカス箇所の可視化

ガイドライン

[MUST]キーボードで操作可能な要素について、フォーカス・インジケーターを消さない。

チェック内容
デザイン(チェックID: 0151
  • デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターを明示している。

プロダクト(チェックID: 0171
  • Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている:

    • フォーカス・インジケーターまたはそれを代替する表示がある

    • 自動的に次のような挙動が発生しない:

      • フォームの送信

      • レイアウトの変更

      • ページの遷移

      • モーダル・ダイアログの表示

      • 表示内容の大幅な変更など

意図

キーボードのみを使っている場合でも、フォーカスされている箇所が分かるようにし、操作を可能にする。

対応するWCAG 2.1の達成基準

[MUST]キーボード・トラップの回避

ガイドライン

[MUST]動画プレイヤーなど、特定のコンポーネントにフォーカスした状態から、Tabキー、矢印キー、Escキーで抜け出すことができるようにする。

チェック内容
プロダクト(チェックID: 0201
  • 動画プレイヤーのような、何らかの機能を提供するためにページ中に埋め込まれているプログラムなどにフォーカスがある状態のとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。

意図

キーボードのみを利用している場合に、ページ中の特定のコンポーネントがページの他の部分へのアクセスを阻害しないようにする。

対応するWCAG 2.1の達成基準

多様な入力ディバイスのサポート

参考:様々なユーザーの入力手段の特徴とそのサポート

[MUST]ダウン・イベントをトリガーにしない

ガイドライン

[MUST]クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。

チェック内容
コード(チェックID: 0071
  • マウス・ボタンのdownイベントをトリガーにしていない。

プロダクト(チェックID: 0081
  • マウス・クリックを受け付けるリンクやボタンなどは、マウス・ボタンを押下した状態でマウス・ポインターを外し、マウス・ボタンを放した場合、その機能が実行されない。(ドラッグ&ドロップは対象外)

意図

ポインティング・ディバイスの誤操作の影響を小さくする。

  • 意図しない場所でマウス・ボタンを押下してしまった場合に、ターゲットから外れた箇所でボタンをリリースすることで、操作をキャンセルできる。

  • ドラッグ&ドロップの操作で、誤った場所でマウス・ホタンを押下した場合、元の位置にマウス・ポインターを戻したうえでマウス・ボタンを放すとドラッグ&ドロップの操作をキャンセルできる。

対応するWCAG 2.1の達成基準

[MUST]特定の入力ディバイスを前提としない

ガイドライン

[MUST]キーボード以外の特定の入力ディバイスを使用しないと実行できない機能がない。

チェック内容
デザイン(チェックID: 0361
  • 特定の入力ディバイスで発生するイベントのみをトリガーにした機能がない。かつ

  • 使用できる入力ディバイスを、特定の時点で検出されたものに限定していない。

意図

ニーズに応じた異なる多様な入力手段の使用を妨げない。

  • スマートフォンでタッチUIだけでなくキーボードを利用することも阻害しないことで、上肢障害や視覚障害があるユーザーの負担を軽減できる。

  • 加速度センサーなど動きを伴う動作を前提とした操作(例:シェークで取り消し)だけで実行できる機能を作らないことで、肢体不自由のユーザーの利用を阻害しない。

[SHOULD]ショートカット・キーを提供する場合

ガイドライン

[SHOULD]ショートカットキーを提供する場合は、以下のいずれかを満たす。

  • ショートカットキーを無効にする設定を可能にする。

  • ショートカットキーの割り当ての変更を可能にする。

  • 操作対象にフォーカスがあるときのみショートカットキーが有効になるようにする。

チェック内容
プロダクト(チェックID: 0141
  • ショートカットキーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている:

    • ユーザーがショートカットキーを無効にできる

    • ユーザーがショートカットキーの割当を変更できる

意図

音声認識で操作している場合に、ショートカットキーに割り当てられている機能が誤って実行されないようにする。

対応するWCAG 2.1の達成基準