Links

Links are hyperlinked text that take you to another page or trigger something to happen on the current page (e.g. open a layer).

Design Specs

  • Sears
  • Kmart

Desktop/Tablet/Mobile

  1. Link text is Open Sans Regular and #005ccc
    • Desktop: Link text is 15px
    • Mobile: Link text is 14px
  2. The hover state of link text is Open Sans Regular and #304e88
    • Desktop: Hover state of link text is 15px
    • Mobile: Hover state of link text is 14px
  3. Link text on a dark background is Open Sans Regular and #ffffff and the link text is underlined.
    • Desktop: Link text is 15px
    • Mobile: Link text is 14px
  4. Link text in a sentence or paragraph should be underlined.

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Desktop/Tablet/Mobile

  1. Link text is Open Sans Regular and #a61111
    • Desktop: Link text is 15px
    • Mobile: Link text is 14px
  2. The hover state of link text is Open Sans Regular and #a61111
    • Desktop: Hover state of link text is 15px
    • Mobile: Hover state of link text is 14px
  3. Link text on a dark background is Open Sans Regular and #ffffff and the link text is underlined.
    • Desktop: Link text is 15px
    • Mobile: Link text is 14px
  4. Link text in a sentence or paragraph should be underlined.

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Mobile

Desktop/Tablet

Mobile

Desktop/Tablet

When Do I Use This?

Use links to provide a user with a way to access more information related to the text they click on.

Usage Guidelines

1. Touch Friendly

Make sure that the padding around each link makes them touch friendly for people on touch devices.

Link with correct padding highlighted.

Link with insufficient padding highlighted.

2. Rollover State

Links should have a rollover state when on white or grey background (#EEE).

Link with a rollover state.

Link without a rollover state.

3. Underline On Colored Backgrounds

Links on dark color or other background where blue doesn't work should be underlined by default.

Underlined link on colored background where a blue link doesn't work.

Link with no underline on colored background.

4. Capitalization

Text CTAs, such as shop now, see all, should be all lower case. Visual navigation links, Left hand navigation links, Product Name links should all be Title Case

CTA link in all lower case.

CTA link in all caps.

ADA Compliance

WebAIM Accessibility standards advise that “users must be able to navigate to and select each link using the keyboard alone. In most browsers, the Tab key allows users to jump from link to link, and the Enter key allows users to select a link. If the only way to access a link is with a mouse, the link is unusable by people who cannot use a mouse.” Source: WebAIM: Links & Hypertext

To ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors, there are two additional requirements for body text links that are not underlined by default. The first is that the link text must have a 3:1 color contrast ratio from the surrounding non-link text. Color contrast tool.) Second, the link needs to have a "non-color designator" on both mouse hover and keyboard focus. Source: WebAIM: WCAG 2.0 Checklist

Text Link Accessibility Best Practices (Source)

  • Link text must make sense out of context. Using descriptive link text detailing the destination is valuable for users that rely on screen readers.
  • Links need to be long enough to convey the purpose of the link and no longer. Links should be as concise as possible without sacrificing meaningfulness.
  • Links should never be empty. They must always contains text or images with alternative text. This can be very confusing for keyboard and screen reader users.
  • When images are used as links, the alternative text performs the function of link text. The alternative text should convey the content of the image and the function of the link.
  • Links should look like links, and nothing else should.
  • Ensure that hover and focus effects can be activated by either the mouse or the keyboard. In CSS, this means using both the :hover and the :focus pseudo-classes.

Rationale

Links are used to provide users a way to access more information and a way to break up lots of information into digestible pages.

Research

Nielsen Norman Group "Guidelines for Visualizing Links"

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

view article

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.