フォーム

これらのガイドラインは、一般的な入力フォームに加え、input要素などフォーム・コントロールを利用している、一見フォームとは思えないようなコンテンツも対象としています。

[MUST]表示されているテキストをラベルとして用いる

フォーム・コントロールには、表示されているテキストをラベルとして明示的に関連付ける。

意図

視覚障害者が、フォーム・コントロールの目的を容易に判断することができるようにする。

対応するWCAG 2.1の達成基準

SC 1.1.1:
SC 1.3.1:
SC 2.4.6:
SC 2.5.3:
SC 3.3.2:

参考情報

チェック内容

チェックID:0931

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

Webの場合
  • 画面上に表示されているテキストまたは代替テキストが付加された画像をラベルとして指定する。

  • aria-label属性値として指定すべきテキストを明示する。

チェックID:0941

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム・コントロールにはその役割が分かるラベルが付けられている。

実装方法の例:フォーム・コントロールのラベル付け
Web
  • label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

  • aria-label属性でラベルを指定する

iOS
  • accessibilityLabelを用いる。

Android
  • labelForを用いる。

実装方法の例:適切な状態の確認
Web
  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態

チェックID:0951

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

注:デスクトップWebの場合、ラベルをクリックするとそのラベルが関連付けられているフォーム・コントロールにフォーカスが移動する。

axe DevToolsによるチェック実施方法の例

フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。

[MUST]表示されているテキストをラベルにできない場合

フォーム・コントロールに対して表示されているテキストを用いたラベル付けができない場合は、非表示のテキストを用いてラベルを付ける。

意図

視覚障害者が、フォーム・コントロールの目的を容易に判断することができるようにする。

対応するWCAG 2.1の達成基準

SC 1.1.1:
SC 1.3.1:
SC 2.4.6:
SC 3.3.2:

参考情報

チェック内容

チェックID:0931

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

Webの場合
  • 画面上に表示されているテキストまたは代替テキストが付加された画像をラベルとして指定する。

  • aria-label属性値として指定すべきテキストを明示する。

チェックID:0941

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム・コントロールにはその役割が分かるラベルが付けられている。

実装方法の例:フォーム・コントロールのラベル付け
Web
  • label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

  • aria-label属性でラベルを指定する

iOS
  • accessibilityLabelを用いる。

Android
  • labelForを用いる。

実装方法の例:適切な状態の確認
Web
  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態

チェックID:0951

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

注:デスクトップWebの場合、ラベルをクリックするとそのラベルが関連付けられているフォーム・コントロールにフォーカスが移動する。

axe DevToolsによるチェック実施方法の例

フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。

[MUST]複数の視覚的要素を用いた表現

必須項目やエラー表示に際して、色に加えて他の視覚的要素も用いる。

意図

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

対応するWCAG 2.1の達成基準

SC 1.3.3:
SC 1.4.1:

参考情報

チェック内容

チェックID:0031

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない配色になっている:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

チェックID:0051

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

[MUST]フォームの入力に制限時間を設ける場合

フォーム入力に制限時間を設定する場合は、次に挙げる事項のうち、少なくとも1つを満たす。

  • 解除:制限時間があるフォームを利用する前に、ユーザーがその制限時間を解除することができる。又は、

  • 調整:制限時間があるフォームを利用する前に、ユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

  • 延長:時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

  • リアルタイムの例外:リアルタイムのイベント(例えば、オークション)において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

  • 必要不可欠な例外:制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

  • 20時間の例外:制限時間が20時間よりも長い。

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくフォームを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 2.2.1:

参考情報

チェック内容

チェックID:0961

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

フォームの入力に制限時間を設ける場合:

  • 事前にユーザーがその制限時間を解除することができる。又は、

  • 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

  • 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

  • リアルタイムのイベント(例えば、オークション)において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

  • 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

  • 制限時間が20時間よりも長い。

[SHOULD]制限時間を設けない

入力や操作に制限時間を設けない。

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくフォームを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 2.2.3:

参考情報

チェック内容

チェックID:0991

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

フォーム入力に制限時間が設けられていない。

[SHOULD]制限時間超過後の操作の継続

制限時間を超過した場合も、データを失うことなくユーザーが操作を継続できるようにする。

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくフォームを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 2.2.5:

参考情報

チェック内容

チェックID:1021

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。

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

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

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

対応するWCAG 2.1の達成基準

SC 2.4.3:

参考情報

チェック内容

チェックID:0172

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

  • リンクとボタン

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

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

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

TabキーとShift+Tabキーでフォーカスを移動して確認する。

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

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

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

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

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

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

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

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

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

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

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

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

[MUST]フォーカス時の挙動

フォーカスを受け取ったときに、コンテンツの意味を変える、またはページ全体に及ぶような動的な変化を引き起こすフォーム・コントロールやコンポーネントを用いない。

意図

視覚障害、認知障害があるユーザーが予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

SC 3.2.1:

参考情報

チェック内容

チェックID:0152

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない:

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

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

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

チェックID:0171

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

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

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

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

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

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

[MUST]フォームの値の変更時の挙動

値が変更されたときに、コンテンツの意味の変更、ページ全体に及ぶような変化、他のフォーム・フィールドの値の変更などを引き起こすようなフォーム・フィールドを作らない、またはそのようなフォーム・フィールドの挙動について、事前にユーザーに知らせる。

意図

視覚障害、認知障害があるユーザーが予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

SC 3.2.2:

参考情報

チェック内容

チェックID:1051

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ/画面全体に及ぶような大幅な表示内容の変更、ページ/画面遷移、別のフィールドの値の変更が起こるような機能が設計資料に存在しない。

チェックID:1071

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

ページ/画面内のフォーム・コントロールを操作して、以下のような挙動がないことを確認する:

  • 表示内容が大幅に変わる

  • 自動的に別のページ/画面に遷移する

  • ユーザーが既に入力したフィールドの内容が自動的に変更される(特に操作したフィールドよりも前にあるフィールドが変更されるのは望ましくない)

[MUST]テキスト情報によるエラーの特定

入力エラーがある場合、エラー箇所とエラー内容をテキストで知らせる。

意図

視覚障害者、色弱者が、エラー箇所を特定できるようにする。

対応するWCAG 2.1の達成基準

SC 3.3.1:

参考情報

チェック内容

チェックID:1081

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム入力でエラーが発生したとき、エラー内容が分かる具体的な表示文言が設計資料で明示されている。

チェックID:1101

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。

[SHOULD]エラーの修正方法の提示

入力エラーがある場合に、修正方法を示す。

意図

フォーム入力における認知障害者、学習障害者の困難を軽減する。

対応するWCAG 2.1の達成基準

SC 3.3.3:

参考情報

チェック内容

チェックID:1111

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム入力に関するエラーについて、エラーの修正方法が分かるエラー・メッセージが設計資料で明示されている。

チェックID:1131

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

[SHOULD]誤操作の防止

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。

意図

誤操作による影響を少なくする。

対応するWCAG 2.1の達成基準

SC 3.3.4:

参考情報

チェック内容

チェックID:1141

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

[SHOULD]十分な大きさのクリック/タッチのターゲット

フォーム・コントロールの見た目をブラウザーのデフォルトのものから変更する場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。

  • デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上

  • モバイル向けは44 x 44 CSS px以上

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準

SC 2.5.5:

参考情報

チェック内容

チェックID:0332

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーム・コントロールの見た目をブラウザーのデフォルトのものから変更する場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

44x44px(OSのUIガイドラインで示されている条件)

Androidの場合
  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける(OSのUIガイドラインで示されている条件)

  • 見た目上、横長の縦は36px、正方形は40pxを確保する

チェックID:0352

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

ブラウザーのデフォルト表示から見た目が変更されているフォーム・コントロールの、クリックやタッチに反応するサイズが、充分な大きさになっている。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

44x44px(OSのUIガイドラインで示されている条件)

Androidの場合
  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける(OSのUIガイドラインで示されている条件)

  • 見た目上、横長の縦は36px、正方形は40pxを確保する