Links vs. buttons

Vibe check – when to use links vs. buttons for navigation

Navigation is one of the most critical aspects of web accessibility, yet it's often misunderstood. The difference between a link (<a>) and a button (<button>) is more than just a coding preference—it impacts the user experience, especially for screen reader navigation. Choosing the right element ensures clarity, predictability, and a smoother browsing experience for everyone.

Let’s explore when to use links versus buttons and how making the right choice enhances accessibility.

A personal story – when a button sent me somewhere unexpected

During an accessibility test, I encountered a button labeled “Go to my settings.” When I activated it, instead of performing an action on the same page, it completely redirected me to a new URL. Since buttons are typically meant for in-page interactions, this unexpected behavior caught me off guard.

Had it been a properly coded link, a screen reader would have announced it as a navigational element, ensuring a clearer experience. This test reinforced why using the correct element is crucial for accessibility and predictability.

Elevate the vibe – understanding the difference

Case 1: when the URL is completely different

If selecting a button navigates to a completely different URL, it should be coded as a link (<a>) rather than a button.

A button is meant for actions on the same page, like submitting a form, expanding content, or triggering a UI change.

A link, however, indicates that selecting it will navigate to a different location.

Why does this matter?

Screen readers provide navigation cues. If a button unexpectedly redirects to another page, it can cause confusion and disrupt workflow.

Correct approach:

<a href="https://example.com/new-page">Go to new page</a>

Incorrect approach:

<button onclick="window.location.href='https://example.com/new-page'">Go to new page</button>

Using a link in this case clearly signals that the person will be taken to a new page, ensuring better navigation clarity.

Case 2: when the URL structure remains the same

If the navigation stays within a structured process, like progressing through steps in a form flow, using a button (<button>) can be acceptable.

In these cases, the primary URL remains the same, with only additional path segments appended:

Step 1: https://example.com/apply/form-step-1

Step 2: https://example.com/apply/form-step-2

Since this maintains the same context, a button is appropriate because the action is part of a structured flow rather than general site navigation.

Correct approach:

<button onclick="goToNextStep()">Continue to next step</button>

Incorrect approach:

<a href="https://example.com/apply/form-step-2">Continue to next step</a>

Self-reflection – are you using the right element?

Ask yourself these key questions when deciding between a link or a button:

Does this action take someone to a new page? If yes, use a link (<a>).

Does this action stay on the same page? If yes, use a button (<button>).

Would a screen reader user expect to remain on the same page after selecting this element?

Is this part of a multi-step form where the context remains the same?

Taking the time to evaluate these questions ensures that your navigation elements provide a predictable and accessible experience for all.

Vibe in action – making accessibility the standard

Follow web standards

Stick to the correct semantics: links for navigation, buttons for actions.

Test with assistive technologies

Use screen readers to verify how links and buttons behave.

Maintain consistency

Ensure similar interactions across the site follow the same logic for clarity.

By making intentional choices, we reduce confusion, improve usability, and create a web that works for everyone.

Vibing out

The choice between buttons and links might seem small, but it has a big impact on accessibility. Thoughtful navigation ensures that everyone—whether they use a screen reader, keyboard navigation, or traditional browsing methods—can move through a website with confidence and ease.

Making the right decision isn’t about rules—it’s about respecting how people interact with digital content. So, next time you add a button or a link, think about the journey you’re creating.