このページの本文へ移動

Error Identification3.3.1 エラーの特定(レベルA)

入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される。

出典:WAIC. “ 達成基準 3.3.1 を理解する新しいウィンドウを開きます ” WCAG 2.0 解説書(参照2024年6月1日)

概要

入力フォームの必須項目が未入力または無効なデータが入力された場合に、利用者に対してエラーメッセージを表示することを求めています。これにより、利用者はどの項目に問題があるかを認識し、修正することができます。このガイドラインは、アクセシビリティの向上により、障害を持つ利用者がフォームの記入を容易に行えるようにすることを目的としています。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

課題に対する実践的な方法

状況A:フォームが利用者からの情報が必須である入力フィールドを含む場合

必須項目の説明(G83)

フォームフィールドのラベルや周辺に「必須」や「必須フィールド」などの明確なテキスト説明を追加し、ユーザーがどのフィールドに入力が必要かを理解できるようにします。

G83:入力が完了していない必須項目を特定するために、テキストの説明を提供する

エラーフィールドの識別(ARIA21)

ユーザーが誤った入力をした場合、そのフィールドにaria-invalid=”true”を追加し、スクリーンリーダーがエラーフィールドを識別できるようにします。

ARIA21:エラーフィールドを示すためにaria-invalidを使用する

クライアントサイドバリデーションとアラート(SCR18)

JavaScriptを使用して、フォーム送信前にクライアントサイドで必須項目が入力されているかをチェックし、入力されていない場合はアラートメッセージを表示します。

状況B:利用者によって提供される情報が、特別なデータフォーマットか特定の値であることが求められる場合

エラー特定のためのアラートダイアログ(ARIA18)

フォームの入力エラーを示すために、aria-alertdialog 属性を使用してユーザーにエラーメッセージを表示します。スクリーンリーダーがこのエラーを即座に読み上げます。

ARIA18:エラーを特定するために aria-alertdialog を使用する

alertやライブリージョンの使用(ARIA19)

フォームの入力エラーを示すために、role=”alert”やライブリージョンを使用して、エラーメッセージを表示します。

エラーフィールドの識別(ARIA21)

ユーザーが誤った入力をした場合、そのフィールドにaria-invalid=”true”を追加し、スクリーンリーダーがエラーフィールドを識別できるようにします。

ARIA21:エラーフィールドを示すためにaria-invalidを使用する

許可されたリスト外の値の説明(G84)

ユーザーが入力した値が、許可されている値のリストに含まれていない場合に、その理由と正しい値のリストをテキストで表示します。

G84:利用者が許可された値のリストにない情報を与えた場合に、テキストの説明を提供する

フォーマットエラーの説明(G85)

ユーザーが正しいフォーマットや値を入力できなかった場合、そのエラーの理由と正しい入力方法を説明するテキストを提供します。

G85:利用者の入力が要求されたフォーマット又は値の範囲外の場合に、テキストの説明を提供する

クライアントサイドバリデーションとアラート(SCR18)

JavaScriptを使用して、フォーム送信前に入力内容をチェックし、フォーマットや値が正しくない場合はアラートメッセージを表示します。

クライアントサイドバリデーションとDOMへのエラーテキスト追加(SCR32)

JavaScriptを使用して、フォーム送信前に入力内容をチェックし、エラーがある場合はDOMにエラーメッセージを追加して表示します。

まとめ

達成基準 3.3.1は、利用者がフォーム入力エラーを認識し、修正するための重要な指針を提供します。実践的な方法として、必須項目やエラーフィールドの明確な識別、クライアントサイドでの即時フィードバックの提供、そしてエラーメッセージの詳細な説明が重要です。これにより、すべての利用者がフォームを正しく記入できるよう支援します。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ