Links.
Inline links inside body text. Standalone links between sections. Buttons styled to look like links. They're the most-used and least-considered component in any course — and the difference between a well-linked module and a badly-linked one is huge.
Navigation, not action.
A link takes the learner somewhere — another page, another resource, another part of the same course. The defining behaviour is that the destination, not the action, is the point. Links live inside text and look like text.
- Inline references to related content ("see the checkboxes guide").
- Standalone "Read more" or "Learn more" lines below a summary.
- Citations, sources, and external resources.
- Navigation to optional or supplementary material.
Actions and submissions.
If clicking the thing performs an action — submitting a quiz, saving progress, opening a modal — it's a button, not a link. Styling a button to look like a link confuses learners and breaks accessibility.
- Submit, Save, Continue actions — use primary buttons.
- Toggling visibility of inline content — use toggle buttons.
- Quiz answers — use radio buttons.
- Anything destructive — needs an explicit, confirmable button.
Three patterns, one anti-pattern.
How links should look in body text, in standalone positions, and as button-styled links — plus what not to do. Hover over each to see the affordance.
A link inside a sentence should be clearly distinct from the surrounding text — usually underlined and in a different colour. For background on this principle, see Writing good assessment questions. The underline is what makes it scannable as a link, not the colour alone.
Sometimes a link stands on its own line, usually below a summary or as a "continue reading" affordance.
Read about branching scenariosFor prominent navigation — usually only one per page — a link can be styled like a button. It still does a link thing (navigation), but visually competes for attention with primary actions.
Back to design kit— this looks like a link but performs an action. Learners can't tell what will happen when they click. Use a primary button instead. Conversely, real navigation styled as a button (anti-pattern: "Get help" button that just takes you to a help page) hides the destination.
The pattern matters more than the visual styling. The key test: if clicking takes you somewhere, it's a link. If clicking does something, it's a button. Misusing the components confuses learners and breaks screen reader behaviour.
Get the visuals right.
Underline by default
The classic underline-on-links convention has held up for thirty years because it works. Removing underlines to "look cleaner" loses an enormous accessibility cue. Keep underlines on inline links, especially in body text where they need to be scannable.
Distinct colour, plus underline
Colour alone fails colour-blind users. Underline alone is sometimes ambiguous (italics? emphasis?). Combine the two — a distinct link colour and an underline — and the link reads as a link to virtually everyone.
Hover and focus states are mandatory
On hover, the link should change — darker colour, thicker underline, slight shift. On keyboard focus, a visible outline. Without these, users get no signal that the cursor is over a clickable element.
Accessibility — use real anchor tags
Use <a href="...">. Not styled <span>s, not JavaScript-only clicks. Native anchors are keyboard-focusable, screen-reader-announced, and openable in new tabs. Custom-built links almost always break one of these expectations.
Accessibility — descriptive link text
"Click here" tells a screen reader nothing. "Read about assessment questions" tells them everything. Screen reader users often navigate by pulling up a list of all links on the page — every "Click here" appears identical and the list becomes useless.
Indicate external links
Links that leave the course should signal that — a small ↗ icon, a "(opens in new tab)" annotation, or both. Learners who unexpectedly find themselves in a new browser tab feel disoriented; a visual cue prevents that.
How to use links well.
Link the destination, not "click here".
"See the assessment questions guide" beats "Click here to see the assessment questions guide". The link should describe where it leads. This isn't pedantic — it's what makes a page scannable, what helps screen reader users, and what improves SEO. Every "click here" is a missed opportunity.
Don't link every reference.
If you mention "radio buttons" four times on a page, link the first mention. Don't repeat the link. After the first instance, the term reads as recognised vocabulary — adding more links makes the page look spammy and breaks the rhythm of reading.
Open external links in new tabs — internal links in the same tab.
Going to an external resource? New tab — the learner doesn't lose their place. Going to another page on the same course or site? Same tab — the browser's back button is the user's expected escape hatch. Mixing this up is one of the most common usability complaints on training platforms.
Avoid links inside high-stakes content.
If learners are mid-quiz, mid-scenario, or mid-assessment, don't drop links into the content that take them away. They'll click, lose their place, and resent the course. Save inline links for explanatory content; for action content, link to "related resources" sections after the assessment is complete.
Surface the most useful link first.
If a paragraph mentions three things you could link to, link the one most relevant to what the learner is doing now. Don't link the first thing they encounter just because it appeared first. Curate.
Test that broken links don't slip into production.
Every long-form course accumulates dead links — to internal pages that moved, to external sites that changed URLs, to LMS resources that got renamed. Run a link checker before launch, and again every six months. A 404 inside a course breaks trust in a way that's hard to recover.
Be consistent with link styling across the course.
If links in scene 1 are blue and underlined, links in scene 12 should look the same. Inconsistent link styling (sometimes underlined, sometimes not; sometimes coloured, sometimes plain) makes learners doubt every interaction. Pick a style, document it, enforce it.
When you'd reach for a link.
References inside explanatory text
"For a deeper dive on this topic, see [linked guide]." Common in resource libraries, design kits, and reference content.
External resources and citations
"This module is based on research from [linked study]." Useful for credibility, accessibility (learners can verify), and SEO if the page is public.
"Skip to" or "Read more" affordances
Standalone link at the bottom of a summary card — "Read full case study →". Better than a button because the action is navigation, not state change.
Supplementary downloads
Linked PDFs, worksheets, or checklists. Pair the link with the file type and size — "Download the workbook (PDF, 1.2MB)" — so learners know what they're committing to.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.