Skip to page content

Links

Textual links (and surrounding context, if necessary) or graphical links with text embedded (which must be included in the alternative text) should be written in active voice, typically using a call-to-action.

Basic Link Standards

Most of your links will be basic (e.g. link to a page or document), so your link text should do the following:

Make sense outside of context

Screen readers allow users to scan the webpage without reading the entire page. Make sure your link text makes sense in this respect.

Bad Link Examples
Bad Link Text Why is it Ineffective?
Link It provide no information whatsoever of what the link is about or where it will take you.
Here It provide no information whatsoever of what the link is about or where it will take you.
Read More You have an idea that the link will go to more information about something, but you don't know what that something is.
Learn More You have an idea that the link will go to more information about something, but you don't know what that something is.
Go Here You know it is a link to something, but you don't know what that something is.
Click Here You know it is a link to something, but you don't know what that something is. You are also confused as to what you can do with this link, since your abilities and/or video may block you from using the click action of a mouse. You may have to use another action, and it would be tedious to describe all of them (e.g. swipe, blow, hit, wink, touch).
This You know it is a link to something, but you don't know what that something is.
For More Info You have an idea that the link will go to more information about something, but you don't know what that something is.

Good Examples:

  • Read more about triggers for seizures
  • Register now for web content management system training
  • Application for Accessibility Training (January 30)

Sometimes you don't have room on the webpage to provide all that text. Depending on your technical knowledge. you can contact Web Services for assistance in hiding text or add the code in on your own. This code is screen reader friendly code. It hides the additional text your visual users don't need, but screen readers include it while reading the link text. In those case, "Read more" types of textual links can have hidden text like "about triggers for seizures".

Be readable and understandable

We often forget that when we add links to a webpage, we don't need to visually show the web address. Those are only required on print materials and publications. On the web and other electronic documents (as long as you have an internet connection), link text in the form of a web address can be very confusing if not exceedingly annoying.

These can be resolved by either removing the web address instructions, if they are already on the page, or replacing the web address as link text with the title of the page and linking directly to the page desired. This clarifies the location and improves usability, since they don't have to navigate (or type) anywhere else for the link to information.

Bad Link Examples
Bad Link Text Why is it Ineffective?
http://bit.ly/83de85rfe4 It provide no information whatsoever of what the link is about or where it will take you. Plus, it is just a bunch of letters and numbers being spelled out, character by character.
http://www.tarleton.edu/accessibility/standards/links.html You have an idea where this will take you, but you were burdened with the character by character and word by word reading of the text.
Meet expectations

Users with cognitive or visual impairments and disabilities need links across the website, both in navigation and in the main content, to consistently:

  • behave (e.g. function in a commonly known fashion)
  • display on the page (e.g. indicating what type of link)

When expectations are changed, this causes confusion (see a light-hearted explanation of user expectations, starting at 1:49 in the video). Our goal is to reduce that confusion, known as the principle of least astonishment.

For example, users expect to be able to control how the links they select appear in their browser. They are familiar with their device's functionality and their own habits. However, when a user opens a new tab, that removes navigational options.

Whenever possible, make sure your links do not force your users to open them in new windows/tabs of their browsers. This decision should be controlled by the user, not the designer, as menu and keyboard options are available on browsers to allow the user to make that choice.

Confusion and usability issues for all individuals, no matter their abilities, get amplified when documents (e.g. PDF, DOC, XLS, PPT) are in the main content or navigation.

In the main content of a webpage, Tarleton's new responsive template automatically identifies types of documents, so users know to expect their browser to open a document1:

  • in the same tab of the browser
  • in a new tab or window of the browser
  • in the application installed on their device (if it is installed)

Exceptions are described below for special link types, like email addresses and phone numbers.

As a general compliance rule, documents are not as accessible as webpages or need far more effort to become in compliance, so this change in environment and access should be used only when absolutely necessary. If the content cannot be displayed and maintained in a webpage to function correctly (e.g. web form, résumé), then a document can be used1 (see Nielsen Norman Group's web usability article Can Hated Design Elements Be Made to Work?).

  • 1Note that if the user does not have the software or application installed on their device to properly use the document, then they also do not have access to that information. This is why PDF's are the preferred document to link to, since they are the most compatible across devices and browsers.
  • The document is self-contained; it may have its own table of contents and/or links, but it is not the same navigation as the website the user was previously on. This removes the user from the website's navigation and requires them to determine for themselves where they are and how to get back.
  • TAC 206.70 requires websites to now support the "variations in internet connection speeds and emerging communications protocols and technologies," an accessibility guideline that affects individuals of all abilities. Documents are often inaccessible due to file size because users are not willing or able to wait for the documents to download to their device. They must be fully loaded on a user's device before the user can open and view them.
    • Webpages open much faster than documents with similar content.
    • Tarleton's responsive template allows portions of the page to load and special parts, including images, to load later as desired by the user as they scroll down the page.

Link Types

Most of the links will identify the type of content they are automatically, such as documents, however, some special types of links must be written a certain way to display correctly and function as those special links:

Email Addresses

When email addresses are used properly, your users can send emails to someone from their email clients, especially on mobile video.

To add the link, email addresses must start with the protocol "mailto:" followed immediately by the email address. No spaces should appear before, in between, or after the protocol or email address itself. Doing so adds an unusual %20 to the address which makes it unsendable to your intended recipient.

Example protocol: mailto:someone@tarleton.edu

The text on these links (what your user accesses to open their email client) can be either the name/title of the recipient or the email address itself, preferably their name/title.

Example result: Email Someone Cool

Phone Numbers

When phone numbers are used properly, your constituents can use their mobile phones or phone applications (e.g. Skype, Jabber) to call directly from your web page.

To add the link, phone numbers must start with the protocol "tel:" followed immediately by the national code (e.g. US starts with "+1"), followed by the area code and number without any space, hyphens, or parentheses.

Example protocol: tel:+12549681819

Example result: Call 254-968-1819 for further assistance

References

Guides and How-To's

Guidelines

Simulations