Accessible links

Making links in your site might sound simple, but there are some ongoing discussions on how to make them more user-friendly and accessible. Here are some best practices for links on your site.

Tell me where I’m going

Always describe where the link is going. Don’t use terms like “click here”, since they aren’t accessible or effective for Search Engine Optimization (SEO).

Here’s what a page with a list of “click here” links appears in assistive technology:

Further reading on links: https://moz.com/learn/seo/url

Opening in same window vs new window

Over the years I’ve heard differing opinions on how best to do links on websites. Obviously links that go to other pages within your site will go directly to that page, but should links that go offsite open in a new window?

Marketing folks usually say yes, that way the user doesn’t lose your site while accessibility folks say opening in a new tab disables the back button so it’s not best practice for accessibility.

There is a middle ground

You can tell users that a link is opening in a new window. Example:
Made by KunStudios

This is created by adding the following code:
Made by <a href=”https://kunstudios.com” target=”_blank” rel=”noopener”>KunStudios

Here’s a breakdown of what’s happening step by step:

• target=”_blank” is the code that makes it open in the new window (WordPress does this for you when you select “open in new window”)
• rel=”noopener” is to protect your site from performance and security issues (WP now offers a choice to add this when making links). More info about cross-origin destination anchors.
• <span class=”visually-hidden”>Opens in new window</span> tells screen readers that the link is opening in a new window, while hiding the text visually.
• <i aria-hidden=”true” class=”fas fa-external-link-alt”></i> This adds an icon visually, indicating that the link will open in a new window. The “aria-hidden=true” makes sure the icon isn’t read out by screen readers.

I keep this code handy so I can copy and paste it whenever I’m making links that go offsite.