Links

Hyperlinks are the foundation of the internet. It's important that they are reliable, relevant, and understandable.

Common link problems

Vague or non-descriptive links

Link text needs to be descriptive. People need to know what they're going to get if they click on a link.

A good yardstick to use is that if you were to read the text of the link aloud to someone sitting next to you, they would be able to tell you what would happen if they clicked on it without knowing any of the context of the link.

Links that are just the words "read more" or "learn more" aren't just inaccessible for people with certain disabilities, but they're also vague and unhelpful for anybody.

"Click here" is also a common offender. It's a specific action; it is device and ability dependent. If you're on mobile, you're not "clicking" because you're not using a mouse. If you use a support tool like a screen reader, keyboard, voice activated device, "click here" is also inaccurate.

Duplicate or non-unique links

You shouldn't have multiple links on the same page that say the same thing. Someone relying on assistive technology like a screen reader won't be able to differentiate one link that says "download syllabus" from the other seven "download syllabus" links on the page. In this case, including the class name and section number would allow anyone, including people not relying on screen readers, to quickly identify which link had the information they wanted.

Best practice

Good context

The link text should have all the context someone needs to decide if they want to click on it.

While something like "download syllabus" is better than "click here" or "learn more", it's usually better to rewrite a sentence or phrase to make the link text descriptive and active voice.

Example

Since having fake links on a page would actually break a lot of these rules, the example links use bold text in quotes instead of being blue and underlined.

Students should fill out the “form” before coming to their advising appointment.

In this example, just the word “form” is only barely understandable out of context. Better link text could be “major advising intake form” instead.

Call To Action

All the rules about links also apply to the Call To Action element.

The Call To Action element is designed to stand out among the other visual design elements of the campus web template. It is frequently misused, however.

• DO use a strong verb that says the action you are calling the user to take
• DON'T use generic text like "read more" or "learn more"
• DON'T use multiple Call To Action elements near one another
• DON'T use a Call To Action just to navigate to other pages — component headlines should be links in that case instead