Links

How: Inline links take the accent colour and an underline. Artifact links inside a case study are underlined text at weight 600, not buttons. Anything with target=“_blank” gets a small glyph drawn with a CSS mask and a hidden “(opens in a new tab)”.
When: Inline for a reference inside a sentence. Artifact style for opening a lab, a library or an external working file. A Button only for the one action a page wants you to take.
Where: Anywhere in body copy. Artifact links live in <sdc-button-group> rows at the end of a case study section.

The rule that governs every link on this site

The accessible name must contain the visible text. Not replace it, not paraphrase it. Someone using voice control says what they can read.

This is why hidden text is used to add context, and aria-label is not. Hidden text extends the name; a label overwrites it. The site has broken this rule twice, on the pagers and on the case study cards, and both were caught by audit rather than by review.

aria-label is correct in exactly one situation: the element has no visible text at all. The dialog’s close button and the pipeline diagram qualify. Nothing with words in it does.

An inline link is underlined, always

Colour alone is not enough and on this palette it is not even close. The accent is #3F5F92 and the muted body ink is #5A6160. Those two measure 1.02:1 against each other, so a link set in the accent inside a muted paragraph is not subtly harder to spot, it is invisible. For a long time the only inline link in the case studies was unreadable as a link to everyone, not only to people who cannot distinguish the hues.

So prose links carry a 1px underline at a 3px offset, at rest, not on hover. Hover changes the colour to the full-strength ink; the underline is what says “link” before anyone moves a pointer.

This applies to a link inside a sentence. A link that is the entire contents of its row, like the contact list or a work index row, has no surrounding text to be confused with and does not need one.

Every link is at least 24px tall

WCAG 2.2 sets 24 by 24 CSS pixels as the minimum target. A link inside a sentence is exempt, because making it taller would push the lines around it apart. Everything else has to clear it.

Four links on this site sat between 19 and 22px: the footer wordmark, the footer email, the home page contact list and the resume contact list. The fix is min-height where the element is already a flex box, and padding-block where it is inline, because vertical padding grows the hit area without moving the line. The resume resets that padding in print, where the type is 9.5px and target size does not apply.

Ambiguous link text

A link’s purpose has to survive being read on its own, because that is how screen reader users navigate by links.

“Learn more”, “Read more”, “Click here” and a bare “View” all fail. Where the visible text has to stay short for design reasons, add an aria-describedby description rather than changing the name.

New tabs

Anything that opens a new tab says so, in two ways: a small glyph for people who can see it, and hidden text for people who cannot. Opening a new tab without warning takes away the back button with no notice.

The glyph is drawn with background: currentColor and a mask, which disappears in Windows High Contrast Mode, so that mode gets an explicit override.

The email link

The address is stored as hex and assembled by script, so it is not sitting in the markup for scrapers. The script sets the link text to the real address and then appends hidden text reading “(opens your email app)”.

The order matters: the script overwrites the link’s text, so anything added before it runs is destroyed.

Do

Add context with hidden text inside the link.
Describe a short generic label with aria-describedby.
Say when a link opens a new tab.

Don’t

Use aria-label on anything with visible text.
Ship “Learn more” or a bare verb.
Use a button for an artifact link.

Checks before you ship

Read each new link’s text alone. Does it say where it goes?
No element with visible text has an aria-label.
Every new-tab link announces that it opens a new tab.