Anchor link
Anchor links are a style option within the CTA component in AEM that should be used when a link leads users to content within the same page, sometimes referred to as in-page or jump links. Anchor links should be used sparingly and only on pages with lengthy content and should only be used if there aren’t other options to shorten, reorganize or rewrite content.
When to use
- For navigating up and down content within the same page
When not to use
- For navigating to another page or site
Anatomy
1. Icon: to help differentiate from other links and to indicate whether the link is moving the user up or down the page
2. Label: the label should include directional language as well as the name of the section the link is driving to
Demos & variations
On light backgrounds
On dark backgrounds
Behaviors
Mouse
Users can trigger an anchor link by clicking on it.
Keyboard
Users can navigate to an anchor link by pressing Tab and Shift-Tab. Users can trigger an anchor link by pressing Enter when the element has focus. Screen reading software will often add “in-page link” when reading an anchor link but screen magnifiers do not typically have this audio feedback.
Content
- Use directional language like “Go to” or “Back to” in the label to help the user understand how they’ll be moving within the page
- The label should also include the name of the section the link is driving to, this will help reassure users they have been moved appropriately and be able to orient themselves