The Design of Visited Links

About indicating visited links.

#56 · October 14, 2024 · 7 minutes read

Even websites that go back as far as the early 90ies differentiated visited from unvisited links. How is it possible that this basic feature is missing on your website? I mean, this is 2024.

Niq, aren't you supposed to be this accessibility nerd, who cares about this kind of stuff?

There's this person in the back of my audience, who has been reading my blog for a while now, complaining that my website is missing this fundamental feature. But they are standing way in the back and instead of replying by email and finally telling me about it, they just complain to themselves, where no one can hear them. The feature that has been missing from my website is that visited links should stand out from unvisited links.

To be honest, I don't know if there really is this person in my audience who has been missing this feature. The quote from above is made up. But for a while now, I have been asking myself whether users care to know that they have already visited that particular link and don't accidentally want to visit it again?

Until recently, I have considered indicating visited links to be a nuisance. "They just mess up my design language", I thought. But then one day, I found myself in a situation where I profoundly understood the significance of indicating visited links.

And I thought again.

Indicating visited links

The idea of visited links is as old as the web itself. Browsers remember which links you have visited and would like to inform you about this by showing visual indicators. Visited links are typically styled underlined and in purple colour.

If you use a screen reader, visited links are announced audibly or through a refreshable braille display, as soon as you put them in focus.

While you can't take away the information of whether a link has already been visited from screen reader users, you can take it away from everyone else. If designers overwrite the visited default state of links, you will be in trouble.

You've watched this

These days, there are many website designers, which seem to have a similar notion to the old me, when it comes to styling visited links. They just don't feel the necessity to remind users of content they already interacted with.

But then, there's YouTube or Netflix, which clearly highlight the content you have already watched. Instagram does the same with Reels. Podcast apps do it too. Heck, every email program is doing it, because who wants to read an already read email again? It's a convenience feature, which is improving the user experience of these services.

But why doesn't this logic equally apply to the rest of the web? Do we need to style visited links?

Why visited links need indicators

Recently, I discovered some new blogs about Austrian politics. Unlike the typical blogs I read, their creators don't seem to understand why RSS is amazing and therefore don't provide RSS feeds.

Apart from offering the convenience of having all the content I care about inside one app, RSS readers do exactly what YouTube, Netflix or Instagram do. They show me if I have already read a particular blog post of a particular blog. They remember for me, if there's still content out there that I might want to read in the future.

But not everyone is nerdy enough to use RSS readers (much to my disappointment). Many users read blogs in their browsers and as such benefit from visual indicators to know which posts they have or haven't read. If they read blogs without visual indication of visited links, website designers are asking them to find other ways of keeping track of the posts they've already read.

I don't know, maybe some people actually write this down in their notebook. Anyway, it's a bad user experience if websites don't do this for you.

Indicating visited links with colour

One thing that has been breaking my accessibility heart is the fact that by design, visited links are only indicated using colour. As most of us accessibility nerds know, information that is only conveyed through colour is hard to perceive for users with colour deficiencies (or not at all) and is thus breaking not only my accessibility heart but with accessibility guidelines too:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

— 1.4.1 Use of Color (Level A) - Web Content Accessibility Guidelines

I've tried to come up with a more accessible solution. My idea was to attach labels to visited links that said "visited" or similar. I imagined that in a list of blog posts, visited posts could show this label next to them. The "visited" label could be styled with a border to prominently announce to users that a blog post has been visited in the past.

However, when I tried to implement this solution, I was soon faced with some privacy restrictions of the browser:

Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited.

— Privacy and the :visited selector (MDN)

Thanks to so-called "history sniffing", website makers were able to detect which websites a user had visited by exploiting CSS and JavaScript. As a consequence, all browser makers restricted the possibility to style visited links.

This restriction meant that I had to go with the solution that's out there and has been implemented by millions of websites already. Indicating visited links with colour.

This is the new me and the newest feature of my website! Oh, yes!

In light mode, I've decided to go retro. All links, of course, are still underlined (please underline your links), unvisited have no colour, visited links are in purple and active links in red (you've read that right, I even have active states now!). In dark mode, unvisited have no colour either, visited use a neon-red and active links use a yellow.

For now, I stick to colours, but if you want to get fancy, there are more sophisticated solutions out there, that found ways to circumvent the restrictions of :visited. Here are some recommended blog posts of people, who have thought about designing visited links before me:

If you have a colour deficiency, I'm happy to hear from you and your feelings about indicating links with colours and whether my colour combinations work for you.

Which links need visual indicators?

I think it's a good practice to apply visited link styles to all your links, except for menu links and footer links, since those links appear to be more "transactional".

Also, the content of some of these pages might change in the future. I regularly update my about page, now page, or where page, so these links don't get visited link styling.