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

概要

ARIA21は、ウェブページ上のフォームやインタラクティブな要素において、ユーザーがエラーを迅速かつ正確に認識できるようにするための技術です。この技術は、入力フィールドが検証に失敗した場合に、そのフィールドにエラーが存在することを示すためにaria-invalid属性を使用します。aria-invalid属性を適切に使用することで、スクリーンリーダーなどの支援技術がエラーの存在をユーザーに伝えやすくなり、アクセシビリティが向上します。

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

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 3.3.1 エラーの特定

実践的な方法

aria-invalid属性を使用することで、ユーザーエージェントや支援技術に対して、特定の入力フィールドにエラーがあることを示すことができます。

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" aria-invalid="true">
  <span class="error-message">有効なメールアドレスを入力してください。</span>
</form>

注意点

aria-invalid属性は、エラーが解消された場合に”false”に戻す必要があり、ユーザーにエラーを知らせるだけでなく、具体的な解決方法も提供することが望ましいです。

まとめ

aria-invalid属性を使用することで、エラーフィールドを視覚的およびプログラム的に示すことができ、ユーザーが問題を迅速に特定して修正するのに役立ちます。