aria-invalidで無効な状態を示す
どのフィールドでエラーが発生したかを支援技術に伝えます。
「aria-invalidで無効な状態を示す」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
赤色だけでは不十分
赤い枠線は、目の見えるユーザーにはフィールドの入力に失敗したことを伝えます。しかしスクリーンリーダーユーザーには色が見えないため、失敗したことをコードで伝える必要があります。🚫
無効フラグ
aria-invalid属性は、コントロールのバリデーションに失敗したことを示します。true に設定すると、支援技術がエラー状態を通知します。
<input aria-invalid="true">デフォルトは false
aria-invalid がないフィールドは、有効として扱われます。チェックに実際に失敗した場合だけ、aria-invalid="true"を追加してください。
元に戻す
ユーザーが値を修正したら、aria-invalid を false に設定するか、削除してください。true のままにすると、もう存在しないエラーが通知されてしまいます。
<input aria-invalid="false">フラグを設定するタイミング
aria-invalid はページの読み込み時ではなく、実際に検証するときに適用してください。ユーザーが入力する前に空のフィールドを無効として示すのは、ユーザーに不親切です。
メッセージと組み合わせる
aria-invalid は問題があることを示しますが、何が問題なのかは示しません。ユーザーが理由も聞けるよう、必ず aria-describedby と組み合わせてください。
フォーカス時に通知される
フォーカスが無効なフィールドに移ると、スクリーンリーダーは名前とともに invalid と読み上げます。ユーザーはすぐに修正が必要だとわかります。
状態をスタイルで示す
CSS で属性を対象にして、赤い枠を表示できます。これにより、視覚表示とセマンティクスを完全に同期できます。
input[aria-invalid="true"] {
border-color: crimson;
}true と false だけではない
aria-invalid には grammar や spelling のような値も指定できます。ほとんどのフォームでは、単純な true がまさに必要な値です。
色だけで代用しない
エラーを示すために赤いクラスだけに頼ってはいけません。クラスは支援技術からは見えません。意味を伝えるのは aria-invalid です。
1つのフィールドずつ設定する
エラーになったコントロールを、それぞれ個別に示してください。ラッパーやフォームに aria-invalid を設定しても、どのinputに対応が必要なのかはユーザーに伝わりません。
クイックチェック
aria-invalid="true" は実際には何を伝えますか？
まとめ
エラーになったフィールドを示すには aria-invalid を使い、エラー時は true、修正後は false に設定します。また、説明付きのエラーメッセージと組み合わせてください。✅
よくある質問
「aria-invalidで無効な状態を示す」レッスンは無料ですか？
はい。「aria-invalidで無効な状態を示す」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「aria-invalidで無効な状態を示す」で何を学びますか？
どのフィールドでエラーが発生したかを支援技術に伝えます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「aria-invalidで無効な状態を示す」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- aria-describedbyでエラーとフィールドを関連付ける
- aria-invalidで無効な状態を示す
- 最初のエラーへフォーカスを移動する
- インライン、フォーカス離脱時、送信時：タイミングが重要