# ※印から遠く離れたページ下部に置かれた注記
Source: https://easeweb.dev/learn/reference-marks
Topics: 言葉と読みやすさ > ※の注記が、条件をつけた価格や文のそばにあるか、そこから移動できる (best practice; related to WCAG 1.3.1)
The fix: 条件を価格や特典のすぐそばに書き、※の印と離れた注記をなくします。または、注記を離れた場所に残す場合は、※の印を注記へのリンクにし、注記の冒頭に何についての条件かを書いて、元の場所へ戻るリンクを置きます。
Test with: keyboard, screen reader, zoom, touch
References: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html https://www.caa.go.jp/policies/policy/representation/fair_labeling/pdf/fair_labeling_180607_0004.pdf https://www.caa.go.jp/policies/policy/representation/fair_labeling/pdf/fair_labeling_180516_0003.pdf https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/bf5f4482/20251016_introduction_to_web_accessibility.pdf https://waic.jp/qa/mark-to-use/ https://www.mitsue.co.jp/knowledge/blog/a11y/202606/25_1747.html https://github.com/nvaccess/nvda/blob/master/source/locale/ja/symbols.dic https://www.w3.org/WAI/people-use-web/abilities-barriers/visual/ https://www.w3.org/TR/coga-usable/ https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html https://kb.daisy.org/publishing/docs/html/notes.html https://www.w3.org/TR/dpub-aria-1.1/
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
コーヒー豆の定期便を売るショップのページです。スマートフォンで開くと、最初の画面に「初回 980円※1」と「送料無料※2」が大きく出て、そのすぐ下に「申し込む」のボタンがあります。価格をすっきり見せるために、条件は注記にしてページの下部にまとめた、よくある作りです。
※1の内容は「2回目以降は毎月2,480円です。3回以上の継続が条件です。」です。この一文は、焙煎の説明、お届けの流れ、お客さまの声、よくある質問を過ぎた、数画面下にあります。価格を見て「申し込む」を押す人は、この文を一度も目にしないまま先へ進めてしまいます。下まで読んだ人も、※1がどの話だったかを覚えていなければ、上まで探しに戻ることになります。
## 確認できる問題
W3Cの文書にこれを不適合とする記述はなく、このガイドではベストプラクティスとして扱います。達成基準1.3.1「情報及び関係性」は、見た目で伝えている関係がプログラムで判断できるか、テキストで示されていることを求めており、ここでは価格と注記が同じ「※1」という文字で結ばれています。ただし1.3.1の解説書は、テキストで示す説明は対象の近くに置くこと、プログラムで判断できる技術ではそちらを強く勧めることを助言として書いており、判断が分かれる場合があるとも述べています。離れた注記を別様に判断する評価者がいてもおかしくありません。WCAG 2.2の本文と1.3.1の解説書に脚注や注記の話は出てこず、HTMLの注記を扱う達成方法も見当たりません。JIS X 8341-3:2016はWCAG 2.0と一致する規格で、達成基準も同じです。DAISYの電子書籍向けの解説は、注記の参照をリンクにする技法を1.3.1に結びつけていますが、これはW3Cの要件ではありません。
それでも問題になるのは、人が見落とすからです。消費者庁は、こうした条件の注記を「打消し表示」と呼び、スマートフォンのページで実態を調べました。ある表示例では、「※1」と「※2」の付いた強調表示に気付いた人の大半が、ページ下部の注記を見落としています。グループインタビューでは、印には気付いたものの、スクロールしているうちに、どの表示についての注意書きか対応関係が分からなくなったという声が出ました。
消費者庁の留意点は、スマートフォンのページについて、「強調表示の近くに打消し表示の存在を連想させる『※』等の記号が表示されていたとしても」、離れた別の画面にある注記に気付かなかったり、どの強調表示についてのものか認識できなかったりする場合を挙げています。そうした表示で、実際より著しく有利だと誤認されるときは、景品表示法上問題となるおそれがあるとしています。アクセシビリティの基準ではなく広告表示についての考え方ですが、問題にしている状況は同じです。
## 利用者への影響
見落としは障害の有無にかかわらず起こります。そのうえで、ページの一部ずつしか見えない人、順に読む人、覚えておくことが負担になる人には、離れた注記をたどる手間がさらに大きくなります。定期便のような契約では、読み飛ばした条件が、後から毎月の請求となって現れます。
## 自動チェックとAIの限界
HTMLに誤りはなく、axeは何も報告しません。「※1」はどちらもただのテキストです。コードだけを読むレビューでは2か所の同じ文字を照合できても、画面でどれだけ離れて見えるかは分かりません。EaseWebの診断は、「※1」のような番号付きの印がリンクになっておらず、同じ番号の注記が1画面以上下にあるとき、人が確認する項目として挙げます。達成基準の不適合としては報告しません。番号のない※は、どの注記と対応するかをコードから判断できないため、対象にしていません。
## 修正前：価格の※1と、ページ下部の注記
```html
コーヒー豆の定期便
初回 980円※1
送料無料※2
申し込む
…
```
- 「初回 980円」の条件が、数画面下のページ下部に書かれています。
- ※1はただの文字で、注記へ移動するリンクがありません。
- 注記の冒頭は「※1」だけで、どの価格の条件なのかは上まで戻らないと分かりません。
- 「申し込む」は価格のすぐ下にあり、条件を読まないまま押せます。
## 修正後：条件を価格のすぐそばに書く
```html
コーヒー豆の定期便
初回 980円
2回目以降は毎月2,480円です。3回以上の継続が条件です。
送料無料
北海道と沖縄へのお届けは、別途550円かかります。
申し込む
…
```
1. ※1の注記の文を、価格のすぐ下の段落に移します。拡大して見ている人にも価格と同じ範囲で見え、スクリーンリーダーでは価格の次に読まれます。
2. ※2の注記の文も、「送料無料」のすぐ下に移します。
3. 価格と送料の横の「※1」「※2」を消します。隣にあれば、印で結ぶ必要はありません。
4. ページ下部の注記を削除します。
印も離れた注記もなくなり、条件は「申し込む」より手前で読めます。1.3.1は修正前と同じく満たします。「強調表示に隣接した箇所」に書く形は、消費者庁の報告書が求められる表示方法の一つに挙げているものです。文字の大きさや背景との区別など、ほかの要素まで満たすとは限りません。
## 修正後：※の印を注記へのリンクにする
```html
…
```
1. ※1と※2をa要素にし、hrefで注記のidを指します。キーボードで届くようになり、押すと注記へ移動します。
2. リンクの中に、何の条件かを隠したテキストで書きます。※が読まれない設定でも、リンクの行き先が分かります。
3. 注記の冒頭に、どの価格についての条件かを書きます。移動してきた人も、下まで読み進めた人も、上に戻らずに分かります。
4. 注記の終わりに、印のidを指す戻るリンクを置きます。読み終えたら、元の場所から続けられます。
1.3.1は修正前と同じく満たし、移動できない問題と、どの価格の条件か分からない問題を解決します。一方、注記は離れたままで、価格だけを見て「申し込む」を押す人は条件に出会いません。消費者庁の留意点も、関心のある表示を見つけるとその部分だけを見てリンクをタップし、リンク元に戻って確認しないことがある、という接し方を挙げています。
## どの方法を選ぶか
どちらも1.3.1を満たします。条件をそばに書く方法は、印もリンクも要らず、価格を読む人にも聞く人にも条件が届きます。代わりに最初の画面が少し長くなります。印をリンクにする方法は見た目をほとんど変えませんが、読むかどうかは利用者に任されたままです。そのため、条件をそばに書く方法を勧めます。価格や解約、追加料金のように申し込みの判断を変える条件は、そばに書いてください。リンクは、長い補足や、判断を左右しない注記を離れた場所に置くときに使います。
## 実装の判断
**番号のない※。** 同じ※が何行にも付き、下に注記が1つだけあると、どの行の話かが誰にも分かりません。※1、※2と番号を振るか、注記の冒頭に対象を書いてください。注記がすべての行に当てはまるなら、そう書きます（「価格はすべて税込です」）。
**※の読み上げ。** デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、「※（こめじるし）」などの記号は「スクリーンリーダーとその設定によっては読み上げられません」としています。NVDAの日本語の記号辞書では、※に「コメジルシ」という読みと「一部」のレベルが割り当てられています。NVDAの記号レベルの初期設定は「一部読み上げ」で、「読まない」に変えることもできます。ほかのスクリーンリーダーの読み方は、確認できた資料がありません。WAICのQ&Aは、※が意味を持つ場合は排除する必要はないとしており、※を使うこと自体は問題ではありません。リンクの行き先や条件の内容を、※に頼らず言葉で書いてください。
**折りたたんだ注記。** 消費者庁の報告書は、注記を折りたたみのパネルに入れ、ラベルが抽象的で押す必要に気付かない場合も、問題となるおそれのある表示方法に挙げています。折りたたみボックスに入れるなら、「注意事項」ではなく「2回目以降の料金と解約の条件」のように具体的なラベルにして、価格のすぐ近くに置いてください。
**移動先を示す。** ページ下部に注記が並んでいると、どの注記へ移動したのかが見分けにくくなります。`:target` で移動先の注記に背景色を付けてください。固定ヘッダーがあるページでは、`scroll-margin-top` で注記がヘッダーの下に隠れないようにします。
**Tabキーの動き。** Chromiumで試したところ、`#note-1` へ移動した後にTabキーを押すと、注記の中の戻るリンクに移ります。注記にidがあれば、キーボード操作には `tabindex="-1"` は要りません。ページ内リンクの移動にスクリーンリーダーの読む位置が付いてくるかどうかは、ここでは確認していません。
**1つの注記を複数の印から指す場合。** 戻るリンクのhrefが指せるのは1か所だけです。行き先を言葉で書くか、注記をそれぞれの印に分けてください。
**小さなリンク。** W3Cの達成基準2.5.5の解説書は、文の中や文末の脚注リンクを文の一部として扱い、最小サイズの対象外としています。それでも※1はタップしにくい大きさなので、余白を足せるなら足してください。
**DPUB-ARIAのロール。** デジタル出版向けの `doc-noteref` と `doc-backlink` もありますが、この例ではa要素とリンクのテキストで用が足ります。読み上げの結果も確認していないため、ここでは使っていません。
## 修正の確認
1. スマートフォンの幅で価格を表示し、条件がスクロールせずに同じ画面で読めることを確認します。離れた注記が残っている場合は、印がリンクになっていることを確認します。
2. 離れた注記がある場合は、キーボードだけで印から注記へ移動し、Tabキーで戻るリンクへ進み、押すと元の印に戻ることを確認します。
3. ブラウザーを400%に拡大して同じ操作を行い、条件が読めること、固定された要素で注記が隠れないことを確認します。
4. 利用者が使うスクリーンリーダーで価格の周りを順に読み、条件があることと、どの価格についてのものかが分かることを確認します。記号の読み上げの設定を変えても確かめます。
OS、ブラウザー、支援技術のバージョン、ビルド、日付、結果を記録してください。
## 制限
このガイドはアクセシビリティのベストプラクティスで、法的な助言ではありません。消費者庁の留意点は一般消費者の認識についてのもので、スクリーンリーダーには触れておらず、文字の大きさや配置などから総合的に判断するとしています。特定の表示が景品表示法上どう判断されるかは、ここでは扱いません。定期購入の表示には特定商取引法の定めもあり、これも扱いません。
小さく薄い文字の注記は[コントラストが足りない文字](/ja/learn/text-contrast)、バナー画像の中に描かれた※の注記は[テキストの代わりに使われた文字画像](/ja/learn/images-of-text)、必須項目の印としての※は[必須項目の示し方](/ja/learn/required-fields)、記号全般の扱いは[絵文字](/ja/learn/emoji)のガイドを参照してください。
※の読み方や、ページ内リンクの動きは、スクリーンリーダーでテストしていません。NVDAの辞書の内容は、ファイルに書かれた設定であり、聞いて確かめた結果ではありません。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）