HTML

An attribute that informs assistive technologies when a form input is invalid.

aria-invalid 属性

aria-invalid属性の概要

aria-invalid 属性は、フォームなどの入力が無効（エラー）であることを支援技術（スクリーンリーダーなど）に伝えるためのアクセシビリティ属性です。これは HTML の aria-* 属性群の一つで、WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）仕様に基づいて設計されています。

この属性は、入力欄がただ「空白である」といったエラーに限らず、独自のバリデーションに基づいてエラーと判定された場合にも使うことができます。

主な用途

• フォームの入力値にバリデーションエラーが発生したとき、そのフィールドに aria-invalid="true" を指定する。
• 視覚的には赤枠などで示されていても、視覚に頼れないユーザーにはそれが伝わらないため、スクリーンリーダー等の支援技術に「これは無効な入力だ」と明示的に伝える。

属性値のバリエーションと意味

aria-invalid="true"

その要素が無効である（エラーがある）ことを明示。

aria-invalid="false"

その要素が有効（エラーなし）であることを示す（デフォルト値）。

aria-invalid="grammar"

文法エラーを意味する（例：文中のスペルミスなど）。

aria-invalid="spelling"

スペルエラーを意味する。

aria-invalid="true" 以外の値は、主に文書エディタや入力支援ツール向け。

実用例（フォームバリデーション）

<input type="email" aria-invalid="true">

この例では、メールアドレスの形式が正しくない等の理由で、その入力欄が「無効」と判断され、スクリーンリーダーが「このフィールドにエラーがあります」と通知するようになります。

aria-invalidの重要性

• 視覚的エラー表示（例：赤枠・エラーメッセージ）だけに頼らず、誰もが平等にエラーを認識できるUIを提供するための鍵です。
• 特に視覚障害者や色覚異常のあるユーザーにとって、フォームエラーの認識と修正の手助けになります。
• バリデーションとアクセシビリティが密接に関係していることを示す良い例でもあります。

よくある誤解

• required や pattern といった HTML の検証機能だけでは、スクリーンリーダーはエラーを認識できない。
• aria-invalid は 開発者が「エラーがある」と判断した場合に、明示的に追加する必要がある。