【HTML】割引などの金額変更で打ち消し線を表現するためのマークアップ

Web標準から考えるAnchor Link

ブラウザCSSに打ち消し線（text-decoration: line-through;）が指定されている要素はs要素とdel要素がある。

いずれも文章を訂正したことを表すときに用いられる要素だが、２つの要素の大きな違いはコンテンツが文書から削除されているものであるかどうかにある。 s要素は、正確ではなくなった情報や関連しなくなった情報を表すものだが、Webページの一部として必要な情報であることに変わりはない。現在はこうだが昔はこうだった、という情報を表すために必要な要素だ。

一方でdel要素は文書からコンテンツが削除されたことを表すもので、修正履歴などをマークアップする際に用いられる。主に編集に関連する画面で活躍するものだ。

なお、ARIA in HTML（日本語版）を参照するといずれも暗黙のロールは削除されたコンテンツを示す「deletion」である。

変更前の価格に打ち消し線を引きたい場合は、s要素を採用するのが妥当だろう。

s要素のサポート状況Anchor Link

s要素は古くから存在する要素だが、アクセシビリティ・サポーテッドかどうかを確認しておく。

上記の例をブラウザがどう解釈しているのかを確認してみる。

Google Chromeは「ラーメン」の部分をdeletionロールとして解釈している。

Firefoxも同様だ。一方で、支援技術側のサポート状況は次のようになっている。

セマンティクスとしてはs要素を採用することが望ましいが、スクリーンリーダを利用するユーザにとって、手元で確認できる範囲ではほとんどのケースで意味がないことがわかる。ラーメンお寿司ってなんだろう。おいしいのかな。

実例を見てみるAnchor Link

一般的に価格の変更についてどのような実装になっているか、4つのWebサービスを調査してみた。金額表示部分以外については言及しないものとする。

AmazonAnchor Link

https://www.amazon.co.jp/

参考価格に打ち消し線が入った見た目になっているが、参考にしていた価格としては現在も正しい情報と解釈できるので、s要素を採用する妥当性は低く感じる。

なお、実際の構造は以下の通りでs要素は採用されていない。

<span>
  <span>￥147,000</span>
  <span aria-hidden="true">
    <span>￥</span>
    <span>147,000</span>
  </span>
</span>
<div>
  <span>参考: </span>
  <span>
    <span>￥161,700</span>
    <span aria-hidden="true">￥161,700</span>
  </span>
</div>

また、打ち消し線もtext-decorationではなく、疑似要素によって表現されている。

楽天市場Anchor Link

https://www.rakuten.co.jp/

最終的な金額のみの表示か、「商品価格＋送料−獲得予定ポイント」の表で価格が掲載されている。 セール価格の場合も同様で、通常価格や参考価格が書かれるパターンは見当たらなかった。

商品詳細画面には通常価格があるが、打ち消し線の表現はされていない。

<tr>
  <td>
    <div>当店通常価格</div>
    <div>103,290</div>
    <span>
      <div>円</div>
    </span>
  </td>
</tr>
<tr>
  <td>
    <div></div>
    <span>
      <span>
        <div>92,961</div>
      </span>
      <div>円</div>
    </span>
    <span>
      <div>送料無料</div>
    </span>
  </td>
</tr>

Yahoo!ショッピングAnchor Link

https://shopping.yahoo.co.jp/

商品一覧画面では通常価格は書かれておらず、セール表示のみ。

商品詳細画面ではメーカー希望小売価格が表示されており、打ち消し線が表示されている。 セマンティクスは以下の通りで、text-decorationが用いられていた。

<p>メーカー希望小売価格 45,210円</p>

ZOZOTOWNAnchor Link

https://zozo.jp/

商品一覧画面では通常価格は書かれておらず、セール表示のみ。

商品詳細画面ではメーカー希望小売価格が表示されており、打ち消し線が表示されている。 div要素とspanのみでマークアップされおり、text-decorationが用いられていた。

<div>
  <span>¥7,920</span>（2024年5月27日時点の価格）
</div>

個人的なベストプラクティスAnchor Link

ワイヤーフレームの段階で調整ができるのであれば、素直にすべて文字列で表示するのが好みではある。こうなっていれば読み間違えることも少なく、スクリーンリーダユーザへの誤解も避けられる。また、著者がセール価格を重要だと考えるならばstrong要素を採用できる。

<p>
  <span>通常価格：¥3,000</span>
  <strong>
    <span>セール価格（税込）：</span>
    <span>¥1,980</span>
  </strong>
</p>

<p>
  通常価格：<span class="line-through">¥3,000</span>
  <strong>
    <span class="sr-only">セール価格</span>¥1,980
  </strong>
</p>

<p>
  <s>
    <span class="sr-only">価格</span>¥3,000
  </s>
  <strong>
    <span class="sr-only">セール価格</span>¥1,980
  </strong>
</p>