入力ディバイス

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

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

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

ガイドライン

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

チェック内容
  • 挙動: 何らかの操作を受け付けるすべてのコンポーネント(リンク、ボタン、フォーム・コントロール、ウィジェットなど)にTab/Shift+Tabキーでフォーカスを移動させることができる。かつ

  • 挙動: フォーカスされたコンポーネントに対する操作がキーボードのみで可能。

意図

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

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

ガイドライン

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

チェック内容
  • 挙動: Tab/Shift+Tabキーを使ってリンク、フォーム・コントロール、その他のコンポーネント間でフォーカスを移動させたとき、レイアウト的にも文脈的にも自然な順序でフォーカスが移動する。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • ビジュアル、挙動: Tab/Shift+Tabキーでフォーカスを移動したとき、フォーカス可能なすべての要素でフォーカス・インジケーターまたはそれを代替する表示がある。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • 挙動: 埋め込まれたコンポーネントにフォーカスがある状態で、Tab/Shift+Tabキー、矢印キー、Escキーのいずれかの操作で、そのコンポーネントの外のリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。

意図

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

対応するWCAG 2.1の達成基準

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

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

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

ガイドライン

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

チェック内容
  • 挙動: マウス操作を受け付けるコンポーネント上にマウス・ポインターがある状態でマウス・ボタンを押下し、マウス・ポインターをそのコンポーネントから外したうえでボタンを放した場合、その機能が実行されない。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

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

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

意図

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

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

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

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

ガイドライン

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

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

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

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

チェック内容
  • 機能、挙動: プロダクト側でショートカットキーを提供している場合、ショートカットキーを無効にする設定がある。または

  • 機能、挙動: ショートカットキーの割り当て変更ができる。または

  • 機能、挙動: 操作対象のコンポーネントからフォーカスを外した状態でショートカットキーを押してもなにも起こらない。

意図

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

対応するWCAG 2.1の達成基準