エラーの特定

Silktide は、ブラウザーに組み込まれたチェック機能ではなく、カスタム検証を使用しているように見える必須フォームフィールドを調べ、エラーメッセージを支援技術の利用者に届ける明確な方法がない場合に警告します。

重要な理由

フォームが無効な回答を拒否すると、視覚のあるユーザーには通常、フィールドの周囲に赤い枠や、フィールドの近くにメッセージが表示されます。の利用者には、ページがコード内でエラーを公開しない限り、そのどちらも表示されません。フォームは何が問題だったのか、どこに問題があるのかを説明しないまま送信を拒否するだけです。その結果、一部の訪問者をひそかに締め出すフォームになってしまいます。

ブラウザーは、組み込みの検証メッセージを自動的に読み上げます。問題が生じるのは、ページがそれを無効にするか独自の検証に置き換え、その置き換えた検証を向けに連携するのを忘れた場合です。

修正方法

カスタム検証を行う各フィールドに、を使用して、エラーメッセージにプログラムで到達できる経路を用意します。

<!-- 問題: アクセシブルなエラーチャネルのないカスタム検証 -->
<form novalidate>
  <input type="text" required>
  <span class="error">名前を入力してください</span>
</form>

<!-- 修正: フィールドがエラーメッセージを参照する -->
<form novalidate>
  <input type="text" required aria-describedby="name-error">
  <span id="name-error" class="error">名前を入力してください</span>
</form>

次のいずれかを満たしていれば、このチェックに合格します。

フィールドに aria-errormessage を設定し、エラーテキストを挿入する要素を参照する（エラーが表示されたときは aria-invalid="true" を設定します）。
フィールドに aria-describedby を設定し、メッセージ要素を参照する。
フォーム内にを設ける。つまり、role="alert"、role="status"、または aria-live を持つ要素に、検証処理でエラーテキストを書き込む。

または、カスタマイズを削除して、ブラウザーのネイティブ検証にエラーを報告させることもできます。これはデフォルトでアクセシブルです。

Silktide によるテスト方法

required または aria-required="true" が設定された、表示されている必須フィールド（入力欄、テキストエリア、選択メニュー）を見つけます。
ネイティブのブラウザー検証が回避または置き換えられている証拠があるフィールドだけを残します。具体的には、フォームに novalidate がある、送信コントロールに formnovalidate がある、フィールドに aria-invalid が設定されている、ネイティブの required 属性なしで aria-required が使用されている、またはフィールドかフォームにカスタム検証の手がかり（エラー関連の属性やエラーメッセージのコンテナなど）がある場合です。
そのような各フィールドについて、アクセス可能なエラーチャネル（有効な aria-errormessage 参照、有効な aria-describedby 参照、またはフォーム内のライブリージョン）を探します。
どのエラーチャネルもないフィールドについて警告します。ページのコードからは実行時の検証動作を完全に確認できないため、これは確定した失敗ではなく警告です。

トラブルシューティング

エラーは正しく読み上げられています

このチェックは、読み上げを可能にする構造を探しており、実際の読み上げ自体を確認しているわけではありません。フレームワークがエラー発生時にのみライブリージョンや ARIA 参照を挿入する場合、読み込まれたページにはチャネルが表示されないため、フィールドが指摘されます。空のメッセージ要素と参照をあらかじめ追加すると、この問題を解決できます。また、より堅牢な方法でもあります。

参照先のメッセージ要素がまだ存在しません

参照先は、ページ内に存在する要素を指している必要があります。後から作成される id を指す aria-describedby は、チャネルがないものとして扱われます。