ヘルプページかホバーでしか読めない入力欄のヘルプ

衣料品店の返品ページ「返品の手続き」は、注文番号とご注文時のメールアドレスの二つを尋ね、その下に「注文を探す」ボタンがあります。フォームはすっきりとデザインされ、各欄の上にラベルがあるだけです。ショップにとって、最初のラベルは説明の要らない言葉です。どの注文にも番号があり、ショップが送るものにはすべてその番号が載っているからです。

3週間前に買ったマフラーを返品したい人がいます。メールアドレスは分かります。しかし注文番号は、これまで一度も使ったことがありません。荷物に入っていた紙に書いてあったかもしれませんが、梱包材と一緒に捨ててしまいました。どこかのメールに載っているかもしれません。フォームには、番号がどこにあるのかも、どんな形をしているのかも書かれていません。ページにあるヘルプは、サイトのヘッダーの「ヘルプ」リンクだけです。開くとヘルプセンターのトップページが表示され、検索欄とよくある質問の一覧が並びます。「注文番号はどこにありますか？」は、その3番目にあります。番号はご注文確認メールの件名と納品書に載っていて、HL-482130のような形だと書かれています。それを読んだ時点で、利用者はフォームを離れています。記事の「返品の手続き」リンクから戻ると、フォームは空になっています。

同じフォームには、もう一つの実装があります。ラベルの横に小さな「？」を置き、マウスポインターを重ねている間だけ、同じ答えを暗い色の枠に表示するものです。マウスを使う人には、ヘルプはポインターを重ねるだけで読めます。Tabキーを押すと、フォーカスは注文番号の欄からメールアドレスの欄へ移り、「？」には止まりません。スクリーンリーダーは欄を「注文番号、編集テキスト」と読み、その後には何も続きません。

達成基準3.3.5（ヘルプ）はレベルAAAで、状況に応じたヘルプが利用できることを求めています。W3CのUnderstandingのページによれば、このヘルプがあると、利用者は「今していることを見失わずに」操作の方法を確かめられます。また、ヘルプの存在が利用者にすぐ分かり、「必要なときにいつでも」得られるようにすべきだとしています。ヘルプが要るのは、ラベルだけでは足りないときだけです。「注文番号」というラベルは、何を入力するかは伝えますが、どこで確認できるかは伝えません。多くの人がまさにそこで迷うので、ショップはヘルプセンターにその答えを書いています。

ヘッダーの「ヘルプ」リンクは、このフォームのヘルプではありません。W3Cの達成方法G71（ヘルプへのリンク）は、そのページのフォームの入力方法を説明するヘルプへのリンクをページに置くか、各欄のそばに、その欄についてのヘルプへのリンクを置くことを求めています。ヘルプセンターのトップページはどちらでもありません。そこで答えを得るには、検索するか一覧を見渡し、別のページを開き、フォームへ戻る道を探す必要があります。W3Cがテキスト入力のあるフォームについて挙げる達成方法の一つ、フォームの冒頭の説明（G184）もありません。

「？」は必要な答えを欄のそばに置いていますが、読めるのはマウスポインターを重ねている間だけです。「？」は span なのでキーボードのフォーカスを受け取りません。CSSは :hover のときだけ文を表示し、文が visibility: hidden で隠れている間は、スクリーンリーダーも読みません。キーボードやスクリーンリーダーを使う人には、この欄のヘルプはないも同然で、必要なときに得られません。W3Cは、title 属性によるヘルプを3.3.5の参考の達成方法としてだけ挙げ、十分な達成方法には含めていません。この種のツールチップが同じ人たちに届かない理由は、ラベルやヒントがツールチップにしかない入力欄で説明しています。

ヘルプが最も重要になるのは、利用者がほかの場所に控えているものをフォームが尋ねる場面です。注文番号、アカウント番号、証券番号、会員番号、手紙に書かれた参照番号、メールで届いたコードなどです。こうしたフォームは、返品、請求、受け取れなかった荷物のように、何かがうまくいかなかったときに入力されることが多く、利用者の余裕はあまりありません。スマートフォンでフォームを離れてヘルプセンターへ行くと、小さな画面に新しいページが開きます。戻るには、ブラウザーの「戻る」ボタンを使うか、フォームを最初から始めるリンクを押すことになります。

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

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

• 言語・認知・学習の能力が限られる このヘルプが最も必要なのは、記憶、注意、読むことに困難のある人です。ヘルプセンターで探すよう求められると、返品の手続きのどこまで進んだかを見失い、フォームに戻ってこない人もいます。
• 手の操作が限られる 「？」はフォーカスを受け取らないため、キーボードやスイッチの利用者はそこまでたどり着けません。ヘルプセンターのページを一つ進むごとに、マウスの利用者より多くの操作が必要です。
• 視覚を使わない Tabキーで移動すると、スクリーンリーダーは「？」を飛ばします。その中の文はポインターが重なるまで隠れているので、欄は「注文番号、編集テキスト」とだけ読まれます。

どの欄にもラベルが結び付き、「ヘルプ」リンクにも名前があるので、axe、ANDI、そのほかのラベルのチェックはすべてこのフォームを合格にします。欄にヘルプが要るかどうかは、利用者が何を知っていて、何を手元に持っているかによるため、判定できるルールはありません。EaseWebの診断は、見つけたツールチップにポインターを重ねて動きを確認します（1.4.13）。また、フォームの欄のそばにある、キーボードで届かない小さなアイコンのうち、隠れた文を含むものにもポインターを重ねます。重ねると文が表示され、欄にフォーカスしても表示されないときは、人が確認するための手がかりとして報告します。その欄にヘルプが必要か、ページがほかの方法でヘルプを示しているかは、人が判断する必要があるからです。ホバーしたときにスクリプトがページに加えるツールチップは、調べる対象に入っていません。ヘルプセンターにしかない形の問題は、何も見つけられません。二つ先のページにある記事がフォームの問いに答えていることは、スキャンでは分からないからです。欄にヘルプを加えるようAIのコーディングツールに頼むと、アイコンにツールチップを付けることがあります。アイコンが span なら、二つ目の修正前の例そのものです。