How to let all your users know what to expect when they click a link (#snippet)

Recently, I watched the talk Writing even more CSS with Accessibility in Mind by Manuel Matuzović. In this talk, Manuel shares a lot of precious accessibility tips and tricks.

My highlight was a nifty trick that you can find in the article Tips on Making Sure Hidden Content is Accessible (or Not!) by Scott Vinkle. It advises on links that open a new window or tab and explains how to make these accessible.

Opening external links in a new tab is a common practice. You can add the target="_blank" attribute to a link, and it forces a link click to open the target URL in a new tab.

If you've seen "non-techy people" navigating the web, you might share my opinion that this is not a great approach. Many people don't understand the browser tabs concept, and I've seen my parents struggle to understand why the back button doesn't work after they clicked a link many times. This pattern is not great, but we should at least give users a hint of what will happen when using this pattern.

For the visual case, adding an icon or some other clue with the content property in pseudo-elements (::before / ::after) is a typical approach to solve the problem. And while it helps sighted users, it doesn't cover the whole story.

Visual clues and hints placed in the content property are usually not accessible to assistive technology like screen readers. There might be a solution someday, but today, the browser support of alternative text for the content property is not great.

So what should you do? Let me share Scott's very smart approach. He recommends to place hidden elements somewhere in your document. These elements include descriptions of what could happen when a user clicks a links. Additionally, the elements include id's which makes them referenceable by aria-describedby.

<div hidden>
  <span id="new-window-0">Opens in a new window</span>
  <span id="new-window-1">Opens an external site</span>
  <span id="new-window-2">Opens an external site in a new window</span>
</div>

In your tab-opening anchor links you can then point to the hidden elements via their id to make the link more describtive to assistive technology.

<a
  href="https://mysite.com"
  target="_blank"
  rel="noopener"
  aria-describedby="new-window-0"
>
  My site
</a>

Combining the link's inner text and the hidden action description will give screen reader users more information. They will hear something like "My site — Opens in a new window".

And to not forget sighted users, you can now use a CSS attribute selector to style the link and give a visual hint of what will happen.

[aria-describedby="new-window-0"] {
  /* add a visual clue here */
}

Well done, friends! ? That is a brilliant approach! Big thanks to Manuel for giving an excellent talk and Scott for writing this pattern down initially!