Micaela Avigliano

Mobile navigation

View all posts

Link or Button

Micaela Avigliano

Frontend and Accessibility Engineer

4 min read
Table of contents

Anatomy of a link and a button

Same shape on the page, two different elements underneath. What separates them is the attribute that gives each one its role, and what happens the moment it is activated.

Anatomy of a link and a buttonTwo elements drawn side by side. On the left, a link: the code line reads a href equals slash seeds, Go to seeds, closing a. Its href is marked as the destination — the attribute without which the element is not a link at all, only generic text — and the text between the tags is marked as the accessible name. Underneath, the rendered link is shown as underlined text, activated by the Enter key alone, and described as navigating to a new location and adding an entry to the browser history. On the right, a button: the code line reads button type equals button, Add to box, closing button. Its type attribute is marked as what the button does — button, submit or reset — and the text between the tags is again the accessible name. Underneath, the rendered button is shown as a filled control, activated by Enter or Space, and described as acting on the current page without changing the URL.link<a href="/seeds">Go to seeds</a>the destination.No href, no linkthe accessible nameGo to seedsEnterGoes somewhere.The back button undoes it.button<button type="button">Add to box</button>what it does:button, submit, resetthe accessible nameAdd to boxEnterSpaceDoes something here.The URL does not change.

What is a Link?

A is an interactive element that redirects the user to a new location which can be another section inside the current page, modifying the URL with a # parameter, or a new page. It can be used to download a file. Once activated, it takes the user to the URL set in its href. The browser records that navigation in its history, so the user can return to the previous page using the back button.

The elements needs the attribute with a valid or an pointing to a section inside the current page to have the semantic value of a link, otherwise it will be considered as generic.

<a href="/URL">
  Go to main page
</a>

It can only be activated by pressing the key Enter. If the key Space is pressed while the focus is on the link, the page will scroll down.

Screen Readers, generally, announce the links in the following way: Link, [accessible name of the link]. It is extremely important to provide a descriptive and correct accessible name to the element.

It is completely unnaceptable, a bad practice and goes against the native behavior of the element, forcing it to behave as a button by doing the following:

<a href="javascript:void(0)" onclick="openModal()">
  Open Menu
</a>
<a href="#" role="button" onclick="button()">
  Link with role button
</a>

If you need to do this, it means that you need a button

What is a button?

A is an interactive element that dispatches an action inside the page where it is located. It does not redirect the user to another place or location nor modifies the url. The actions that are being dispatched can be: open a modal, play a video, post a comment, etc.

The button needs the attribute with a value according to its action:

  • type="button": it is used when the button does not have a default behavior.
  • type="submit": it is used when the button sends information to a server.
  • type="reset": it is used to reset all the values of an input or inputs to its initial value.
<button type=”button” onclick="openModal()">
  Open Modal
</button>

It can only be activated by pressing the keys Enter or Space.

Screen Readers, generally, announce buttons in the following way: "Button, [Accessible Name of the button]". It is extremely important to provide a descriptive and correct accessible name to the element.

It is completely unnaceptable, a bad practice and goes against the native behavior of the element, forcing it to behave as a link by doing the following:

<button onclick="window.location.href='/'">
  Go to homepage
</button>

If you need to do this, it means that you need a link

Which one should I use: link or button?

  • Do you need an expandable section? use a <button> with the state aria-expanded and the focus should stay put.
  • Do you need to jump to a section on the same page? use an <a href="#section">. There is no page load, updated the url, lands the user at a destination.
  • Do you need to load more items into the current list? use a <button> and when the items load, the focus should be placed in the first item of the new items.
  • Do you need to redirect the user to a new location to read more about something? use an <a href="/destination">.
  • Do you need to open a menu? use a <button> with the states aria-haspopup and aria-expanded.
  • Do you need to play or pause a video? use a <button>.
  • Do you need to dowload a file? use a <a> with the attribute .
  • Do you need a card that leads to a detail page? use a <a> stretched ::after.

Focus Style for Interactive Elements

It is vital for keyboard and screen reader users to have a visual and logic focus on interactive elements. Never do outline: none without providing a focus style:

a:focus-visible,
button:focus-visible {
  outline: 4px solid #0066ff;
  outline-offset: 4px;
}

Resources

View all posts