Anyone who lives in this day and age probably already knows how to create a link. But, what if you could literally create the best links, ever? Would you want to do that? Why?
- More people will know where your links go
- Your links will be understood by everyone, even users with disabilities, users on screenreaders or using other assistive technologies (see: accessible links, accessibility, universal design)
- More people will click on your links
And since we all want more people to click on our links (because, why else would we be creating them?) let's get into the steps to ensure your links are, literally, the best.
(Before we do that, perhaps you instead were looking for the technical "how-to" create a link in our CMS.)
How to make the best links
- Make the link self-descriptive
- Make sure it can stand on its own
- Fit it within the surrounding writing of the paragraph
- Describe and/or include most of the page it links to
And just for fun...
How to make the worst links (some examples)
Now, would you click on any of those links in the "Worst Links" list? Probably not. We can't be confident where they might take us.
Make your visitor confident that the link they're following will take them where they want to go.
And further on this topic, if someone with a screenreader or someone who's sight-impaired is moving through your content looking for a specific link, they will only be seeing and reading the links alone, without any of the content around it. This means your links need to be self-descriptive (that's #1) and that also means, you may need to edit your copywriting to make this work.
Here's a bad example
The 4th Annual Content Developers Buffet Breakfast is coming up. Click here to register.
To ram this point home, here's how a screenreader would display this sentence:
Would you "click here"? Again, probably not.
So, raise your right-hand and pledge here and now to never, ever create a link that says "click here" ever again. (Not to mention that over 50% of your visitors are on their phone or tablet, and soon the verb "clicking" will never be used again in the realm of the computer...)
Here's a good example
The 4th Annual Content Developers Buffet Breakfast is coming up. Please register for the buffet by following this link.
Then, imagine this link is read all on its own. Would you feel confident following the link? Maybe... Let's see if we can do better.
Here's a best example
The 4th Annual Content Developers Buffet Breakfast is coming up. Would you like to join us? Please register soon for the Content Developers Buffet being held on November 19th.
Let's see if this holds up to our rubric. First, let's see the link on it's own like a screenreader would:
Please register soon for the Content Developers Buffet being held on November 19th.
Now let's check our rubric
- Make the link self-descriptive YES!
- Make sure it can stand on its own IT DOES!
- Fit it within the surrounding writing of the paragraph IT FITS EVEN!
- Describe and/or include most of the page it links to IT'S DESCRIPTIVE!
I think we did it!
Let us know if you have any questions by submitting a support ticket.
(And yes, sometimes you can make the entire sentence a link! Think about how easy that'll be to follow on a phone screen!)
Do you have more ideas for our "Best Practices" series? Let us know by submitting a support ticket.
Advanced ideas on links and accessibility
Screen readers will read links out of context.
- They need to be clear
<a>
elements. - Try to avoid using different link text to refer to the same destination.
- Provide a valid link destination in the
href
attribute to ensure links function properly even with JavaScript turned off. In particular, you should avoidhref=""
orhref="#"
. The "#" symbol is used as a "fragment identifier separator", which means its intended purpose within thehref
attribute is to precede a string of text that identifies a fragment within the page (a named anchor or an ID on the page). The use of "#" as the hypertext reference essentially means the anchor points to nothing. In some browsers this may "point" to the entire document or to the top of the page, and this will cause an unexpected shift in focus. - New windows (
target="_blank"
) can be confusing to assistive technology users because they cause an unexpected browser action. They can be especially problematic to users of screen enlargers — who view only a small portion of the screen at a time — because the new window may open off of the viewable area and can cause the user to scroll the viewing area to find the new window. If a new window must be opened, notify the user that the new window is about to open.
Good Examples
<a href="http://tinyurl.com/c3z77jt">resident microbes in the human body</a> <a href="http://www.deque.com/training"onclick="window.open(this.href); return false;">Deque training (opens new window)</a> <a href="http://www.deque.com/training"onclick="window.open(this.href); return false;">Deque training <imgsrc="images/template/new-window.png"width="13" height="13" alt="Opens in new window" class="noborder"/></a>
Bad Examples
<a href="http://tinyurl.com/c3z77jt">click here</a> <a href="#">Here</a>
Want to see this in action?
Re-watch this video segment from our Basic Web Editing training video.