aria-describedbyは入力欄と補足説明をIDで関連付ける

入力欄に項目名とは別の説明が必要なら、labelを消さず、aria-describedbyで補足説明を関連付けます。labelは「何を入力するか」を示し、補足説明は「どのように入力するか」や「何に使うか」を伝えます。

aria-describedbyの値には、説明要素のidを指定します。入力欄と説明を近くに置くだけでは、HTML上の関係は示せません。見た目の配置と、programから判別できる関係をそろえてください。

labelを残して説明だけを追加する

メールアドレス欄へ返信先に関する説明を付けるなら、次のように書けます。

<label for="email">メールアドレス</label>
<input
    type="email"
    id="email"
    name="email"
    aria-describedby="email-help"
>
<p id="email-help">問い合わせへの返信を受け取れるアドレスを入力してください。</p>

labelのfor="email"は、id="email"の入力欄を項目名と結びます。入力欄のaria-describedby="email-help"は、id="email-help"の文章を補足説明として結びます。

二つの関係は代用できません。aria-describedbyがあるからといって、labelを省かないでください。「メールアドレス」は入力欄の名前であり、「返信を受け取れるアドレス」は入力条件の説明です。

aria-describedbyには同じ文書内のIDを指定する

WAI-ARIA 1.0のaria-describedby定義は、対象を説明する要素を特定するpropertyとしてaria-describedbyを定めています。値はID reference listです。

WCAG 2.0 TechniquesのARIA1は、説明を一つ以上の要素と結び付ける方法を示しています。参照先は同じDOM document内に置き、外部pageのURLを指定しません。

実装時は、次の三点を確認します。

1. aria-describedbyに書いたIDが文書内に存在する
2. 同じIDを複数要素へ重複して付けない
3. 参照先の文章が、その入力欄の補足説明になっている

IDの綴りが一文字違えば、関係は成立しません。CSSで説明文を入力欄の近くに表示できていても、ID参照が正しいとは限らないため、HTMLを確認してください。

説明が複数あるときはIDを空白で区切る

一つの入力欄へ入力形式と利用目的の二つを関連付けるなら、IDを空白で区切ります。

<label for="member-id">会員番号</label>
<input
    type="text"
    id="member-id"
    name="member-id"
    aria-describedby="member-id-format member-id-purpose"
>
<p id="member-id-format">半角数字8桁で入力してください。</p>
<p id="member-id-purpose">契約情報の照合に使用します。</p>

これは説明用の仮例です。二つのIDをcommaで区切ったり、同じIDを二つの説明へ付けたりしません。一つのID reference listとして、空白区切りで並べます。

説明を増やす前に、入力時に本当に必要かを見直してください。規約全文や長い営業文まで関連付けると、入力欄の操作に必要な条件が埋もれます。入力形式、用途、注意事項のうち、その場で必要な内容へ絞ります。

aria-describedbyは入力検査を実行しない

aria-describedbyは、入力欄と説明の関係を示します。8桁かどうかを検査したり、未入力を拒否したり、serverへ安全な値だけを送ったりする機能ではありません。

入力条件を表示すること、browser上で入力を補助すること、server側で受信値を検査することは、別の処理です。説明文へ「8桁」と書いただけで、8桁以外が送信されないとは考えないでください。

errorを表示する場合も、error文を画面へ出す処理と、その文を入力欄へ関連付ける処理を分けます。さらに、focusをどこへ移すか、error発生をどう知らせるかは、form全体の設計として確認が必要です。

見た目と支援技術の両方で確認する

補足説明は、入力欄の近くで読めるようにします。そのうえで、keyboardだけの操作と、利用対象にするuser agentおよび支援技術で関係を確認します。支援技術ごとの読み上げ方や通知の時機を、markupだけから一律に決めないでください。

制作を外部へ依頼する場合は、attributeを追加する作業と、補足説明の内容を決める責任を分けます。実装者が仮の説明を残したまま公開せず、運営側が入力条件、利用目的、問い合わせ対応を確認してください。

最初の一手は、補足説明が必要な入力欄を一つ選び、項目名と説明を別の文にすることです。labelで項目名を結び、aria-describedbyで説明のIDを結んだ後、IDの存在と重複を確認します。