formのマークアップ

📝 一番良い状態はラベルとinput要素1:1の状態なので、1:1にできるか検討すると良い。

ちなみに、自分が今回遭遇したケースではラベルとinput要素1:1を諦めた。
具体的には、以下のようなケースだった。

前提

• 自分たちのシステムから情報を連携するシステムのDBの電話番号のカラムが3つに分かれている
• 自分たちのシステムの電話番号のカラムは1つで、ハイフンを含む電話番号を保存する
• 自分たちのシステムから連携先アプリに電話番号を登録する際、ハイフンで区切った電話番号をパラメータとして渡す

検討したこと

連携先のDBの電話番号カラムが3つに分かれているので、自分たちのアプリのUIに関して以下の案を出し、検討した。

1. 電話番号の入力欄をを3つに分ける
2. 電話番号の入力欄を1つにし、ユーザーにハイフンも入力してもらう（入力されていない場合はバリデーションエラーにする）
3. 電話番号の入力欄を1つにし、ユーザーがハイフンを入れていない場合はシステム側で適切な場所にハイフンを挿入して保存・表示する

チームで議論した結果、2はユーザーに面倒と感じさせそう、3はユーザーが入力したものと保存・表示されるものが異なるのには違和感があるし、1・2より工数がかかりそうということで1になった。（3にして入力欄からフォーカスが外れた時に自動入力されるようにすればそんなに違和感ない気もするけど、1・2に比べて工数は増えるのでお見送りとなった。）

📝 ラベルとinput要素1:1でないときのマークアップ例

NG：Accessible name が空になる

<fieldset>
  <legend>電話番号</legend>
  <input name="tel1" type="tel" />
  -
  <input name="tel2" type="tel" />
  -
  <input name="tel3" type="tel" />
</fieldset>

OK：Accessible name が付与される

<fieldset>
  <legend>電話番号</legend>
  <input name="tel1" type="tel" title="市外局番" />
  -
  <input name="tel2" type="tel" title="市内局番" />
  -
  <input name="tel3" type="tel" title="加入者番号" />
</fieldset>

参考：達成基準 3.3.2: ラベル又は説明を理解する（「事例」に電話番号の例が具体的に記載されている）