Links Go Places, Buttons Do Things
The one rule that resolves almost every case.
Links Go Places, Buttons Do Things is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The One Rule
Here is the rule that solves almost every case: a link takes you somewhere, and a button makes something happen right here. 🧭
What a Link Is
A link navigates. Clicking it changes the page or URL, like jumping to another article or a new section.
<a href="/pricing">See pricing</a>What a Button Is
A button performs an action in place: it submits a form, opens a menu, or toggles a setting without leaving the page.
<button type="button">Add to cart</button>Why It Matters
Screen readers announce the role out loud. Users hear link or button, so the right element sets the right expectation before they act.
Different Keys, Different Jobs
This is not just cosmetic. A button fires on Space or Enter, but a link activates only on Enter. The keys follow the role.
The Quick Test
Ask one question: does this control change where I am, or change what is on screen? Navigation means link; action means button.
Open in a New Tab
If a control could sensibly open in a new tab or be bookmarked, it is navigation, so use a real link with an href.
Looks Are Not Roles
Styling does not change meaning. A button can look like a link and a link can look like a button, but the element decides the role.
The Common Mistake
People reach for a styled div or span and bolt on a click handler. It looks fine but has no role and no keyboard support.
<div class="btn" onclick="save()">Save</div>Submitting a Form
To send a form, use a button of type submit. It is an action, not navigation, so a link here would be wrong.
<button type="submit">Sign up</button>Going to Another Page
To send a user to your contact page, use a link. That is pure navigation, and a button would mislead everyone.
<a href="/contact">Contact us</a>Quick Check
You add a control that opens a menu without leaving the page. Which element fits?
Recap
Links go places, buttons do things. Match the element to the intent and you get the right role, the right keys, and happy users. 🎉
Frequently asked questions
Is the “Links Go Places, Buttons Do Things” lesson free?
Yes — the full text of “Links Go Places, Buttons Do Things” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Links Go Places, Buttons Do Things”?
The one rule that resolves almost every case. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Links Go Places, Buttons Do Things” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Links Go Places, Buttons Do Things
- Link Text That Makes Sense Out of Context
- Buttons That Announce What They Do
- The href-less Anchor Anti-Pattern