Refine By

Links

  • Contents:

Links are text that:

  • Triggers an action on click, touch, or activation
  • Typically appear as simple text without any borders

Guidelines

Text links pattern on webOpening links (especially external links) in new windows or tabs doesn’t take users away from the page, task, or flow they’re on. However, this behavior can also:

  • Complicate returning to the original page, tab, or screen
  • Deny users the option of how to view content
  • Disrupt the workflow for users of assistive technologies

When you code links to open in a new window, mark the link with a popup icon or otherwise alert users that the content will appear in a new window or tab (or open in an external app).

Always open links in a new window or tab when the linked content:

  • Is located outside of our domain, i.e., not on Hilton.com
  • Requires a separate application to view, e.g., PDFs

Distinguish links from regular text with semantic and style elements like color and underlines.

Using color can effectively demonstrate the various possible states of links:

  • Default state
  • Focused state
  • Hover state
  • Visited state

Use buttons instead of links for primary actions, like form submission.

Accessibility

  • If you just want to open another page, use a link. Save buttons for when the user needs to initiate something – form submission, displaying modal content, revealing hidden content, or to control an element (e.g., navigating carousel slides or video controls).
  • Use semantic elements, not styling, to create buttons. A well-crafted button ensures that users can activate the command from the keyboard using both the spacebar and the enter key without additional coding necessary.
  • Style the button element with CSS. Use proper color contrast – this includes contrast between the button and the background it is placed on, as well as the between the button text and the button itself. Note: If a button is inactive, the disabled state does not need to meet the contrast ratio of 4.5:1. Once active, however, sufficient contrast is required.
Read More

Considerations

  • A button should only be used to initiate an action – such as submitting a form, triggering modal content or revealing hidden content, or as a form of control (like a button to move to the next or previous slide in a carousel or to start to play a video). If the action is simply to open another page, a link should be used.
  • Use semantic elements rather than styling to create buttons. The role of button ensures that users can properly activate the command from the keyboard using both the spacebar and the enter key without additional coding necessary.
  • Style the button element with CSS. Ensure that proper color contrast is used – this includes contrast between the button and the background it is placed on as well as the contrast of text added to the button. Note: If a button is inactive, the disabled state does not need to meet the contrast ratio of 4.5:1; once active, sufficient contrast is required.

 

ARIA Roles, States, and Properties

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jul. 30 2019 8:46pmElla IpUpdated and added open as new window/tab guideline.
May. 03 2017 9:26pm Initial content entry.