本文へ移動
easeweb
ご相談
トピックを検索

※印から遠く離れたページ下部に置かれた注記

価格の横の※1はただの文字で、条件を書いた注記は数画面下にありリンクもないため、条件を読まないまま申し込めてしまう

ベストプラクティス
WCAGの達成基準では必須ではない
関連するWCAG 2.2
SC 1.3.1A
必須とする規格
JIS X 8341-3 では必須ではない
問題あり <p>初回 980円<sup>※1</sup></p>
アクセシビリティの問題を示した図: 弱視:※1の説明は、どこ?
01

問題

価格だけを読む人や、画面の一部しか見えない人が、※1の条件を知らないまま申し込んでしまう

02

試してみる

価格の横の※1が何の条件かを探して、価格のところへ戻ってみましょう

スマートフォンの中をスクロールするか、Tabキーで画面に移動して矢印キーで動かしてください。注記を見つけたら、どの価格の話か分かるでしょうか。

修正を適用して同じことを試し、条件がどこに移ったかも見てください。

問題あり 修正できますか?

問題価格の※1と、ページ下部の注記

コーヒー豆の定期便

毎月、焙煎したての豆をポストへ

初回 980円※1

送料無料※2

申し込む

選べる3つの焙煎

浅煎り:果実のような酸味と、紅茶のように軽い口当たりが楽しめます。

中煎り:甘みと苦みのバランスがよく、毎日飲んでも飽きません。

深煎り:コクと香ばしさが強く、ミルクを入れてもしっかり味が残ります。

お届けの流れ

  1. 好みの焙煎と豆の量を選びます。
  2. 毎月1日に焙煎し、3日以内に発送します。
  3. ポストに届くので、受け取りの手間はありません。

お客さまの声

「届いた日の香りが違います。朝の楽しみが増えました。」

「量がちょうどよく、毎月飲み切れるのがうれしいです。」

よくある質問

豆のまま届きますか?
豆のままか、挽いた状態かを選べます。

お届け日は変えられますか?
マイページから、月ごとに変更できます。

※1 2回目以降は毎月2,480円です。3回以上の継続が条件です。

※2 北海道と沖縄へのお届けは、別途550円かかります。

87.1〜94.3%

※1、※2の付いた強調表示に気付いた人のうち、ページ下部の注記を見落とした人の割合です(スマートフォンの表示例)。 消費者庁、2018年(PDF)

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

条件を価格のそばに書くか、リンクでつなぐ

修正前
問題価格の※1と、ページ下部の注記
<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. ※1の注記の文を、価格のすぐ下の段落に移します。拡大して見ている人にも価格と同じ範囲で見え、スクリーンリーダーでは価格の次に読まれます。
  2. ※2の注記の文も、「送料無料」のすぐ下に移します。
  3. 価格と送料の横の「※1」「※2」を消します。隣にあれば、印で結ぶ必要はありません。
  4. ページ下部の注記を削除します。

印も離れた注記もなくなり、条件は「申し込む」より手前で読めます。1.3.1は修正前と同じく満たします。「強調表示に隣接した箇所」に書く形は、消費者庁の報告書が求められる表示方法の一つに挙げているものです。文字の大きさや背景との区別など、ほかの要素まで満たすとは限りません。

この方法を選ぶ理由:メッセージは対象のそばに出す

04

デザインの案

条件は、価格の見た目を損なわずにそばに置ける

初回価格のそばに条件を描く方法を4通り示します。3つは価格と同じ場所で読めますが、1つはそばにあっても薄くて読みにくいものです。

デザインファイルで

  • 価格の部品に、すぐ下か横に条件を置く場所を用意する。
  • 2回目以降の価格を初回価格に近い大きさで描き、一緒に読めるようにする。
  • 条件の文字のコントラスト比を横に書く(背景に対して4.5:1以上)。
  • 判断を左右する条件を、「注意事項」のような一般的な見出しの下に折りたたまない。

合格

  • コーヒー豆の定期便

    初回
    980円
    2回目以降は毎月
    2,480円

    3回以上の継続が条件です。

    2つの価格を近い大きさで並べる 初回価格と2回目以降の価格を横に並べるので、見落としにくく、注記も要りません。お得さの印象は控えめになりますが、それは2つの数字が目に入るからこそです。
  • コーヒー豆の定期便

    1. 初回 980円
    2. 2回目以降 毎月2,480円
    3. 条件 3回以上の継続
    価格を段階で示す 初回、2回目以降、3回以上の継続という条件を、順に線でつないで示します。「いつ、いくら払うのか」がひと目で分かり、スクリーンリーダーでも同じ順に読まれます。高さは少し多くとります。
  • コーヒー豆の定期便

    初回 980円

    2回目以降は毎月2,480円です。3回以上の継続が条件です。

    条件を淡い色の枠に入れる 条件を価格のすぐ下の淡い色の枠に入れます(11.43:1)。細かい注意書きではなく、案内の一部として読めます。枠はカードの下のほうに離さず、価格とボタンのそばに置きます。

不合格

  • コーヒー豆の定期便

    初回 980円

    2回目以降は毎月2,480円です。3回以上の継続が条件です。

    価格の下の薄い小さな文字WCAG 1.4.3 よく見る形です。価格のすぐそばにありますが、白に対して2.29:1と薄いうえ、文字も小さくなっています。近くにあっても、読みにくければ十分ではありません。
05

修正の確認

4項目、マウス不要

確認方法: キーボード、スクリーンリーダー、拡大表示、タッチ

4件中0件を確認済み

OS、ブラウザー、支援技術のバージョン、ビルド、日付、結果を記録してください。

制限

このガイドはアクセシビリティのベストプラクティスで、法的な助言ではありません。消費者庁の留意点は一般消費者の認識についてのもので、スクリーンリーダーには触れておらず、文字の大きさや配置などから総合的に判断するとしています。特定の表示が景品表示法上どう判断されるかは、ここでは扱いません。定期購入の表示には特定商取引法の定めもあり、これも扱いません。

小さく薄い文字の注記はコントラストが足りない文字、バナー画像の中に描かれた※の注記はテキストの代わりに使われた文字画像、必須項目の印としての※は必須項目の示し方、記号全般の扱いは絵文字のガイドを参照してください。

※の読み方や、ページ内リンクの動きは、スクリーンリーダーでテストしていません。NVDAの辞書の内容は、ファイルに書かれた設定であり、聞いて確かめた結果ではありません。

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

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る