How HTML Tags <ins>, <del>, and <s> Can Improve E-Commerce Accessibility
Three HTML tags — <ins>, <del>, and <s> — serve distinct semantic purposes for marking inserted, deleted, and outdated content respectively, making them especially useful in e-commerce contexts such as displaying sale prices. While <del> and <ins> carry accessibility roles mapped to 'deletion' and 'insertion' under W3C standards, screen reader support remains inconsistent across browser and assistive technology combinations. For example, VoiceOver with Safari on iOS and NVDA with Firefox announce these changes natively, whereas VoiceOver on macOS and NVDA with Chrome do not. Developers are advised to supplement these tags with visually hidden descriptive text using a CSS utility class like .sr-only to ensure all users receive meaningful context. Natural phrasing such as 'previous date' and 'new date' is recommended over generic labels like 'deletion' or 'insertion' to produce clearer, more coherent screen reader output.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in