PSG Studio

est 2005

Exploring 3 Aspects of a Good Link

|

Links are what make the web what it is. This humble connector of pages within a site and to the vast internet beyond have completely changed the world as we once knew it. They are simple to create and yet it is challenging to make a good link.

Why & What makes a good link?

A good link is one that is accessed with the same expectations and experience by everyone. This non-exhaustive list includes site visitors who read every word closely, an individual skimming on a mobile device, those who utilize a screen reader, and a non-human site visitor such as a search engine.

I know I haven’t always accomplished that for my own sites and those I’ve worked on. In this and future posts I’ll share how I’m changing what I do, why I’m doing it, and the resources I’ve found to teach me along the way.

How do you create a good link?

It needs you to pay attention to three aspects:

  1. Content: the words surrounding it
  2. Style: its formatting
  3. Behavior: what happens when it’s clicked or selected

Quick Intro to Link Structure

A link is wrapped in a HTML tag, described with anchor text, and has a target link. Today it is also often styled by CSS, using a class for formatting. A link will look like this:

<a class="link-style" href="http://example.com">example link</a>

HTML tag: <a>

Target link is set by the href attribute: “http://example.com”

Anchor text: “example link”

CSS styling: described by the class “link-style”

Aspect one – Content – Avoid “Click here”

Why should you avoid those tempting declarative words “Click here”? The words you choose for your link, your anchor text, can influence your search engine results as well as tempt your reader to click that link.

A link written that shares relevant content will allow the reader to continue to scan and process when they’re foraging for information. We often hear that no one reads anymore. The way we read webpages differs depending on motivation and the reader’s goal! There will be some who read every word and others who will scan in an F-shaped pattern. Writing your links for different types of readers will make your site more useful.

Learn more:

It should be obvious where your links are within your text, this is accomplished with styling, through CSS. Blue is often a default color for a link. Since practically the beginning, a hyperlink is underlined.

Do you need to both underline and use blue? I think it is a good practice to provide contrast in two forms, color and style. I am embarrassed that I hadn’t known until drafting this post that WCAG 2.0 suggests in addition to something such as an underline, the color should be at a 3:1 contrast ratio between link and non-link text.

Yikes! How do you figure that out? There’s a formula: (L1 + 0.05) / (L2 + 0.05), whereby L1 and L2 are the relative luminance of the lighter and darker color respectively. Please, no need to stress about math, there are several tools to help you calculate it. WebAIM’s Contrast Checker and the Contrast Checker by Acart Communication are two websites that provide this service.

Initially, body text on this site was configured to color #000 and links with #4e5a66. That created a 2.97 contrast ratio, so close but not quite there! Changing the link value to #576471 boosts it to a 3.46 contrast ratio. I hope this is a step forward in usability. I know there is more I can do to improve this site.

Learn more:

You can change the default attribute behavior of a link, the most common is to have it open in a new window or tab. Many of the site owners I work with have that common request, so users won’t leave their website. While doing so is often a user preference on a desktop/laptop environment it’s very disorientating for screen readers. It is also frustrating on mobile devices where tab management works differently.

I know I’ve been guilty of this even though a decade ago I knew it was a bad idea (see The Top 10 Web Design Mistakes of 1999)! When the method for adding links improved within the WordPress editor, I began to use it instead of writing my posts directly in HTML. I found that toggling the “open link in a new window” became my default behavior for no reason other than I prefer to open my links in new tabs when at my desk! It took browsing on my tablet to have me recognize how frustrating it makes viewing a website! I can choose to open a link in a new tab/window or not and that should remain my choice and not be forced upon me.

Another behavior to keep in mind, when you interact with a link, it’s expected that it will go to another webpage. If you are instead linking to a word document or PDF, it’s a good practice to state what kind within the link. If there is a reason to open a new window, such as for a newsletter subscription signup form, you can also indicate this with an icon and invisible off-screen text.

Learn more:

Conclusion

I hope this post explains why it’s important to pay attention to the content, formatting, and behavior of links in your webpages.

Additional Resources: