A hyperlink provides clear visual distinction as a navigable element – to bring a user to another place or page – and offers key branding opportunities. It should be accessible and usable.
Links are elements that take the user to a different place - on the same page or another page.
<ul class="unordered-list">
<li><a href="#dolor-sit-amet">Dolor Sit Amet</a></li>
<li><a href="#lorem-ipsum">Lorem Ipsum</a></li>
<li><a href="#lorem">Lorem</a></li>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
</ul>
<a href="#back-to-top">Back to top</a><i aria-hidden="true" class="material-symbols-outlined wtw-digital-violet">arrow_upward</i>
Primary links are used for the title of the articles, solution names, or product names that are linked to their respective pages. For instance, the related service content matrix titles of the service names linked are primary links. The titles in the related content, such as the article titles, are standard links.
Secondary links are also link styles that are violet, but that are in the context of a paragraph. Secondary links do not have a caret and upon hover the color will change to darker violet and an underline will appear. Secondary links within copy are violet with a gray 1px underline. Upon hover the violet turns to the darker violet and the underline increases to 2px.
One example of a secondary link may occur in a paragraph as an in-body link.
Eyebrow links and text are informative. Think of them as “nouns” that define the type of content that is being featured. Examples include – “HR Software”, “Product,” “Article”, “Featured Video”. These tags are things that define the type of content. They are not “subjective” or something outside a standard description.
For example, eyebrow tags should not be names, dates, locations, etc.
Some modules that include eyebrow tags (this list is not exhaustive, but shows how this is across atoms, molecules, organisms…):
Call-To-Action (CTA) buttons are used to draw attention to actions that are not the primary intent of that page. CTA buttons are used in “See All Insights” in the Related Insights Card module. CTAs can also be leveraged to let users read more in-depth on the featured content cards in the featured content modules. CTA buttons are violet text, with copy that makes it clear to the user what action will be performed, along with a violet caret. Upon hover, buttons turn to a dark violet and the caret animates, shifting 10px to the right.
Link text should be specific for the user; it should be descriptive of the content or page that it represents.
If there is not enough space, and the link is using visual cues to create a correlation between the link and the content, then the link text must describe the action (e.g. “Read more”) and there must be appropriate aria-label attributes added to the HTML so that a screen reader can provide the needed information to the user.
aria-label attributes in order to satisfy accessibility requirements.On wtwco.com, links can be used to transition to another page in paragraphs of text or within lists of links. Link color depends on the link’s location: most links should render as the primary violet. However, links should be accessible against their background color, so occasionally links will render in primary white or primary black.