取り消し線だけで示す元の価格と削除した語

あるショップの商品一覧で、リネンのトートがセール中です。商品名の下には、取り消し線の入った小さな灰色の40ドルと、太字の28ドルが並んでいます。カードを見れば、40ドルだったトートが今は28ドルだと、すぐに分かります。

スクリーンリーダーで一覧を読んでいくと、「リネンのトート、40ドル、28ドル」と聞こえます。40ドルの取り消し線はCSSで描いたもので、テキストには含まれないため、二つの価格は同じように読まれます。次のホーローのマグは「ホーローのマグ、18ドル」なので、最初のカードは、ただ価格が二つある商品に聞こえます。どちらが適用されるかは、推測するか、かごに入れてみるまで分かりません。

達成基準1.3.1「情報及び関係性」はレベルAです。見せ方で伝えている情報（ここでは、どちらが元の価格か）は、コードからも判別できるか、テキストでも得られなければなりません。W3Cの失敗例F2は、まさにこの状態を示しています。文字の見せ方の変化が意味を持つのに、それを伝えるマークアップもテキストもない状態です。

取り消し線はCSSのテキスト装飾で、マークアップではありません。Chromiumのアクセシビリティツリーでは、text-decoration: line-throughを付けた「40ドル」のspanは、隣の「28ドル」と同じただのテキストです。線は太字と同じく文字の書式として伝わるだけで、たとえばNVDAは、初期設定では取り消し線などのフォント属性を読み上げません。スクリーンリーダーは、渡されたものしか読めません。W3Cの十分な達成方法G117は、同じ情報をテキストでも伝える方法で、ここで示す最初の二つの修正がこれにあたります。

オンラインで買い物をする人は、かごの中だけでなく、一覧ページで価格を比べます。セール価格が商品カードにしか出ていないなら、その違いはカードで聞き取れなければなりません。

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

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

• 視覚を使わない スクリーンリーダーはカードの文字を「リネンのトート、40ドル、28ドル」と読み、40ドルの取り消し線はそこに含まれないため、どちらがセール価格かを示すものがありません。
• 言語・認知・学習の能力が限られる 文字を読む補助に読み上げツールを使う人にも、同じ二つの価格が聞こえます。また、数字に引いた線が「もう違う」を意味すると分かるのは、その慣習を知っている人だけです。

HTMLは正しく、元の価格に使った灰色もコントラストが足りています。axeには、テキスト装飾を調べるルールがありません。EaseWebの診断（ew:struck-price-not-marked）は、CSSだけで取り消し線を引いた価格を探し、元の価格だと示す言葉が、表示でも非表示でも周りにないものを報告します。価格は通貨で見分けるため、取り消し線を引いたToDoの項目は対象外です。太字、色、マーカーなど、ほかの見せ方が言葉を必要とする意味を持つかどうかは判断できません。