aria-describedbyでエラーとフィールドを関連付ける
入力欄と一緒にメッセージが読み上げられるようにします。
「aria-describedbyでエラーとフィールドを関連付ける」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
浮いたエラーメッセージ
フィールドの近くにあるエラーメッセージは、目の見える人には関連付けられているように見えます。しかしスクリーンリーダーにとっては、ユーザーが聞き取れない可能性のある、ただの孤立したテキストです。⚠️
解決策はリンク付け
メッセージを入力フィールドに正式に関連付ける必要があります。これを行う属性がaria-describedbyで、フィールド側に設定します。
id を指し示す
エラー要素にidを付け、その同じ id を入力要素の aria-describedby に設定します。これで2つが正式に関連付けられます。
<input id="email" aria-describedby="email-err">
<p id="email-err">Enter a valid email.</p>ユーザーに聞こえる内容
入力フィールドにフォーカスが移ると、スクリーンリーダーはラベル、種類、そして説明を読み上げます。エラーが孤立することはありません。
名前の後に説明
aria-describedby はラベルの代わりにはなりません。ラベルが名前を提供し、describedby がその後に読み上げられる追加情報を提供します。
複数の説明
複数の id をスペース区切りで指定できます。ブラウザーは指定された順に読み上げるため、ヒントとエラーをまとめて関連付けられます。
<input aria-describedby="hint err">必要な場合だけ設定する
エラーが表示されている間だけ、エラーの id を aria-describedby に追加してください。空のノードや非表示のノードを指すと、何も読み上げられなかったり、ユーザーが混乱したりする可能性があります。
実際のテキストを入れる
説明対象の要素には、実際に表示されるテキストを入れてください。aria-describedby はそのコンテンツを読み上げるため、空の span では役に立つ説明になりません。
非表示のターゲットは読み上げられない
ターゲットが display none の場合、ほとんどのスクリーンリーダーはそれを読み飛ばします。説明が実際に読み上げられるよう、エラーテキストはレンダリングして表示しておいてください。
aria-invalid と組み合わせる
同じフィールドに describedby とaria-invalidを設定してください。一方は失敗したことを、もう一方はその理由を伝えます。組み合わせることで、全体を説明できます。
エラー専用ではない
同じ属性で、パスワードのルールのような形式に関するヒントも伝えられます。エラーは一般的な用途の1つですが、それだけではありません。
<input aria-describedby="pw-rule">
<p id="pw-rule">At least 8 characters.</p>クイックチェック
スクリーンリーダーにフィールドのエラーを読み上げさせるには、どうすればよいですか？
まとめ
実際に表示される id を aria-describedby から指し示し、エラーとフィールドを関連付けます。するとスクリーンリーダーがフィールドとエラーを一緒に読み上げます。✅
よくある質問
「aria-describedbyでエラーとフィールドを関連付ける」レッスンは無料ですか？
はい。「aria-describedbyでエラーとフィールドを関連付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「aria-describedbyでエラーとフィールドを関連付ける」で何を学びますか？
入力欄と一緒にメッセージが読み上げられるようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「aria-describedbyでエラーとフィールドを関連付ける」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- aria-describedbyでエラーとフィールドを関連付ける
- aria-invalidで無効な状態を示す
- 最初のエラーへフォーカスを移動する
- インライン、フォーカス離脱時、送信時：タイミングが重要