トピックを検索
※印から遠く離れたページ下部に置かれた注記
価格の横の※1はただの文字で、条件を書いた注記は数画面下にありリンクもないため、条件を読まないまま申し込めてしまう
<p>初回 980円<sup>※1</sup></p> 問題
価格だけを読む人や、画面の一部しか見えない人が、※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」の付いた強調表示に気付いた人の大半が、ページ下部の注記を見落としています。グループインタビューでは、印には気付いたものの、スクロールしているうちに、どの表示についての注意書きか対応関係が分からなくなったという声が出ました。
消費者庁の留意点は、スマートフォンのページについて、「強調表示の近くに打消し表示の存在を連想させる『※』等の記号が表示されていたとしても」、離れた別の画面にある注記に気付かなかったり、どの強調表示についてのものか認識できなかったりする場合を挙げています。そうした表示で、実際より著しく有利だと誤認されるときは、景品表示法上問題となるおそれがあるとしています。アクセシビリティの基準ではなく広告表示についての考え方ですが、問題にしている状況は同じです。
見落としは障害の有無にかかわらず起こります。そのうえで、ページの一部ずつしか見えない人、順に読む人、覚えておくことが負担になる人には、離れた注記をたどる手間がさらに大きくなります。定期便のような契約では、読み飛ばした条件が、後から毎月の請求となって現れます。
10グループ中3グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 視覚が限られる 画面拡大ソフトの利用者には、画面の一部ずつしか見えません。拡大するほど一度に見える範囲は狭くなり、価格の※1と注記を同時に見ることはできず、注記がどこにあるかの手がかりもありません。
- 言語・認知・学習の能力が限られる 下まで読み進める間、※1がどの話だったかを覚えておく必要があります。作業記憶に困難のある人は、一度に1つから3つのことしか覚えておけない場合があり、注記の※1だけではどの価格の条件かが分からず、上まで探して戻ることになります。
- 視覚を使わない ページを順に聞くと、条件は価格の直後ではなく、ページの説明をすべて聞き終えた後に読まれます。リンクで移動することもできず、手がかりになる※の印が読まれるかどうかは、スクリーンリーダーとその設定によります。
HTMLに誤りはなく、axeは何も報告しません。「※1」はどちらもただのテキストです。コードだけを読むレビューでは2か所の同じ文字を照合できても、画面でどれだけ離れて見えるかは分かりません。EaseWebの診断は、「※1」のような番号付きの印がリンクになっておらず、同じ番号の注記が1画面以上下にあるとき、人が確認する項目として挙げます。達成基準の不適合としては報告しません。番号のない※は、どの注記と対応するかをコードから判断できないため、対象にしていません。
試してみる
価格の横の※1が何の条件かを探して、価格のところへ戻ってみましょう
スマートフォンの中をスクロールするか、Tabキーで画面に移動して矢印キーで動かしてください。注記を見つけたら、どの価格の話か分かるでしょうか。
修正を適用して同じことを試し、条件がどこに移ったかも見てください。
問題あり 修正できますか?
コーヒー豆の定期便
毎月、焙煎したての豆をポストへ
選べる3つの焙煎
浅煎り:果実のような酸味と、紅茶のように軽い口当たりが楽しめます。
中煎り:甘みと苦みのバランスがよく、毎日飲んでも飽きません。
深煎り:コクと香ばしさが強く、ミルクを入れてもしっかり味が残ります。
お届けの流れ
- 好みの焙煎と豆の量を選びます。
- 毎月1日に焙煎し、3日以内に発送します。
- ポストに届くので、受け取りの手間はありません。
お客さまの声
「届いた日の香りが違います。朝の楽しみが増えました。」
「量がちょうどよく、毎月飲み切れるのがうれしいです。」
よくある質問
豆のまま届きますか?
豆のままか、挽いた状態かを選べます。
お届け日は変えられますか?
マイページから、月ごとに変更できます。
※1 2回目以降は毎月2,480円です。3回以上の継続が条件です。
※2 北海道と沖縄へのお届けは、別途550円かかります。
87.1〜94.3%
※1、※2の付いた強調表示に気付いた人のうち、ページ下部の注記を見落とした人の割合です(スマートフォンの表示例)。 消費者庁、2018年(PDF)
修正方法
条件を価格のそばに書くか、リンクでつなぐ
<section> <h2>コーヒー豆の定期便</h2> <p>初回 980円<sup>※1</sup></p> <p>送料無料<sup>※2</sup></p> <a href="/subscribe">申し込む</a></section>…<footer> <p>※1 2回目以降は毎月2,480円です。3回以上の継続が条件です。</p> <p>※2 北海道と沖縄へのお届けは、別途550円かかります。</p></footer>問題点4点
- 「初回 980円」の条件が、数画面下のページ下部に書かれています。
- ※1はただの文字で、注記へ移動するリンクがありません。
- 注記の冒頭は「※1」だけで、どの価格の条件なのかは上まで戻らないと分かりません。
- 「申し込む」は価格のすぐ下にあり、条件を読まないまま押せます。
条件を価格のすぐそばに書く
<section> <h2>コーヒー豆の定期便</h2> <p>初回 980円</p> <p>2回目以降は毎月2,480円です。3回以上の継続が条件です。</p> <p>送料無料</p> <p>北海道と沖縄へのお届けは、別途550円かかります。</p> <a href="/subscribe">申し込む</a></section>…修正の手順4ステップ
- ※1の注記の文を、価格のすぐ下の段落に移します。拡大して見ている人にも価格と同じ範囲で見え、スクリーンリーダーでは価格の次に読まれます。
- ※2の注記の文も、「送料無料」のすぐ下に移します。
- 価格と送料の横の「※1」「※2」を消します。隣にあれば、印で結ぶ必要はありません。
- ページ下部の注記を削除します。
印も離れた注記もなくなり、条件は「申し込む」より手前で読めます。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要素とリンクのテキストで用が足ります。読み上げの結果も確認していないため、ここでは使っていません。
デザインの案
条件は、価格の見た目を損なわずにそばに置ける
初回価格のそばに条件を描く方法を4通り示します。3つは価格と同じ場所で読めますが、1つはそばにあっても薄くて読みにくいものです。
デザインファイルで
- 価格の部品に、すぐ下か横に条件を置く場所を用意する。
- 2回目以降の価格を初回価格に近い大きさで描き、一緒に読めるようにする。
- 条件の文字のコントラスト比を横に書く(背景に対して4.5:1以上)。
- 判断を左右する条件を、「注意事項」のような一般的な見出しの下に折りたたまない。
合格
コーヒー豆の定期便
- 初回
- 980円
- 2回目以降は毎月
- 2,480円
3回以上の継続が条件です。
2つの価格を近い大きさで並べる 初回価格と2回目以降の価格を横に並べるので、見落としにくく、注記も要りません。お得さの印象は控えめになりますが、それは2つの数字が目に入るからこそです。コーヒー豆の定期便
- 初回 980円
- 2回目以降 毎月2,480円
- 条件 3回以上の継続
価格を段階で示す 初回、2回目以降、3回以上の継続という条件を、順に線でつないで示します。「いつ、いくら払うのか」がひと目で分かり、スクリーンリーダーでも同じ順に読まれます。高さは少し多くとります。コーヒー豆の定期便
初回 980円
2回目以降は毎月2,480円です。3回以上の継続が条件です。
条件を淡い色の枠に入れる 条件を価格のすぐ下の淡い色の枠に入れます(11.43:1)。細かい注意書きではなく、案内の一部として読めます。枠はカードの下のほうに離さず、価格とボタンのそばに置きます。
不合格
コーヒー豆の定期便
初回 980円
2回目以降は毎月2,480円です。3回以上の継続が条件です。
価格の下の薄い小さな文字WCAG 1.4.3 よく見る形です。価格のすぐそばにありますが、白に対して2.29:1と薄いうえ、文字も小さくなっています。近くにあっても、読みにくければ十分ではありません。
修正の確認
4項目、マウス不要
確認方法: キーボード、スクリーンリーダー、拡大表示、タッチ
OS、ブラウザー、支援技術のバージョン、ビルド、日付、結果を記録してください。
制限
このガイドはアクセシビリティのベストプラクティスで、法的な助言ではありません。消費者庁の留意点は一般消費者の認識についてのもので、スクリーンリーダーには触れておらず、文字の大きさや配置などから総合的に判断するとしています。特定の表示が景品表示法上どう判断されるかは、ここでは扱いません。定期購入の表示には特定商取引法の定めもあり、これも扱いません。
小さく薄い文字の注記はコントラストが足りない文字、バナー画像の中に描かれた※の注記はテキストの代わりに使われた文字画像、必須項目の印としての※は必須項目の示し方、記号全般の扱いは絵文字のガイドを参照してください。
※の読み方や、ページ内リンクの動きは、スクリーンリーダーでテストしていません。NVDAの辞書の内容は、ファイルに書かれた設定であり、聞いて確かめた結果ではありません。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: info-and-relationships(新しいタブで開きます)
- caa.go.jp: fair_labeling_180607_0004.pdf(新しいタブで開きます)
- caa.go.jp: fair_labeling_180516_0003.pdf(新しいタブで開きます)
- digital.go.jp: 20251016_introduction_to_web_accessibility.pdf(新しいタブで開きます)
- waic.jp: mark-to-use(新しいタブで開きます)
- mitsue.co.jp: 25_1747(新しいタブで開きます)
- github.com: symbols.dic(新しいタブで開きます)
- w3.org: visual(新しいタブで開きます)
- w3.org: coga-usable(新しいタブで開きます)
- WCAG Understanding: target-size-enhanced(新しいタブで開きます)
- kb.daisy.org: notes(新しいタブで開きます)
- w3.org: dpub-aria-1.1(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。