Skip to content Skip to footer

How to make links accessible

Compass illustration. This reflects how accessible links should function as reliable guides.
Article Content
  • How links styled correctly make a websites navigation functional.
  • How to semantically code a link, and get anchor text right.
  • What a pseudo class is and why they are relevant to styling links.
  • The correct order to style pseudo-classes in, and how to remember it.
  • The best practices for styling links accessibly, e.g colour contrast.

How a website manages links are fundamental to its functionality and accessibility. How links are styled acts as a compass and map for users navigating your website.  Whether or not you are sending the user to another page on your website via a link in your navigational menu or you are sending them to a resource on another website. A link that is coded semantically and styled correctly allows users to predict where they are going to go next. This provides certainty and confidence in using a website. To ensure accessibility, you need to have careful consideration of users’ differences in perception and how they interact with the website.

Semantics and not forgetting anchor text

The basics of coding links, is to use the ‘a tag’ followed by  ‘href’ to link to either a page that is internally on your website “./yourfile” or an external url (read this useful MDN web docs article on setting up links ). You need to apply this same semantic logic when you use an image as a link or you want a link to appear as a button. Both need to be contained with a tag, even though there is a semantic button element (the debate around is described in this article on buttons). Following these semantic rules ensures that a user will always be able to signpost that an object is a link without relying on visual cues.  

The Purpose of CSS pseudo classes.

However, a user’s interaction with a link is not only defined by HTML and anchor text. You will notice that on websites when you click a link, hover over it or interact with it using the tab key, the link will often change colour, be underlined, or in the case of the tab key, have a small box around it.These behaviours have default styling from most web browsers. However, you will soon find when you’re developing a website that you want more control over these interactions appearing.

This is where you start using a series of CSS pseudo-classes to style these links. They are called pseudo-classes because they add styles to elements which are already there inside of a specific CSS class (they are what’s called pseudo-elements that can add content but don’t worry about these for the moment). The order in which to use these classes can be remembered by using the mnemonic Love Fears Hate. It’s a bit of an odd one, but it comes in useful, because if you get the order wrong one style could override the other.

The order to style pseudo classes in.

You start with the styling for the “a tag”. Then you go through the mnemonic, starting first with the L, which stands for the link. Any styling here will dictate the styling for any link on the page.

Then you move onto the V in love (I know it’s not the best mnemonic). This is for ‘:visited’ this will apply specific styling to a link which has previously been clicked on by a user to show when they have visited it.

Following this is F. This stands for focus and will create specific styling for when someone uses the tab key to navigate over a link.

Then there is H. This is for hover and will create styling for when someone uses a mouse to hover over a link or their finger on a touch screen.

Lastly, there is A. This stands for active. This will create specific styling for when a user has clicked on a link to demonstrate that they have successfully clicked on it (to see some code examples of this read this MDN Web Docs Article).

Useful Tip

It may seem a little odd that the order of these pseudo-classes needs to be followed so strictly but you will soon find with CSS that it’s a real stickler for following certain rules and likes things in a particular order. For more on CSS rules, I highly recommend Keith J. Grants CSS in-depth. (You can buy Keiths book here)

Styling these classes.

It is considered good practice for accessibility to have all in-text links underlined (You can have underlines appear on hover, but it can be argued that this makes it less immediately clear that an object is a link, especially for those not using a mouse).

Beyond it is then about selecting the right colour for each of the pseudo-elements. You need the colours to be distinctly different from each other but not so distinct that it clashes with the overall colour scheme of your design. This balance is best achieved through trial and error; you can use some of the defaults as a general guide if it works with your colour scheme. If having blue links and darker purple visited links works in your colour scheme, this is a good starting point. Good practice to look at other websites to see how they’ve achieved the right colour balance, particularly websites that are managing multiple links effectively and accessibly, such as Wikipedia.

The next element in terms of colour is considering appropriate colour contrast. Colour contrast is something we’ve described in detail in this article (read about colour contrast here), but all of the colours you use for the pseudo-classes must have enough contrast against the background colours they are against (passing double A or triple A grade for contrast). As per all elements of accessibility design, it is good to test this out on friends and family, something that looks right to you might not do for others.

Summary

Links are crucial to an accessible website; at the core they should be straightforward and logical both in terms of the coding. Equally, you need to follow a logical approach to your use of colour in the styling of different states. Researching and examining how other reputable websites have done this is a good starting point, and always pay attention to colour contrast.

Lastly,  it is important not to overlook simple things like anchor text and how they can play a vital role in ensuring the website is accessible to all users. Like a good map or a reliable compass, effective link design should be able to confidently direct users as to where they are going.

This article has functioned as introduction to the basics, read this article on the focus element for more on that pseudo class, or read more on the hover element here. You can also visit the resource page for tools on mastering accessible link design.

Leave a Reply

Your email address will not be published. Required fields are marked *