Links are not clearly identifiable

Siteimprove will also flag accessibility issues of "Links are not clearly identifiable." This is for low vision or colorblind users, as opposed to non-visual users. Essentially, you have a link, and nothing indicating that it is a link other than the color of the text. For example, the link I just posted within this blog post is blue on white, but when I mouse over it, the blue changes shades, and it becomes underlined. This is a good link. When there is no hover state, a person may mouse over that content but be unaware that it is a link since nothing changes.

Interestingly enough, the WCAG specifications don't actually say what that hover state should look like, just that there should be one. While you may need help from a developer to mend this issue, it is relatively easy to fix and can be done globally in most cases (one line of CSS is generally all it takes). For example, the following will take a link and make it blue without an underline, then in the hover state will be black with a red background and an underline.

a { color: #00f; text-decoration: none; background-color: inherit; }
a:hover, a:active { color: #000; text-decoration: underline; background-color: #f00; }

While from a stylistic perspective, I wouldn't do the above (it’s a little too much contrast, IMHO), that's the basics of how you do it, and can usually be applied to a single style sheet as a single line (or a couple of different lines if you have different regions that need different looks for the links), and it will fix all your pages.

Note that you don't need to be using Siteimprove to find these issues. Most tools will flag this, but it is also easy to find this on your own by mousing over links in each section of your site. Is it obvious that what you just moused over is a link? Which leads me to...

False positives and negatives

This is an area where false positives and negatives will come into play. It is certainly possible to write a CSS style that would fool the tools into thinking there is a style there for the hover state, such as the following:

a { color: #00f; text-decoration: none; background-color: inherit; }
a:hover, a:active { color: #00f; text-decoration: none; background-color: inherit; }

While there is a hover state, it is precisely the same style as the non-hover state. This may fool different tools into thinking you have done something when in reality, you haven't. The opposite is also true where you could theoretically build a CSS style with appropriate styling, but the automated tools think that you haven't.

So while you should use the tools, also double-check your pages. You don't need to check every page, just every different type of content, which can often be checked by hand on a single page or just a small handful at most.

Update on Links

Two weeks ago, I wrote about "Siteimprove Weekly: Links are not clearly identifiable" and wanted to update you about that. Someone brought to my attention many results that we both considered to be false positives because there was a clear visual indication on the links. After discussing with Siteimprove, it turns out that in order to pass their checker, you need to have two declarations on any of the link CSS. For example, this does not pass:

a:hover {color: #fff;}

But this does:

a:hover {color: #fff; text-decoration: underline;}

So this is a case where I think Siteimprove is probably being a little over-sensitive with their tool. However, it's an easy fix to get this to go away on all of your reports if this is something that you see. So, add a second visual element to all of the different link states, and this will no longer be an issue.