𝗦𝗲𝗺𝗮𝗻𝘁𝗶𝗰 𝗛𝗧𝗠𝗟 𝗣𝗿𝗶𝗰𝗲 𝗧𝗮𝗴𝘀

𝗦𝗲𝗺𝗮𝗻𝘁𝗶𝗰 𝗛𝗧𝗠𝗟 𝗣𝗿𝗶𝗰𝗲 𝗧𝗮𝗴𝘀

Stop using the wrong HTML tags for your prices.

Choose the right tag:

• Use the s tag for old prices.
• Use the del tag for removed text.

Screen readers often ignore these tags. This makes your site hard to use.

You need to add hidden text. Use a class called sr-only. This class hides text from sighted users. It provides a label for screen readers.

Example: span class sr-only Original price span s $100 s.

This method works on all devices.

Style these tags with CSS. Use text-decoration to change the color or thickness of the line.

Do not use CSS pseudo-elements for labels. They are unreliable. Stick to real elements.

Source: https://dev.to/micaavigliano/semantic-use-of-and-tags-how-to-write-an-accessible-price-tag-for-e-commerces-5hje