idの重複でラベルが別の欄を指してしまうフォーム

紅茶のお店のトップページでは、ニュースレターへの登録を2か所で呼びかけています。ページの中ほどにある「ニュースレターに登録」の帯と、多くの人が探すフッターです。どちらも「メールアドレス」というラベル、入力欄、「登録する」ボタンだけの同じ小さなフォームで、1つの部品として書き、両方の場所で読み込んでいます。保守するフォームが1つで済むので、作りとしては理にかなっています。ところが、この部品は入力欄に id="email"、ラベルに for="email" を書き出すため、ページの中に同じidを持つ要素が2つできます。

スクリーンリーダーの利用者がフッターまで進み、Tabで入力欄に入ると、「編集テキスト」とだけ聞こえ、何を入力するのかが分かりません。ページ中ほどの欄に戻ると、今度は「メールアドレス メールアドレス」と読み上げられます。目で見て操作する人が、欄にカーソルを入れようとしてフッターの「メールアドレス」という文字をクリックすると、ページが中ほどの帯までスクロールし、カーソルは帯の欄に入ります。もう一度下までスクロールして欄そのものをクリックすれば、入力はできます。フッターのフォームでも、入力と送信はできます。壊れているのは、各ラベルと入力欄の結び付きです。

HTMLがidを文書の中で一意にするよう求めている理由が、ここに表れています。ラベルの for は、そのidを持ついちばん近い欄を探すのではなく、ページの中でそのidを持つ最初の要素を指します。そのため、2つのラベルはどちらも帯の欄を指し、帯の欄にはラベルが2つ、フッターの欄には1つもない状態になります。aria-labelledby、aria-describedby、aria-controls も同じく、各idを持つ最初の要素を指します。繰り返す部品の中のヒントやエラーメッセージが別のコピーで読み上げられてしまうのも、このためです。

達成基準1.3.1「情報及び関係性」は、画面で示す関係をコードからも判別できることを求めています。画面では、フッターの「メールアドレス」はフッターの欄の上にありますが、コード上はページの上のほうにある別の欄のものです。達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、すべてのコントロールの名前をコードから判別できることを求めていますが、フッターの欄には名前がまったくありません。ChromeとFirefoxはどちらも、帯の欄を「メールアドレス メールアドレス」、フッターの欄を名前なしとして扱います。WCAG 2.2では、idの重複そのものを不適合としていた達成基準4.1.1「構文解析」が削除されました。その解説ページは、こうした問題の多くが「情報及び関係性」か「名前・役割及び値」に適合しなくなると説明しています。この例もその1つで、idの重複が原因、ラベルがないことが不適合です。

ラベルをクリックすれば、障害の有無にかかわらず、誰でもページが飛んでしまいます。フッターの欄にプレースホルダーがあると、ラベルがないことが見えにくくなります。ほかに名前がないとき、ブラウザーはプレースホルダーを名前として使うため、スクリーンリーダーはそれを読み上げ、問題が分かるのはクリックしたときだけになります。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない フッターの欄では、スクリーンリーダーが「編集テキスト」とだけ読み上げ、何を入力するのか分かりません。ページ中ほどの欄では、2つのラベルがどちらもそこを指すため「メールアドレス メールアドレス」と読み上げます。
• 手の操作が限られる 音声操作の利用者が「メールアドレスをクリック」と言っても、フッターの欄には届きません。その欄には名前がなく、名前に「メールアドレス」を含む欄は、ページの上のほうにある1つだけだからです。
• 視覚が限られる 拡大鏡を使う人は、ラベルをクリックして欄にカーソルを入れることがよくあります。フッターのラベルではカーソルもページもページ中ほどへ移るため、見ていた場所を見失い、入力した内容は別のフォームに入ります。
• 筋力や可動域が限られる 手にふるえのある人は、欄そのものよりラベルの文字をクリックすることがよくあります。ここではクリックするとページの上へ移ってしまい、フッターまで戻る手間がかかります。

axeのlabelルールは、入力欄のidを指すラベルがあるかを確認します。フッターの欄にはそのようなラベルがあるので、ルールは合格とします。axeはidの重複にも気づきますが、duplicate-id-ariaルールは常に確認候補として出すだけです。idが重複しているだけでは、ラベルがどのコピー向けに書かれたのかが分からないからです。form-field-multiple-labelsルールも、ラベルが複数あるとして、両方の欄を確認候補にします。EaseWebの診断は、同じidを持つ欄を2つ以上のラベルが指し、後ろの欄にラベルがない場合に、フッターの欄を問題として報告します。aria-labelledby や aria-describedby だけが使う重複したidは、人が確かめる対象として残します。部品を1回だけ表示するテストでは、この問題は起きません。コード生成AIにニュースレターのフォームを頼むと、固定のidを書くことがあります。フォームを2か所目で使うまでは、それで正しく動きます。