Three semantic elements carry their own styling rather than needing a class: <mark> for highlighted text, <abbr> for an acronym, and <figure> with <figcaption> for captioned media. Each one means something to a screen reader, so reaching for them decoratively changes what the page says.
Highlighted text
<mark> paints the peach highlighter ground through --yellow-light; the Colour page carries the token and its value.
The tagline signals what the brand stands for: Where Culture Meets Care.
<p>The tagline signals what the brand stands for: <mark>Where Culture Meets Care</mark>.</p>
A known contrast failure in dark mode
In light mode a mark is --brown-dark ink () on the peach ground and measures 14.59:1 — comfortably past AA. In dark mode the engine mixes --yellow to 60 % over the page and inks it --off-white, which against BlackDoctor's gold measures 4.03:1, below the 4.5:1 AA asks of body text.
The ground is not the problem — the ink is. True black on that same mixed ground measures 4.91:1 and clears AA, so the failure is the engine's choice of --off-white rather than the gold beneath it.
- Check a
<mark>in dark mode before shipping it. The demo above is currently the only one on the site, so this page is the place to see the failure.
The engine's rule lives in a synced file that npm install overwrites, so it cannot be corrected there from here — but a one-line override in assets/css/style.css would fix it locally today, since black clears on that ground. It is recorded under Engine gaps in docs/figma-mapping.md, and the proper fix is upstream: pick the ink from the mixed ground's luminance rather than assuming a dark yellow.
Abbreviations
<abbr> renders with a dotted underline and shows its expansion on hover through the native title attribute.
Every article is reviewed against WCAG 2.1 AA before it ships.
<p>Reviewed against <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 AA.</p>
Hover is not available on a touch screen and title is unreliable with a screen reader, so an abbreviation that matters should also be spelled out in the text on first use.
Figure and caption
<figure> groups media with its caption so the two are associated in the accessibility tree rather than just visually adjacent. The figure takes a 24px block margin; the caption renders small, italic and faded, with 8px above it.
<figure>
<img class="img img-16x9" src="/assets/images/og-default.png" alt="…">
<figcaption>The brand mark on its paper ground.</figcaption>
</figure>
Rules
<mark>means highlighted, not emphasised. A screen reader may announce it as such, so reaching for it to make text bold changes what the page says; for emphasis the elements are<strong>and<em>.- Never omit
titleon an<abbr>. The rule isabbr[title], so without one nothing matches: the element renders as plain text and the abbreviation is invisible as well as unexplained. - A caption supplements
alt, it does not replace it. The caption is read by everyone;altis what a screen reader has instead of the picture. - Never use
<figcaption>outside a<figure>. It has no meaning on its own and will not be associated with anything.