The <mark> Element
As defined in the HTML Living Standard, the <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
Showing results for "accessibility":
...the importance of web accessibility cannot be overstated in modern design...
<p>The <mark>highlighted</mark> text is relevant here.</p>
View HTML Living Standard: The mark element
Usage vs. Other Elements
It is crucial to use <mark> only when the highlight represents relevance, not importance or stress.
<mark>: Relevance to the user's current activity (e.g., search terms, indicating the current day in a calendar).<strong>: Content that is important, serious, or urgent.<em>: Emphatic stress that changes the meaning of a sentence.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Accessibility Challenge: Most screen readers do not announce the presence of the <mark> element by default. Sighted users see the yellow background, but users of assistive technology may not know the text is highlighted.
Solution: If the highlight is critical to the meaning, provide a text-based cue (e.g., "Note: [text]") or use ARIA to announce the highlight's presence. Using the semantic tag also allows users to apply custom CSS that adds extra markers (like brackets) to marked text.
Understand SC 1.3.1: Info and RelationshipsStyling for Low Vision
The default browser styling for <mark> is usually a bright yellow background. Following SMACSS Base Rules, you should ensure that the contrast remains high.
mark {
background-color: var(--color-accent); /* Gold/Yellow */
color: var(--color-primary); /* Dark Blue */
padding: 0 0.2rem;
}
A11y Tip: High Contrast Mode
In operating system high-contrast modes, background colors are often stripped away. To ensure the "marked" status remains visible, you can add a border or a subtle underline that persists even when the background color is removed.