Skip to main content

The <ins> Element

As defined in the HTML Living Standard, the <ins> element represents a range of text that has been added to a document. This is typically used in conjunction with the <del> element to show edits or updates.

Visual Example:

The initial requirement was for level A compliance, but we have now upgraded to level AA.

<p> The price is <del>$20</del> <ins datetime="2026-05-01">$15</ins>! </p> View HTML Living Standard: The ins element

Attributes for Audit Trails

WCAG Requirement: Info and Relationships

Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.

Accessibility Warning: Most screen readers do not announce the presence of <ins> by default. While sighted users see an underline, users of assistive technology may hear the added text as if it were always there.

Solution: If the fact that text was *added* is critical to the meaning (such as in a legal contract change), supplement the tag with text like "Added on April 13th:" or use ARIA roles like addition to notify the user.

Understand SC 1.3.1: Info and Relationships

Styling for Clarity

Browsers render inserted text with an underline by default. To distinguish this from a link, modern design patterns often use a light green background or a border.

ins { text-decoration: none; /* Remove default underline to avoid link confusion */ background-color: #dfd; /* Light green for "added" status */ border-bottom: 1px solid #080; }