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

Source: https://easeweb.dev/learn/field-help
Topics: フォーム > フォームで、説明が必要な入力欄のそばにヘルプがある (WCAG 3.3.5)
The fix: ヘルプは、それが必要な欄のそばに置きます。ラベルの下に表示して aria-describedby で欄に結び付けるか、欄の直後の details 要素に入れます。欄のそばに、その欄についてのヘルプ記事へのリンクを置く方法でも基準は満たしますが、読むためにフォームを離れることになります。
Test with: keyboard, screen reader, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/help.html https://www.w3.org/WAI/WCAG22/Techniques/general/G71 https://www.w3.org/WAI/WCAG22/Techniques/general/G89 https://www.w3.org/WAI/WCAG22/Techniques/general/G184 https://design-system.service.gov.uk/components/details/ https://inclusive-components.design/tooltips-toggletips/

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

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

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の参考の達成方法としてだけ挙げ、十分な達成方法には含めていません。この種のツールチップが同じ人たちに届かない理由は、[ラベルやヒントがツールチップにしかない入力欄](/ja/learn/title-tooltips)で説明しています。

## 利用者への影響

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

## 自動チェックとAIの限界

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

## 修正前：ヘルプセンターにしかないヘルプ

```html
<header>
  <a href="/">Hollis</a>
  <a href="/help">ヘルプ</a>
</header>
<main>
  <h1>返品の手続き</h1>
  <form method="post" action="/returns">
    <label for="order">注文番号</label>
    <input id="order" name="order" type="text">

    <label for="email">ご注文時のメールアドレス</label>
    <input id="email" name="email" type="email" autocomplete="email">

    <button type="submit">注文を探す</button>
  </form>
</main>
```

```css
form {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
}
```

- 「注文番号」のそばに、どこで確認できるかも、どんな形かも書かれていません。
- ヘルプはヘッダーの「ヘルプ」リンクだけで、開くのはヘルプセンターのトップページです。
- そこで答えを読むには、フォームを離れなければなりません。

## 修正前：ホバーでしか開かない「？」の中のヘルプ

```html
<header>
  <a href="/">Hollis</a>
  <a href="/help">ヘルプ</a>
</header>
<main>
  <h1>返品の手続き</h1>
  <form method="post" action="/returns">
    <div class="label-row">
      <label for="order">注文番号</label>
      <span class="tip">
        ？
        <span class="tip-text">注文番号は、ご注文確認メールの件名と納品書に記載されています（例：HL-482130）。</span>
      </span>
    </div>
    <input id="order" name="order" type="text">

    <label for="email">ご注文時のメールアドレス</label>
    <input id="email" name="email" type="email" autocomplete="email">

    <button type="submit">注文を探す</button>
  </form>
</main>
```

```css
form {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
}

.label-row {
  display: flex;
  gap: 0.5rem;
}
.tip {
  position: relative;
}
.tip-text {
  visibility: hidden;
  position: absolute;
  width: 16rem;
}
.tip:hover .tip-text {
  visibility: visible;
}
```

- 「？」は `span` なので、Tabキーで止まりません。
- 文を表示するのは `:hover` だけで、キーボードにはポインターを重ねる方法がありません。
- 隠れている間、文はスクリーンリーダーにも読まれないため、欄はヘルプなしで読まれます。
- マウスを使わない人にとっては、ヘッダーの「ヘルプ」リンクが今も唯一のヘルプです。

## 修正後：ラベルの下のヒント

```html
<header>
  <a href="/">Hollis</a>
  <a href="/help">ヘルプ</a>
</header>
<main>
  <h1>返品の手続き</h1>
  <form method="post" action="/returns">
    <label for="order">注文番号</label>
    <p id="order-hint" class="hint">注文番号は、ご注文確認メールの件名と納品書に記載されています（例：HL-482130）。</p>
    <input id="order" name="order" type="text" aria-describedby="order-hint">

    <label for="email">ご注文時のメールアドレス</label>
    <input id="email" name="email" type="email" autocomplete="email">

    <button type="submit">注文を探す</button>
  </form>
</main>
```

```css
form {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
}

.hint {
  margin: 0;
  color: #4a5560;
}
```

1. 番号がどこにあり、どんな形かを、ヘルプセンターの答えと同じ言葉でラベルの下に表示します。
2. `aria-describedby` で欄に結び付けます。スクリーンリーダーは、欄の名前と役割の後にヒントを読みます。
3. 「？」があれば取り除きます。ヘルプはもう、すべての人の画面に出ています。

修正前の二つの例がどちらも直り、3.3.5を満たします。ヒントの色はショップのグレー #4a5560 で、白に対して7.61:1です。ヒントは1、2行に収めてください。スクリーンリーダーは、欄にフォーカスが移るたびにヒントを最後まで読みます。

## 修正後：欄の下の details 要素

```html
<header>
  <a href="/">Hollis</a>
  <a href="/help">ヘルプ</a>
</header>
<main>
  <h1>返品の手続き</h1>
  <form method="post" action="/returns">
    <label for="order">注文番号</label>
    <input id="order" name="order" type="text">
    <details>
      <summary>注文番号はどこで確認できますか？</summary>
      <p>注文番号は、ご注文確認メールの件名と納品書に記載されています（例：HL-482130）。</p>
      <p>メールが見つからない場合は、受信箱を「Hollis 注文」で検索してください。</p>
    </details>

    <label for="email">ご注文時のメールアドレス</label>
    <input id="email" name="email" type="email" autocomplete="email">

    <button type="submit">注文を探す</button>
  </form>
</main>
```

```css
form {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
}

summary {
  cursor: pointer;
  text-decoration: underline;
}
```

1. 欄の直後に `details` 要素を置いてヘルプを入れ、利用者が実際に尋ねる質問を `summary` にします。
2. 閉じたままにしておきます。番号が分かっている人はTabキーで通り過ぎ、分からない人はEnterキーかSpaceキー、またはクリックで開きます。
3. あとはブラウザーに任せます。ヘルプを開閉し、開いているかどうかをスクリーンリーダーに伝えるところまで、スクリプトもARIAも使わずにブラウザーが引き受けます。

修正前の二つの例がどちらも直り、3.3.5を満たします。番号が印刷されている場所の画像や、メールがないときの方法のように、1行より長く、多くの人には要らないヘルプに向いています。GOV.UKのガイダンスも、ほとんどの人が必要とする情報をこの要素で隠さないよう求めています。

## 修正後：欄のそばに置いた、その欄のヘルプへのリンク

```html
<header>
  <a href="/">Hollis</a>
  <a href="/help">ヘルプ</a>
</header>
<main>
  <h1>返品の手続き</h1>
  <form method="post" action="/returns">
    <label for="order">注文番号</label>
    <input id="order" name="order" type="text">
    <a href="/help/order-number" target="_blank">注文番号はどこで確認できますか？（新しいタブで開きます）</a>

    <label for="email">ご注文時のメールアドレス</label>
    <input id="email" name="email" type="email" autocomplete="email">

    <button type="submit">注文を探す</button>
  </form>
</main>
```

```css
form {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
}
```

1. ヘルプセンターのトップではなく、注文番号についての答えへ直接リンクします。
2. リンクを欄のすぐ後に置き、Tabキーで次に届くようにします。
3. 新しいタブで開き、そのことをリンクの言葉で伝えます。フォームも、入力済みの内容も、そのまま残ります。

最も小さな変更です。答えはもうあり、フォームに加わるのはリンク一つです。「？」をこのリンクに置き換えれば修正前の二つの例がどちらも直り、W3Cの達成方法G71（ヘルプへのリンク）で3.3.5を満たします。ただし、これだけでは十分ではありません。利用者はフォームを離れて別のタブへ移り、一行のために記事全体を読み、答えを覚えたままフォームへ戻ります。リンクがどこで開くかを伝える理由は、[新しいタブで開くことを伝えないリンク](/ja/learn/new-tab-links)で説明しています。

## どの方法を選ぶか

三つとも3.3.5を満たします。この例のようにヘルプが1、2行なら、ヒントを使ってください。開く操作なしで画面に出ていて、欄と一緒に読まれます。ヘルプが長いときや、一部の人にしか要らないときは details 要素にすれば、ほかの人にとってフォームは短いままです。リンクは、ほかのページからもリンクされている長い記事のように、ヘルプをフォームに収まる長さにできないときだけにしてください。その場合も、できれば利用者に必要な一行を欄のそばにも表示します。

## 実装の判断

デザインでラベルの横の「？」を残すなら、ポインターを重ねたときに表示する `span` ではなく、ヘルプを開いて、また閉じられるボタンにします。[近づくと消え、閉じられないツールチップ](/ja/learn/hover-content)では、トグルチップとして作る方法を説明しています。こうしたボタンはTabキーの止まる場所を一つずつ増やし、利用者は開いたときにしかヘルプを聞けません。多くの人が必要とするかもしれないヘルプなら、画面に表示するヒントのほうが簡単です。

注文番号は、利用者がコピーしたままの形で受け付けてください。HL-や#、スペースが付いていてもいなくても受け付けます。そうすれば、ヘルプの例は探すものの見た目を示すだけで、守るべき規則にはなりません。一つの形式しか受け付けない欄なら、そのことをラベルかヒントで画面に書きます。この点はレベルAの達成基準3.3.2（ラベル又は説明）の範囲で、[ラベルやヒントがツールチップにしかない入力欄](/ja/learn/title-tooltips)で扱っています。

ヘルプの文は一度だけ書き、両方の場所で使います。ヒントとヘルプセンターの答えを同じコンテンツから作れば、確認メールや注文番号の形が変わっても、食い違いません。

プレースホルダーはヘルプの置き場所になりません。入力を始めるとすぐに消えてしまい、入力した内容を例と見比べたいときには、もうありません。番号が見つからなかったときは、欄のそばのエラーメッセージで、どこを探せばよいかをもう一度伝えられます。[直し方がわからないフォームエラー](/ja/learn/accessible-form-errors)を参照してください。

フォームでは答えきれないことのために、サイト共通の「ヘルプ」リンクも引き続き必要です。[ページごとに場所が変わるヘルプリンク](/ja/learn/consistent-help)で説明しているとおり、どのページでも同じ場所に置いてください。

## 修正の確認

1. サイトを初めて使う人のつもりで、自分のメールや書類を見ながらフォームに入力し、ページを離れたり、何かを調べるために手を止めたりする欄をすべて書き出します。それぞれの欄のそばに、値をどこで確認するか、どう求めるかを伝えるヘルプがあることを確認します。
2. マウスを使わず、キーボードだけでフォームに入力します。どのヘルプも画面に表示されているか、欄の直後にTabキーで届くコントロールから、EnterキーかSpaceキーで開けることを確認します。
3. スクリーンリーダーで、ヘルプのある各欄へTabキーで移動します。ヒントが欄と一緒に読まれるか、次のTabでヘルプを開くコントロールに届き、開いているかどうかが伝わることを確認します。
4. スマートフォンと400%の拡大表示で、ヘルプが欄の下かすぐ後に表示され、横に離れていたり、欄を覆う枠に出たりしないことを確認します。

OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。欄を追加したときや、注文番号の形式など、利用者に求めるものが変わったときにも、もう一度確認してください。

## 制限

これは出発点となる実装例であり、すべてのアプリケーションで適合を保証するものではありません。3.3.5はレベルAAAで、EN 301 549やSection 508が求めるレベルAとAAを超えるものです。それでも、W3CのUnderstandingのページは、このヘルプが役立つ人として、書くこと、読むことに困難のある人、知的障害のある人、文字の入力に苦労する高齢の人を挙げています。このガイドは、一つの欄のヘルプを扱います。ラベルそのもの（[何を入力するのか分からない、あいまいなフォームのラベル](/ja/learn/descriptive-labels)）、開いた後のツールチップの動き（[近づくと消え、閉じられないツールチップ](/ja/learn/hover-content)）、サイトのヘルプリンクのページごとの位置（[ページごとに場所が変わるヘルプリンク](/ja/learn/consistent-help)）は扱いません。どの欄にヘルプが要るかは、フォームに入力する人と、その人の手元にあるものによって変わるので、実際の利用者と一緒に確認してください。

## スクリーンリーダーでの動き（EaseWebが実機で確認）

`aria-describedby`: ページ内の別のテキスト（ヒントやエラーなど）を、要素の説明にします。

| スクリーンリーダー | ブラウザーとOS | Tabで移動 | 下矢印キー |
| --- | --- | --- | --- |
| NVDA | Chrome, Windows 11 | 未確認 | 未確認 |
| JAWS | Chrome, Windows 11 | 未確認 | 未確認 |
| VoiceOver | Safari, iOS | 未確認 | 未確認 |
| TalkBack | Chrome, Android | 未確認 | 未確認 |

https://easeweb.dev/ja/learn/screen-reader-support

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）