aria-errormessage ID の欠落

Silktide は、ページ上のすべての aria-errormessage 属性をチェックし、その属性が参照する要素 ID が実際に存在することを確認します。この属性は、フォームフィールドと、入力された値の問題を説明するメッセージを関連付けます。

<!-- 問題: ページ上に id="email-error" を持つ要素が存在しない -->
<input type="email" aria-invalid="true" aria-errormessage="email-error">

重要な理由

フォームフィールドが無効としてマークされている場合、の aria-errormessage 属性は、に説明の場所を伝えます。参照先が壊れていると、の利用者には入力が間違っていることだけが伝えられ、理由はまったく読み上げられません。そのため、視覚のある利用者なら画面で確認できる形式や要件が分からず、推測するしかなくなり、フォームを完全に放棄してしまう可能性があります。

修正方法

フィールドの表示されるエラーメッセージを含む要素の id を、属性で参照するようにします。
エラーが該当する間は、フィールドに aria-invalid="true" を付けます。aria-errormessage は、無効なフィールドに対してのみ読み上げられます。
エラーが表示されるときは、参照先の要素に読みやすいテキストが含まれていることを確認します。エラーが表示されていないときは、その要素を空にするか非表示にします。

Silktide によるテスト方法

aria-errormessage 属性を持つページ上のすべての要素を見つけます。
参照されている ID を、ページ上に存在する要素の ID と照合します。
どの要素にも一致しない参照をそれぞれ報告します。

トラブルシューティング

検証に失敗したときにのみエラー要素が追加される

Silktide はページの読み込み時にページをテストします。参照が常に解決され、エラーが表示された瞬間に通知が機能するように、エラーコンテナはページ内に常に保持し、必要になるまで空または非表示にしておくことをおすすめします。

結果が検出されるはずなのに、このチェックで何も報告されない

ARIA テストはウェブサイトごとに無効にできます。ウェブサイトの詳細設定を確認してください。