Button or Link - Which to choose?

When building your website you often will be faced with a choice between using a button or link (a). In some cases a link is the clear choice when you need to link to another page, but what about in page features like ajax request, expand/collapse, and so on. Let's take a look at the uses for each and see the benefits of choosing one over the other.

• Button
• Link
• Why is the distinction important?
• Conclusion

Button

The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS. - Mozilla

In other words a button is used for in page actions. Some example may include:

• Expand/Collapse
• Opening a modal
• Taking action to make an ajax request to update data
• Submitting a form

<button type="button">Add Comic</button>

Link

The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it. - Mozilla

<a href="https://google.com">Google</a>

Why is the distinction important?

Screen readers and keyboard navigation have slightly different handling of buttons and links. If we deviate from those rules and guidelines we can be causing frustrations for our users that rely on those tools. Below are some examples of the differences:

• When a screen reader loads your site it will count the number of links and lets the user know.
• When you focus to a link a screen reader will read the link content and then say "link".
• Links are activated on enter.
• Buttons can be activated with space or enter.

Users who are familiar with screen readers, keyboard navigation and other tools are relying on us to follow a set of rules and guidelines so they are able to navigate our site as a visual user or mouse user would.

For example: Let's say you use a link instead of a button the user might be inclined to the spacebar to perform the action, but it won't work. This could cause frustration and could lead to them leaving your site.

Conclusion

It's important to use semantic markup so we can provide the best possible experience for all users. If for some reason you can't use a button you can use the aria-role of button so screen readers with treat the element as a button. However, it will be up you to implement the functionality to ensure the behavior acts as a button.

Thanks for reading. Be on the lookout for more accessibility tips.