The Minute UX™ series: one-minute reads about website problems I’ve discovered in numerous UX audits.
Improper link handling can disrupt user experience and fail at accessibility compliance. I often see these three problems with internal and external text links and buttons on websites:
- The first mistake is links go to another website in the same tab, which takes users away from the original site and risks them not returning (reducing engagement—a goal for most websites).
- The next and more common problem is links go to external websites in a new tab without warning. Browser events happening without warning or with no user control violate usability and accessibility standards.
- A less frequent problem is links to pages within the same site that open new tabs. After multiple pageviews, the same website is open in multiple tabs (ugh!).
Here are my recommended guidelines:
- Open external links in new tabs and provide clear warnings to users beforehand.
- Keep internal links within the same tab.
To warn users that a link will open a new tab, I recommend both an “opens new tab” icon and an ARIA label (for accessibility).
The ARIA label is hidden html for people using screen readers who can’t see the icon. To experience the text similar to a person using a screen reader, play the short audio clip below. Toward the end you’ll hear the VoiceOver app read the “invisible” ARIA label saying that the link opens a new tab.
This is how my recommendations would look when applied to a button:
Both the text link and button examples use an icon from Font Awesome .
That wraps up Minute UX™ for this post!
Postscript: You can view the html I used for the ARIA labels and Font Awesome icons here. ARIA is complex and you should consult an expert for its proper application. If you write code, there are plenty of good resources available. Here’s a Beginner’s Guide on the Hubspot blog .
Hey John –
This is so useful! We’re trying to increase and improve our accessibility practices, and this is a great addition. One question: how does the inclusion of the icon work? Is there a separate CSS entry for links that include the ARIA label that automatically displays the icon?
– CB
Hi Chris,
First off, being a UX designer and definitely not a coder, I’m by no means an ARIA or CSS expert. With that caveat, I’ll try to answer your questions. (I welcome other readers to chime in or correct me.)
I used Font Awesome to add the icons, which means they act like a font and not an image, so there’s no alt tag for screen readers to use (here’s an article that might help). I have the Font Awesome plugin for WordPress which allows simple inclusion of icons via shortcode or standard Font Awesome syntax (which is what I used).
In the examples above I added the ARIA label manually, but after a bit of research just now I discovered that Font Awesome has built-in accessibility, which is…awesome! I recommend you refer to that support doc for details.
I included the ARIA label as simple html with no special CSS. This page shows the code.
There may be instances where CSS comes into play depending on your CMS, platform, or use case (here’s an example).
Happy to hear you are working on accessibility. Good accessibility for persons with disabilities = good usability for all users! (My accessibility post).
Best,
John
John,
Thank you for all of this! I love this format, btw 🙂
CB
Thanks, Chris, I appreciate the feedback. It’s harder for me to write short posts than long ones…as Blaise Pascal (or Mark Twain or Winston Churchill) said, “If I had more time, I would have written a shorter letter.” : )