Hyperlinks: How to format and style them
Hyperlinks, or simply, links, are the keystone, the building blocks, the vascular system of a good website. They are critical to helping users navigate around the website, getting them from one section to another with the least amount of fuss. Without them, users can’t navigate, they get lost, and they move on, so, it is important to get hyperlinks to stand out, so they are visible and not easily missed due to styling issues and use.
Having been using the Internet for over 20 years, I’ve seen many styles and formats being used for hyperlinks. Some are very good, some good and some are… well, they need improving. With some website designs, the styling of the hyperlinks are slightly different from the main body text itself, and with the combination with the use of ‘Click Here’, or simply ‘Here’, these hyperlinks are easily missed to the user, which isn’t great for your website usability.
I have written this article to help you with the correct use and styling of hyperlinks, to meet accessibility and usability.
Formatting: Don’t use ‘Click Here’
Hyperlinks, should be part of the natural flow of your written text, and you should never, ever, use the phrase “Click Here” or a variation of it. Although this is a clear ‘call to action’ (instruction) for a user to make, users do not ‘click’ on a touch screen device and for accessibility, screen readers and the visually impaired, don’t use the mouse to click. Also, moving away from ‘Click Here’ is compliance with WCAG 2.1, and Section 2.4.4: hyperlinks should be descriptive:
Avoiding the term ‘Click Here’ altogether helps and improves your Search Engine Optimisation (SEO) ranking. For the first instance, users do not search for ‘Click Here’. The hyperlink is also known as the anchor text, and Google wants to see a clear connection and relationship between the content of the site being linked from, the URL being linked to and the anchor text. In the example below, the anchor text ‘Help Awareness’ literally tells the user exactly what they will get when they activate the link.
This is also helpful to screen readers, as it gives context to the hyperlink.
Also, do not use the internet addresses as links, e.g.
Have the name of the organisation as the hyperlink. All external hyperlinks should be set to open in a new browser window/tab for better usability. If possible, all external hyperlinks should have an icon to indicate to the user that it is an external hyperlink.
Styling the hyperlinks
Hyperlinks should be as visible as possible, in both normal and hover state, to make them stand out. There are various reasons to do this:
- to make them more visible for users with visual impairments
- when users are trying to find the specific content, users don’t ‘read’ the content on the webpage they ‘scan’ read, so, if your hyperlink stands and is descriptive, this helps the user achieve their goals quicker.
To achieve this, you:
- use a different colour or other visual indications from the main body text to highlight the hyperlink function
- use sufficient colour contrast in the hyperlink hover state to indicate the element is interactive.
In Example 1, the hyperlinks are the same colour as the main body text, albeit in bold, with no other visual cue references to indicate to the user there are hyperlinks present within the paragraph, even to visually able users.
Among the bold text elements within the paragraph of text, only three of them are actual hyperlinks, but which ones? Can you tell by just looking at the text? There are no visual cues or indicators to determine which is which. Rolling the mouse cursor over the bold text is the only way to find out which are hyperlinks, as this changes the mouse cursor itself, but what about users on a mobile or tablet? There are no ‘hover’ states for hyperlinks either. This is bad practice and will frustrate your users.
Hyperlinks should be in a different colour and underlined, AND in a different colour when the mouse cursor interacts with them, known as the Hover state, to make them stand out, see Example 2:
Making the hyperlink stand out makes the link more visible to users, even to users who are scan-reading your content, giving them a better overall user experience.
For my preferences, see Example 3, I change a few of the default CSS parameters for hyperlinks. A lot of coders use the CSS text-decoration selector for the underlying style, but, I find the border-bottom parameter a better alternative as there is better spacing between the words and the underline.
Also, I add the CSS ‘background-color’ parameter for the a:hover state, for better and more visual impact.