Skip to main content

hero banner

Links

A text link completes an action by taking the visitor to different content—a web page, a form, a PDF, and so on.

Usage, Best Practice, and Accessibility

Example

This is a text link. This is the kind of link that appears in body copy or lists.

Link: Emphasis 

An emphasis link is used outside of your body content, similar to how you'd use a button.

Usage

Highlight the text to be linked in the WYSIWYG. Click the link icon Folwell link icon in the WYSIWYG toolbar and enter in the url to link the content.

Best Practice

  • Good links should be descriptive and describe what is being linked to.
  • Linked materials should provide value to the reader.
  • Easy-to-understand links will make the page more scannable.
  • Cross-linking to internal content strengthens the overall search-optimized value of a website.
  • You should indicate if the link opens a file by including the file type in parentheses after the link (e.g., DOC, PDF, XLS, etc.).
  • According to Neilson Norman eye tracking research, people mostly look at the first two words of a link.

What to Avoid

  • Don't use "click here" or "read more" as links, because they are vague and/or often duplicated on the page, making the context hard to grasp quickly and causing accessibility issues.
  • Poor link labels hurt your search engine ranking.

Accessibility

Descriptive link text is more accessible for people who use screen readers to jump from link to link within a website.

The Folwell link design and coding addresses the following:

  • The color maroon chosen for text links passes the AAA color contrast test on the white, off white, light gray and lighter gray backgrounds included with the theme.
  • Underlines on links address usability—underlined content within the body of a web page is understood to be a link.
  • Visual cues, such as mouseover effects and right-pointing arrows, help indicate when maroon text is a link.
  • A visited state style displays once a link has been clicked.