EN

Hyperlink

A Hyperlink, or anchor tag, is a web element that links to another location, allowing users to navigate between pages or to specific content within the same page, often displayed as underlined text or a distinct visual cue.

Introduction

As part of the UAE Design System, the hyperlink component is automatically styled for standard links (anchor tags) within the content using the primary color, also applying the default styles for hover, active and visited state.

The hyperlink is a component designed to style standard links appearing within the content with the primary color and provide an animated underline effect on hover. It encourages the use of descriptive links with title elements for accessibility.

Additionally, the component offers variations that are used to style an anchor tag based on it's purpose and position within the page.

Visual representation

The following is a visual representation of an anchor / hyperlink in use along with it's code usage.

Attributes to be included

A few things to highlight regarding placing anchor tags within your content.

  • When placing a hyperlink/anchor tag within your content, it is quite possible that you may be linking to an "internal" or "external" page. You may also be linking to a resource that is not a page - such as a PDF file.
  • When placing an external link, it is advisable to add ` rel="noopener noreferrer" ` to the anchor tag. According to Mozilla Developer Network (MDN), the ` target="_blank" ` attribute "now implicitly provides the same rel behavior as noopener". We still recommend adding the "noopener" rel attribute on external link from a security stand point to ensure that there is no scope for assumptions on behaviour.
  • The ` noreferrer ` attribute masks your referral links in destination analytics. It protects your site’s information from being transferred to the website your users are navigating to. As a result, this causes the links to appear as Direct Traffic in Google Analytics, rather than Referral Traffic from your specific domain. If for security reason's you do not wish to display your domain in the analytics of another website, then include this attribute.
  • Adding the ` nofollow ` attribute to a link allows you to link to other websites without appearing to approve their content or perspective. According to Google , this attribute should be used "for cases where you want to link to a page but don’t want to imply any type of endorsement, including passing along ranking credit to another page".

 

Learn more about Search Engine Optimisation practice on link for website.

Code structure

The following is the basic code structure of a hyperlink.

<!-- A standard link -->
<a rel="" title="... descriptive text ...">
	... Button label text ...
</a>
<!-- A block link -->
<a rel="" class="aegov-link" title="... descriptive text ...">
	... Button label text ...
</a>

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Since the purpose of the hyperlink is to navigate, the style to apply for a link depends on where you intend to place it. The following variations may be used for a hyperlink.

Block CTA link with icon

The CTA link is a block element, and must be used as an inline hyperlink. The purpose of this variation is to use the link to navigated to another page based on the context of the element where it is placed.

For example, if you have a media card that provide the snippet of a press release, and you wish to place a hyperlink towards the end that is a call to action for the user to "read more", then you may use the block link variation.

Soft button link

In many cases, you may need to give more feedback on a hover state than just an underline. This is where you can use the soft button look on hover for a link.

Style a link as a button

In rare cases, you may need to style a hyperlink as a button. The use of the ` .btn-outline ` and ` .btn-soft ` is allowed, however the use of the solid state is not recommended on a hyperlink. You must use this style cautiously on a hyperlink.

Hence, to style a hyperlink as a button, you may simply apply the button class on the link itself. You also apply all the necessary classes applicable to a button, such as icon support, size variations etc to the hyperlink. For more information, refer to the button component documentation.

Behaviour

A hyperlink, when clicked or activated via keyboard, navigates the user to a specified destination, be it another webpage, a file, or a section within the same page. Visually, links typically change color or style on hover and once visited. For enhanced usability, they should provide a discernible focus state, ensuring accessibility for keyboard-only users.

State

By default, the ` hover `, ` active `, ` visited ` and ` focus ` state are applicable to a hyperlink (or anchor tag). The UAE Design System applies these states on an anchor tag and here is the default styles of each state.

State Properties
default color:text-primary-600; underlined;
hover color:text-primary-500; underlined; text-decoration-thickness: 2px;
active color:text-primary-700; underlined;
visited color:text-primary-600; underlined;

Focus state

The default focus state is styled to add a ring using the lighter shade of the primary colour. The ring on a standard anchor tag will highlight the link itself and on the call to action links, the ring will add more padding to ensure the clickable area is covered.

Try this out by clicking anywhere in the example box and pressing "Tab"

Accessibility

  • Hyperlinks should be navigable and usable via keyboard. Users should be able to reach a hyperlink using the ` Tab ` key and activate it using the ` Enter ` or ` Space ` key.
  • Ensure the link text describes its purpose or destination. Avoid generic phrases like "click here" which adds no context. Although words like "read more" and "learn more" are also very generic, provide context to them by adding content in the ` title="" ` attribute of the anchor tag. If you simply must use ambiguous text, it is also recommended to add the ` aria-label="" ` attribute to give more context of where the link will lead to.
  • Colour is only a visual cue for a link. To ensure the link is truely recognizable by those with colour blindness, all hyperlinks (anchor tags) that are not supported with an icon must be underlined by default.
  • When adding a link to an external website, and if that external link will be opened in a new tab, you must add ` rel="noopener" ` as the minimum attribute on the anchor tag.
  • It is also recommended to add ` (opens in new tab) ` to the text of the link. However, we must ensure this content is visible to screen readers only. Hence the correct way to add this would be as follows: 
    <a href="https://www.example.com" rel="noopener" target="_blank">
	The New Experience<span class="sr-only"> (opens in new tab)</span>
</a>

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

تواصل مع قيادات الهيئة
المشورات
المدونات
استبيان

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Previous
File input
Next
Input
Sign up for our newsletter
Receive the latest updates from the UAE Design System
TDRA empowers youth for a sustainable future
What's new
Sustainable by design

Sustainable web design is the practice of designing and developing websites that have a low environmental impact.

Read More