Skip to Main Content

Accessibility Best Practices for LibGuide Content Creators

Links

Link Color Contrast | Avoid Ambiguous Text Links | Underlining Links | Use Stable and Friendly URLs | Concise Links | Opening Links in New Tab / Window | Resources

The guidelines related to proper link usage falls into multiple categories: Alt Text, Color Contrast, Use of Color, Navigation, etc. As such, the majority of the information about links has been consolidated onto this page.

Many users will be visiting your guide with the specific purpose of finding of link to a resource. Many of those same users will quickly scan through your guide to find the link and move on if it's not readily available. Because of this, and because of accessibility standards, links should not be difficult to find and understand.

This section of the guide is devoted to the various ways you can verify users can find and access the resources you have worked so hard to cultivate. We will specifically be looking at text-based links.

Link Color Contrast

Just like normal text, the color of link text and the background color must maintain a certain color contrast. By default, your guides will use the University-recommended link color "Globe" against a white background. In most cases, this default color palette should be left so that all users can differentiate between the text and background.

In the rare situation when you need to adjust the link text color and/or background on your guide, adhere to the same standards discussed in the tab Font Color. Remember, Tennessee Orange is NOT an option!

Best Practice:

Leave your link color set to the default, which is the color "Globe".

Avoid Ambiguous Text Links

Uninformative Links

Excerpt from W3C: Understanding Success Criterion 2.4.4: Link Purpose (In Context)

[Text links should] help users understand the purpose of each link so they can decide whether they want to follow the link. Whenever possible, provide link text that identifies the purpose of the link without needing additional context. Assistive technology has the ability to provide users with a list of links that are on the Web page. Link text that is as meaningful as possible will aid users who want to choose from this list of links. Meaningful link text also helps those who wish to tab from link to link. [1]

This means that you should avoid generic or ambiguous link text. Some examples to avoid include:

  • Click here
  • More info
  • Here
  • Read More

Instead, try to use phrases that will inform the user about the link's destination, even if read out of context. For example:

  • Course's Title
  • Article/Book's Title
  • Website/Webpage's Title
  • Document's Title

Web Addresses as Links

In general, you should also avoid using URLs as link text and instead use "human readable" text.

Excerpt from WebAim ©: Links and Hypertext: Link Text and Appearance

Web addresses, or URLs, present two types of challenges:

  1. Readability
  2. Length

URLs are not always human-readable or screen-reader friendly. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person. In most cases, it is better to use human-readable text instead of the URL. [2]

Example:

How easy would it be to read/hear, understand, and follow the following example?

https://libguides.utk.edu/c.php?g=998709&p=7229878

Using a friendly URL, which is discussed later on this page, is better.

https://libguides.utk.edu/test-site/example

But isn't the following human-readable example the easiest to understand?

LibGuides Test Page

Underlining Links

According to WCAG's Success Criterion 1.4.1 Use of Color: "Color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." [3] This includes using color alone to designate links. Typically, this is accomplished by underlining links.

However, there are some trends to move away from underlining text links, including links on the UT Libraries' LibGuides.

Excerpt from WebAim ©: Links and Hypertext: Link Text and Appearance

Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined. In body text, they may or may not be able to figure out which text is linked if the underline convention is not used.

Although users are accustomed to seeing links in the main content underlined, they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action. [2]

Note that the excerpt from WebAIM separates links into two categories: those found in the body of the text and those found elsewhere (such as lists of links and navigational items). In general, it is recommended that any links you add in the body of your guide's text be underlined. Any links that are clearly separated and designated as links do not need to be underlined. (For the purposes of LibGuides, these include lists of books, databases, etc.)

Best Practice:

Links that are included in the the text body of your guides should be underlined. Note: Underlining links is the most universal standard; however, other highlight methods that are not color-specific are also acceptable (using a different font size than other standard text, using a different font type, etc.)

Use Stable and Friendly URLs

Permalinks

Sometimes URLs change. This can be the result of a site update or it can be because of the difference of being on- or off-campus. Whatever the reason, you should always use permalinks on your guide if they are available.

Add Database

One of the most frequently used items librarians add to their guides are links to databases. And LibGuides can migrate all of the stable database information (title, link, description, etc.) using the Database option.

  1. Open the Add / Reorder drop-down menu.
  2. Select Database.
  3. Type in the first few letter of the database to display it in the list and select the database.

Screenshot of LibGuide's Add / Reorder drop-down menu open with the Database option highlighted.

Tip:

Using the Add / Database option built into LibGuides will keep your database's link and description up-to-date if any changes occur.

Friendly URLs

Create friendly guide and page URLs so that users can easily navigate to your guide. Plus, if you need to change a link, using a friendly URL makes this process easier than changing the link everywhere you've used it.

To create a friendly URL, click the Pencil icon associated with Guide URL and Page URL at the top of the LibGuide editing page.

Screenshot of LibGuide editing page with Guide URL and Page URL highlighted.

Concise Links

Excerpt from Results Repeat: Navigating ADA Compliance and Linking

A link should usually have no more than 100 characters and be easy to understand. Don’t confuse and annoy screen reader users by using “block level” links, e.g. linking an entire paragraph of text. The screen reader will read the entire content area as part of the link, including all elements and tags contained within, as if it were part of the link itself. [4]

Opening Links in New Tab / Window

For many years, the standard on the web was to have external links open in a new tab or window. However, this standard has been an item of discussion in recent years. The discussion centers around the fact that users should be notified or altered when they are going to be taken away from their current window.

Why is this an issue? There are several issues with an unexpected window/tab opening:

  • If the user is unaware they have been taken to a new window/tab, they may attempt to use the Back button to return to their previous page. However, the button will not function.
  • The new window/tab may unexpectedly take focus away from what the user was reading or doing.
  • If the user was on a secure site and the new window/tab is not secure, the user may be unaware of the security change.
  • If the current site was accessible and the new window/tab is not, the user may become disoriented by the change.

Excerpt from WebAim ©: Links and Hypertext: Hypertext Links

...nearly everyone agrees that users ought to be alerted when the link does not open in the current window or frame. The accessibility issue is that some users can get confused with the new windows or tabs. Newer screen readers alert the user when a link opens a new window, though only after the user clicks on the link. Older screen readers do not alert the user at all. Sighted users can see the new window open, but users with cognitive disabilities may have difficulty interpreting what just happened. Then when the try to click on the Back button in the browser, nothing happens, because there is no previous link to go back to in a new window or tab. [5]

So, what can be done to mitigate this issue? Surely the solution is not to have all links open in the current window.

Although some would like to ban the usage of opening new windows or tabs entirely, there are some better solutions that involve informing the user of the change without requiring they click on the link. (Many of these solutions work best when the link is not in the middle of other text.)

  • Add a warning to your link text
    • Read more about Theatre History (opens in new window).
  • Add an icon that indicates "external link"
    • Read more about Theatre History .
    • The code to add this icon is <span aria-hidden="false" class="fa fa-external-link"></span>
  • Use CSS to provide a warning as text that appears when hovered over or verbally to screen-readers only
    • These options require a bit more work directly in the code. If you would like information about using these options, contact a member of the LibGuide Working Group at ut_libguides@live.utk.edu.