利用者がエラー箇所に移動できるメカニズムを作成する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

利用者のデータ入力を受け付け、そのフォーマット、値及び/又は入力の種類に制限があるコンテンツ

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、利用者によって提供された情報が受け付けられない場合に、入力エラーの修正を支援することである。これには、必須の情報が欠落しているフィールドと、正しくない情報のあるフィールドが含まれる。利用者がチェック対象のデータ入力を入力し、入力エラーが検出された場合、利用者がそのエラーを探す必要がないように、エラーへのリンクを提供する。一つのアプローチとして、サーバーサイドでのバリデーションを用いて、フォームを再表示し (すでに入力されたデータも含む)、ページの上部にテキストでの説明文を表示して、問題の性質を説明し、問題のあったフィールドへのリンクを提供する。

事例

事例 1: サーバーサイドのエラーチェック

利用者がフォームフィールドに無効なデータを入力して、そのフォームを送信する。サーバーは、利用者の入力したデータはそのまま表示された状態でフォームを返し、ページの上部に受け入れられなかったことをテキストで明確に示している。このテキストは、エラーの性質を説明し、問題があったフィールドへのリンクを提供しているため、利用者はそのフィールドへ容易にナビゲートし、問題を修正することができる。

事例 2: ポップアップを用いたクライアントサイドのエラーチェック

利用者がフォームフィールドに無効なデータを入力して、そのフォームを送信しようとする。クライアントサイドのスクリプトがエラーを検出し、送信をキャンセルした上で、エラーを説明するテキストメッセージとエラーのあるフィールドへのリンクを提供するように文書を変更する。また、このスクリプトは、問題のあるフィールドのラベルを変更して、そのフィールドを強調する。

事例 3: ポップアップを用いないクライアントサイドのエラーチェック

利用者がフォームを送信しようとした時、新たなページに遷移させる代わりに、スクリプトが自動的に「エラーが発生しました」というテキストリンクにフォーカスする。リンクは、説明的なエラーメッセージの順序付きリストの最初の項目に移動する。各リストの項目は、エラーが発生したコントロールへのリンクとなる。また、エラー箇所から説明的なエラーメッセージの順序付きリストへのリンクも設置されている。このプロセスが必要な限り繰り返される。

検証

手順

  1. フォームに記入し、故意に必須項目を空白にして、他のフィールドに入力エラーを作った状態でフォームを送信する。
  2. 必要なデータが欠落しているフィールドを特定するテキストメッセージが提供されていることを確認する。
  3. 入力エラーのあるフィールドを特定するテキストメッセージが提供されていることを確認する。
  4. 欠落しているデータのメッセージから、必要なデータが欠落している各フィールドへのリンクがあることを確認する。
  5. エラーメッセージからエラーリストへのリンクがあることを確認する。
注記

達成基準 3.3.2 では、入力エラーが検知され、修正の示唆が既知であり、セキュリティ又はコンテンツの目的が脅かされることなく提供できる場合、利用者に修正の示唆を提供するよう求めている。

期待される結果

  • 2. の結果が真である場合、4. の結果が真である。
  • 3. の結果が真である場合、5. の結果が真である。