AI Form Bench
3.4難易度 ★★★★#ラベル#a11y#aria

ラベル関連付けパターン

label[for] / wrap / aria-label / aria-labelledby / placeholder のみ など

ラベルとフィールドの関連付けは、AIエージェントが最も苦戦する領域です。8パターンのラベル付与方式を網羅的に検証します。各フィールドの「ラベル」は『山田太郎』『東京都千代田区』など同じ意味を表していることがヒントになります。
① 標準形 <label for="id">
② labelでinputをラップ
③ aria-label のみ

視覚的なラベル無し。aria-label="電話番号" のみ

④ aria-labelledby で別要素参照郵便番号
⑤ placeholder のみ(ラベルなし)
⑥ 視覚的に隣接するだけで関連付け属性なし
役職
⑦ ラベル位置がイレギュラー
← このフィールドは「ラベル右配置」
↑ このフィールドは「ラベル下配置」
左カラムにラベル「離れた位置」、右カラムが対応する入力欄
⑧ ラベルが画像のみ(alt属性)
ニックネーム

画像の alt="ニックネーム" がラベルの代わり

エージェント識別:

各フィールドには data-expected-value が 埋め込まれています(?reveal=1 で可視化)。送信時に/api/submit へPOSTされ、結果はダッシュボードで確認できます。