10 Rules For Better Links
Links are one of the core building pieces of hypertext, which is central to the world wide web. Even after reaching the topmost level of importance, they are still one of the most mistreated and underrated parts of any design system.
The main role of a link is obvious: navigation. This means that interacting with them should change the document, which should change the content of the page and, by definition, the URL, either in the same window or opening the new locator on a different window or tab. For use cases different than navigation, a button should be used instead.
Regardless of the possible style associated with them, links should be constructed by using the <a> tag if we are operating inside of HTML as a means to hypertext. This guarantees that no misleading semantics are applied by automated agents or users that rely on tools to access the content, like screen readers. The link behaviour can be mimicked through the usage of Javascript event handlers like OnClick over most elements, but that is heavily discouraged.
The context of the link also includes the surrounding text that can potentially guide the user as much if not more than the link text itself.
Rules
Links are textual elements
As a textual element, the regular considerations for text apply. Contrast, size, legibility and choice of font are paramount to a good link. Avoid using color or font weight alone to signal that something is a link.
Underlining is part of the internet alphabet
Since the origins of the internet, the usage of underline has been associated with navigation. Hence, there is a subconscious association made by the users. Underlining the links, and only the links, helps users locate the navigation elements and access the information. It is hence recommended to always underline links and never underline other textual elements.
Usage of icons
If a link relies heavily on the usage of an icon to be understood, it is likely preferable to use a button instead.
No URLs as textual content
Avoid using URLs as the textual content of a link, use descriptive text instead.
<a href="index.html">
<a href="index.html">
Links should be self-explanatory
A link does not need to specify that navigation is going to occur, neither on the link text nor on the surrounding context. It can be implied from the semantics of the anchor tag and other visual hints like the underlining.
Click <a href="index.html">here</a> to go to the homepage
<a href="index.html">
Avoid magic
If a target opens in a new window or tab, use the correct attribute, target, to set it up, and avoid doing javascript magic, like using the onClick event handler to open a new window.
<a
<a href="index.html" target="_blank">
Links should explain their target
If a link will execute the navigation on a new tab or window, it is good to indicate that to the user, both visually and through proper attribute usage. A variety of icons can be used to indicate this. An arrow pointing up-right, or an overlapping set of squares are good, common choices. It is preferable to keep this inline with the text, and preferable to the right of it in languages that are read left-to-right, and vice versa on languages that are read right-to-left. This causes that the text is read before the icon comes in the way, while giving the non-textual information. It can also be indicated just by text, for example through expressions like “opens in new window” or “opens in new tab”, usually between parenthesis.
<a href="..." target="_blank">
<a href="..." target="_blank">
<a href="..." target="_blank">
Examples of suitable icons
Screen readers and new tabs/windows
Opening links in new tabs or windows can be considered less accessible, as they impair the usage of the back button, but screen readers can read attributes like aria-label, which are used to include extra textual information and substitute the actual content of the link when read by them if an icon that can be inaccessible to visually impaired users is otherwise used.
<a href="..." target="_blank">
<a href="..." target="_blank" aria-label=”Website (opens in new tab)”>
Links are for navigation, not action
The text of the link should not indicate action, but navigation. If an action is to be performed, a button is more suitable. Links should not be used to substitute buttons inside of forms.
<a onclick="create_post();"
<a href="index.html">
Avoid the link ARIA role
Avoid using aria-role=”link” unless it is totally imprescindible. Prefer to use the anchor tag from within the language, which eases the semantics and the behavior, including some sensible base styling. It is very hard if not impossible to imagine a case where you can use this ARIA role and not an anchor tag.
<span onclick="goto_home();"
<a href="index.html">