Links are text that:
- Triggers an action on click, touch, or activation
- Typically appear as simple text without any borders
Opening 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
- 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.
- 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
|Date/Time of Change||Who Made the Change||Change Details|
|Jul. 30 2019 8:46pm||Ella Ip||Updated and added open as new window/tab guideline.|
|May. 03 2017 9:26pm||Initial content entry.|