このページの本文へ移動

Error Suggestion3.3.3 エラー修正の提案(レベルAA)

入力エラーが自動的に検出され、修正方法を提案できる場合、その提案が利用者に提示される。

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

概要

フォーム入力やユーザーインタラクションにおいてエラーを減少させるために、ユーザーが入力ミスを防ぎ、修正するのを支援することを求めています。この基準は、すべてのユーザーがウェブコンテンツを効果的に利用できるようにするために重要です。

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

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

必須項目のテキスト説明

入力が完了していない必須項目を特定するために、フィールドの横や上に「必須」と明示的に表示する。例えば、フォームフィールドに「*」マークを付けて「必須項目」とテキストで説明する。

ARIAによる必須項目の特定

aria-requiredプロパティを使用して、必須項目を特定する。これにより、スクリーンリーダーなどの支援技術が項目が必須であることをユーザーに通知できる。

ARIAアラートダイアログ

フォームのエラーを特定するために、aria-alertdialogを使用してエラーメッセージを表示する。これにより、支援技術がエラーの発生をユーザーに即座に知らせる。

フォーマットエラーのテキスト説明

ユーザーが入力した値が要求されたフォーマットや範囲外の場合、具体的なエラーメッセージを表示する。例えば、「日付はYYYY-MM-DD形式で入力してください」のように説明する。

テキスト修正候補の提示

ユーザーの入力エラーに対して、修正候補を提示する。例えば、誤った綴りを修正するための候補リストを表示する。

クライアントサイドのバリデーションとアラート

クライアントサイドでバリデーションを行い、入力エラーが発生した際に即座にアラートを表示する。JavaScriptを使用してリアルタイムでフィードバックを提供する。

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

クライアントサイドでバリデーションを実行し、エラーメッセージをDOMに動的に追加する。これにより、ユーザーがどのフィールドにエラーがあるか即座に確認できる。

許可された値リストのテキスト説明

ユーザーが許可された値のリストにない情報を入力した場合、具体的なエラーメッセージを提供する。例えば、「入力した値は許可されていません。許可される値は以下の通りです:…」のように説明する。

まとめ

達成基準3.3.3は、ユーザーがフォームや他のインタラクティブな要素でエラーを防ぎ、修正するのを支援するために重要です。上記の実践的な方法を採用することで、ユーザーエクスペリエンスを向上させ、全てのユーザーがウェブコンテンツをより効果的に利用できるようになります。

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お問い合わせ

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

お問い合わせ