フォーム

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

• 達成基準2.4.6(レベルAA)：

  • Headings and Labels

  • 見出し及びラベル

• 達成基準2.5.3(レベルA)：

  • Label in Name

  • 名前 (name) のラベル

• 達成基準3.3.2(レベルA)：

  • Labels or Instructions

  • ラベル又は説明

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック内容

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

Webの場合

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：フォーム・コントロールのラベル付け

Web

• label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

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

iOS

• accessibilityLabelを用いる。

Android

• labelForを用いる。

実装方法の例：適切な状態の確認

Web

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

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを満たしていることを確認する。

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

以下のいずれの問題も発生しないことを確認する。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

NVDAによるチェック方法の例

フォーカス・モードでTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

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

VoiceOver有効時にTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

• 達成基準2.4.6(レベルAA)：

  • Headings and Labels

  • 見出し及びラベル

• 達成基準3.3.2(レベルA)：

  • Labels or Instructions

  • ラベル又は説明

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック内容

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

Webの場合

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：フォーム・コントロールのラベル付け

Web

• label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

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

iOS

• accessibilityLabelを用いる。

Android

• labelForを用いる。

実装方法の例：適切な状態の確認

Web

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

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを満たしていることを確認する。

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

以下のいずれの問題も発生しないことを確認する。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

NVDAによるチェック方法の例

フォーカス・モードでTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

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

VoiceOver有効時にTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.3.3(レベルA)：

  • Sensory Characteristics

  • 感覚的な特徴

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web、モバイル

グレイスケール表示にして、以下を確認する：

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

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

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

フォーム入力の制限時間

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

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

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

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.2.1(レベルA)：

  • Timing Adjustable

  • タイミング調整可能

• 達成基準2.2.3(レベルAAA)：

  • No Timing

  • タイミング非依存

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：0961

フォーム入力に制限時間が設けられていない。または、以下のいずれかを満たしている：

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

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

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.2.5(レベルAAA)：

  • Re-authenticating

  • 再認証

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：1021

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

すべてのフォーム・コントロールについて、キーボードによる操作を可能にする。

対象プラットフォーム

Web

意図

マウスを使わない/使えない視覚障害者、肢体不自由者が、フォームの操作をできるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.1(レベルA)：

  • Keyboard

  • キーボード

• 達成基準2.1.3(レベルAAA)：

  • Keyboard (No Exception)

  • キーボード (例外なし)

• 達成基準2.5.1(レベルA)：

  • Pointer Gestures

  • ポインタのジェスチャ

参考情報

• Tab/Shift+Tabキーを用いたチェック

チェック内容

チェックID：0172

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

• リンクとボタン

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

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

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

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

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

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

チェックID：0581

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：0586

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

Web

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

iOS

• 適切なaccessibilityTraitsを指定する。

Android

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

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

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

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

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

以下のすべてを満たしていることを確認する:

• 同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab/Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。

• グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。

• 矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

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

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

以下のすべてを満たしていることを確認する:

• Tab/Shift+Tabキーでフォーカスを移動した際、到達できないチェックボックスがない。

• スペースキーを押下することで、フォーカスされているチェックボックスのオン/オフ譜を切り替えられる。

適切なフォーカス順序

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.4.3(レベルA)：

  • Focus Order

  • フォーカス順序

参考情報

• Tab/Shift+Tabキーを用いたチェック

チェック内容

チェックID：0172

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

• リンクとボタン

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

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

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

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

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

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

フォーカス時の挙動

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.2.1(レベルA)：

  • On Focus

  • フォーカス時

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

チェック内容

チェックID：0152

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

• フォームの送信

• レイアウトの変更

• ページの遷移

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0171

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

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

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

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

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

  • 表示内容の大幅な変更

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

フォームの値の変更時の挙動

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.2.2(レベルA)：

  • On Input

  • 入力時

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

チェック内容

チェックID：1051

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1071

ページ/画面内の、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールを操作して、以下のような挙動がないことを確認する：

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.3.1(レベルA)：

  • Error Identification

  • エラーの特定

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1081

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：1101

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

エラーの修正方法の提示

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.3.3(レベルAA)：

  • Error Suggestion

  • エラー修正の提案

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1111

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：1131

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

誤操作の防止

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.3.4(レベルAA)：

  • Error Prevention (Legal, Financial, Data)

  • エラー回避 (法的、金融、データ)

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1141

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0332

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

• デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイルWebでは44 x 44 CSS px以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0352

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

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

十分な大きさのクリック/タッチのターゲット（モバイル）

操作を受け付けるもののタッチのターゲット・サイズは充分に大きいものにする。

• 44 x 44 CSS px以上、または

• OSのインターフェイス・ガイドラインを満たすサイズ

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0334

チェックボックス、ラジオボタン、ボタンなどのフォーム・コントロールやその他の操作を受け付けるものは、クリックやタッチに反応する領域のサイズが充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44 x 44 px（OSのUIガイドラインで示されている条件）

Androidの場合

• タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

• 見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]