How to make external links user-friendly and accessible

Have you ever thought about how to make external links user-friendly and accessible?

Hyperlinks serve as the web’s connective tissue, ubiquitously woven into the fabric of online content. Their pervasive nature means that the design and operational aspects of hyperlinks, particularly external ones, typically escape our attention. Yet, as we delve deeper, we uncover the significance of their design—a critical element in the user experience.

Most external links should open in the same tab, but there are occasions when opening a link in a new tab makes the most sense

As an example, if a user is filling in a form, and navigates away from it, they’ll lose unsaved or all of their progress. External links that are on the form page or part of the form could open in a new tab to ensure that the user doesn’t lose their progress.

Accessible design and code for external links opening in a new tab

Here’s the HTML for a link with an icon and text that is visually hidden off the page. I’m not including the CSS for this as I’m sure you already have your own visually-hidden styling, so feel free to adjust the class names in the below example to suit your own project.


<a href="#0" target="_blank" rel="noopener">
  Example link text 
  <i aria-hidden="true" class="icon-external"> 
  <span class="visually-hidden">Opens in new tab
</a>

Hopefully this acts as a basic starting point to help you to make external links user-friendly and accessible