何を入力するのか分からない、あいまいなフォームのラベル

ショップのギフトカードのページは、すっきりとデザインされています。カードのプレビューがあり、その横に4つの欄が1列に並びます。ラベルは一語ずつで、「名前」「メール」「日付」「メッセージ」です。デザイナーはカードの横でフォームが軽く見えるよう、ラベルを短くしました。デザイナーにとっては、どの言葉も十分に明らかです。ギフトのフォームなので、名前は受け取る人のものです。

友人にカードを贈ろうとする人は、「名前」を読んで自分の名前を入力します。これまでに入力してきたフォームは、ほとんどが本人の名前を求めていたからです。「メール」にも自分のアドレスを入れるので、カードは友人ではなく自分の受信箱に届きます。「日付」は、送信する日にも、友人の誕生日にも、自分の生年月日にも読め、正しいのは一つだけです。フォームのどこにも、どれなのかは書かれていません。取り違えに最初に気付くのは、確認メールを見たときか、カードを受け取れなかった友人に言われたときです。

同じデザインには、もう一つの実装があります。画面には一語のラベルを残したまま、足りない言葉を、視覚的に隠したspanでスクリーンリーダーにだけ加えるものです。スクリーンリーダーの利用者には「名前（受取人）」と聞こえるようになりますが、画面を読む人には「名前」のままです。

WCAG 2.4.6（見出し及びラベル）は、見出しとラベルが主題や目的を説明していることを求めています。長いラベルを求めているわけではありません。Understandingのページは、適切な手がかりになるなら、一語でも、一文字でも十分な場合があるとしています。しかし、二人の人物に関わるフォームの「名前」は、どちらの手がかりにもなりません。「日付」は三つの答えに当てはまります。ラベルは存在し、欄と結び付いているので、1.3.1と3.3.2は満たしています。満たしていないのは、言葉そのものです。

隠したテキストを加えても、それは変わりません。WCAGはラベルを、コンポーネントを識別するために利用者に提示されるテキストと定義しています。画面を見る人に提示されているラベルは、「名前」のままです。2.4.6のTrusted Testerのテストは各欄のラベルと説明を確認します。画面に表示されているラベルは、やはり何を入力するのかを伝えていません。

2.4.6は見出しも対象にしています。見出しについては大きさで選ばれ、構造と合わない見出しで扱っています。このガイドは、フォームのラベルについてです。

推測が最も難しくなるのは、フォームが二人の人物や、同じ種類の二つのものについて尋ねる場面です。ギフトカード、ほかの人のための予約、配送先と請求先の住所、緊急連絡先などです。スマートフォンでは、答えの手がかりになるカードのプレビューがフォームの上か下に押し出されるため、画像から推測できたはずの人にも見えません。

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

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

• 言語・認知・学習の能力が限られる 一語だけのラベルは、誰の名前か、どのメールアドレスか、何の日付かを推測させます。推測が苦手な人や、フォームを書かれたとおりに受け取る人は、自分の情報を入力します。ほとんどのフォームは、入力する本人の情報を求めるからです。
• 視覚を使わない Tabキーで移動すると、スクリーンリーダーは各欄のラベルを読み、欄の周りにある見出しやカードのプレビューを飛ばします。手がかりは「名前、編集テキスト」だけです。
• 視覚が限られる 画面拡大鏡では、欄とそのラベルしか見えません。誰の名前かを示す見出しやカードのプレビューは、視野の外にあります。

どの欄にもlabel要素が結び付いているので、axe、ANDI、そのほかのラベルのチェックはすべて合格にします。「名前」がこのフォームにふさわしい言葉かどうかは、フォームが何を尋ねているかによるため、判定できるルールはありません。EaseWebの診断は、番号、日付、コードのように、一語ではほとんど足りない言葉だけをラベルにした欄と、legendで区別されずに同じラベルを持つ同じフォーム内の二つの欄を、問題としてではなく、人が読むための手がかりとして報告します。あいまいなラベルの修正をAIのコーディングツールに頼むと、aria-label="受け取る人の名前" や隠したテキストを加えることがあり、これは下の二つ目の修正前の例です。スクリーンリーダーには目的が伝わりますが、画面には「名前」とあるままです。