Do you like spiders?
Tell you the truth, my dearest reader: I do. They’re so good for the ecosystem, they get rid of annoying insects in the home, plus in Italy they’re taken to be a good omen that money is on its way. (Not to mention their essential role at Halloween.)
And finally: aren’t spider webs covered in dew a thing of beauty?
Yes. Yes they are.
Why accessible hyperlinks are important
Now do you ever stop and remember why the World Wide Web – this informally organised network of interlinked hypertext documents stored on web servers that communicate with browsers using http, and cross-linked with one another – is called “web”?
Well of course! it’s because of those cross-links. Imagine them all linked up – and there you go: a beautiful, immense spider web.
So here’s your poetic image for today: hyperlinks are the silk threads that weave the web.
Without hyperlinks, the web would not be a web!
Links are like magic, dew-covered threads to guide your visitors to where you want them to go.
A big part of accessibility is making sure that all of them can actually follow the trail, without bad surprises.
(The ultimate bad surprise would be to end up eaten by the spider, but that’s where the analogy ends).
Here are 4 golden rules to make sure the silk weave of your hyperlinks is strong, everyone can navigate it and you always write accessible link text:
First golden rule for accessible hyperlinks
Make your links understandable even when out of context.
This helps both visitors and screen readers to scan the page and work out what is of interest to them.
Yes, this means never using “Click here” or “Read more” ever again.
- In a grid with blog articles: make the article title a link. This way, you won’t need “read more”.
- In the text: “Click here” to learn how to write descriptive links can become “Learn how to write descriptive links”.
Clearer content = better SEO = better accessibility.
WCAG criterion for hyperlinks in context
2.4.4 Link Purpose (In Context) – Level A
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined context.
- Use clear, descriptive link text.
If context is used (e.g. a heading or list item), it must be programmatically associated.
2.4.9 Link Purpose (Link Only) – Level AAA
The purpose of each link can be determined from the link text alone. I know this is AAA, but really, it’s not that hard to achieve, so why not do it anyway.
- For example, in pages with multiple links out of context, such as navigation menus, lists, article archive pages, product archive pages, and so on.
Second golden rule for accessible hyperlinks
No bad surprises.
And by that I mean:
- If you want the link to open in a new tab, add “Opens in a new window”.
- If the link is to a downloadable document, mention it in the link text itself.
In a nutshell: use the link text to clarify where it goes. No exceptions.
(There is no direct WCAG criterion for this: it’s mostly accepted best practice).
Third golden rule for accessible hyperlinks
Underline your hyperlinks.
I mean it.
Just do it.
Not everybody can tell the difference between your body text colour, and your link colour. So please underline your links: this way, your visitors will know that they are a link, with no risk of misunderstandings.
And if you think it’s ugly, there are techniques to make the underline much nicer.
WCAG criterion for underlining your hyperlinks
1.4.1 Use of Color – Level A
Colour is not the only visual means of conveying information.
- Don’t rely solely on colour to identify links: use underlining or other visible indicators.
And while we’re at it, another reminder of an essential criterion that relates to this:
1.4.3 Contrast (Minimum) – Level AA
Text, including link text, must have a contrast ratio of at least 4.5:1 against its background.
- Make sure link text is clearly readable, especially in body copy.
Fourth golden rule for accessible hyperlinks
Style hover and focus states.
Hover will confirm that an underlined link is indeed an interactive element; and focus will allow keyboard users to easily navigate the links on your page.
Remember: not everybody uses a mouse, and everybody uses the web their own way – possibly different from yours!
An important part of this is to make sure that, besides the styling, your hyperlinks are coded properly, using semantic HTML, and that they are operable via keyboard.
WCAG criteria for proper hyperlinks
2.1.1 Keyboard – Level A
All functionality must be operable via keyboard.
- Links must be accessible and usable with the Tab and Enter keys.
4.1.2 Name, Role, Value – Level A
User interface components (such as links) must expose their name, role, and state to assistive technologies.Use semantic HTML (<a href=”…”>) and avoid non-semantic elements like <div> or <span> for links.
All there is?
Is this all there is to always accessible links? No, but it’s a great start.
Make your threads easy to follow, for better SEO for your business – and a better web for all! Once again, an accessible feature turns out to be of great advantage for all.