入力ディバイス

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

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下のキーボードによるチェックを見足していることを確認する。

キーボード操作によるチェック方法の例

Tabキー、またはShift+Tabキーでフォーカスを移動して、以下を確認する：

  • すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

  • フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェックID：0211

クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0231

クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0361

マウスのホバー時にしか表示されない情報や実行できない機能が、設計資料に存在しない。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0581

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える
Web

role属性を適切に指定する。

iOS

  • 適切なaccessibilityTraitsを指定する。

Android

  • jetpack composeを使用している場合：role属性を適切に指定する

  • jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

モバイルの支援技術のサポート

OS標準のスクリーン・リーダーの利用時、以下を満たす。

  • 操作を受け付けるすべてのUIコンポーネントは、スクリーン・リーダーでフォーカスし、操作することができる

  • 画面に表示されているすべての情報は、スクリーン・リーダーでフォーカスし、内容を確認できる

  • スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

OS標準のスクリーン・リーダーとは、iOS、iPadOSではVoiceOver、AndroidではTalkBackを差す。

対象プラットフォーム

モバイル

意図

  • 視覚障害者がコンテンツを利用できるようにする。

  • 音声入力やスイッチを用いたインターフェースなど、スクリーン・リーダー以外の支援技術による利用を可能にする。

対応するWCAG 2.1の達成基準

チェック内容

チェックID：0153

スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

iOS VoiceOverによるチェック方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

チェックID：0581

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える
Web

role属性を適切に指定する。

iOS

  • 適切なaccessibilityTraitsを指定する。

Android

  • jetpack composeを使用している場合：role属性を適切に指定する

  • jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

適切なフォーカス順序

キーボード操作時のTab/Shift+Tabキー操作、スクリーン・リーダー利用時のタッチUIでの左右フリック操作などでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下のキーボードによるチェックを見足していることを確認する。

キーボード操作によるチェック方法の例

Tabキー、またはShift+Tabキーでフォーカスを移動して、以下を確認する：

  • すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

  • フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

iOS VoiceOverによるチェック方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

フォーカス箇所の可視化

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0151

デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0171

Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている：

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

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

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

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

    • 表示内容の大幅な変更

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

ページ中のあらゆるコンポーネントについて、Tabキー、矢印キー、Escキーなど簡単な操作でフォーカスを外すことができるようにする。

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0201

  • Tab/Shift+Tabキーによるフォーカスの移動時、特定の箇所からフォーカスが抜け出せないような状況が発生しない、または

  • 特定の箇所からフォーカスが抜け出せない状態では、矢印キーやEscキーの押下といった簡単な操作でその状態を抜け出すことができる

特に注意が必要なコンポーネントの例：

  • 動画や音声コンテンツのプレイヤー

  • ポップアップ・メニュー

  • モーダル・ダイアログ

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下のキーボード操作によるチェックを見足していることを確認する。

キーボード操作によるチェック方法の例

Tabキーを使って、ページの先頭からフォーカスを順に移動し、以下を確認する：

  • TabキーまたはShift+Tabキーを押下しても、特定の場所からフォーカスが抜け出せないような状況が発生しない、または

  • TabキーやShift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

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

クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベント（mousedown, touchdownなど）を使わず、アップ・イベント（mouseup, touchupなど）やクリック・イベント（clickなど）を使い、誤った操作を中断できるようにする。

対象プラットフォーム

Web、モバイル

意図

ポインティング・ディバイスやタッチUIでのタップの誤操作の影響を小さくする。

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

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

  • タッチUIにおいて意図しない場所に触れてしまった場合に、ターゲットから外れた場所に指を移動して離すすることで、操作をキャンセルできる。

  • タッチUIでのドラッグ&ドロップの操作で誤った場所に触れた場合、元の位置に指を戻したうえで放すと、ドラッグ&ドロップの操作をキャンセルできる。

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0071

マウス・ボタンのdownイベントをトリガーにしていない。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0081

リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。

注：ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

マウスで以下の操作をして、何も実行されないことを確認する：

  1. マウス・ポインターをオブジェクト上に移動

  2. マウス・ボタンを押下

  3. マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動

  4. マウス・ボタンを放す

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

そのプラットフォームで標準的ではない入力手段を使用しないとアクセスできない情報や利用できない機能がない。

プラットフォームの標準的な入力手段とは、Webではキーボード、モバイルではOS標準のタッチ操作を指す。また、文字入力に関しては、Windowsのタッチ操作、iOSやAndroidでキーボードを接続した操作もプラットフォームの標準的な入力手段に当たる。

対象プラットフォーム

Web、モバイル

意図

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

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

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0362

本体を振る操作など、標準的なタッチ操作以外の方法を用いないと利用できない機能や情報がない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[MAJOR]

チェックID：0371

エディット・ボックスや独自に実装した暗証番号入力のためのコンポーネントなど、ユーザーが文字列を入力する場面において、外付けキーボードが接続されたタイミングに関係なく、外付けキーボードによる入力が可能になっている。

対象

コード

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

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

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

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0141

ショートカット・キーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている：

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]