There are two important requirements for a good link:
- All links have discernable text.
- The text is clear and meaningful.
Discernable link text
That first point is likely not very clear, but it’s actually pretty simple once explained. Basically, it means links need to have actual text. This can be provided in many ways. The most common is simple text. If you were to highlight some text in a paragraph, list, heading, quote, etc., a toolbar appears and lets you convert the text to a link. That text becomes the “discernable” text. That means a screen reader can read it to the user.
The big danger is when using an image as a link. Visually this may be clear, but screen reader users have no idea what that link means. The screen reader will literally say “image link” or some variation of that. In a later section we’ll talk in more detail about alternate or “alt” text.
The important idea here is that when using an image as a link, always include the alt text and describe what the link does, not the image. More on that in the next section.
Clear and meaningful link text
The funny thing here is “discernible link text” seems unclear but is actually really simple, but “clear and meaningful link text” looks straightforward, but is actually a little tricky. The issue is that it is very subjective while the discernible requirement is objective. The text exists or it doesn’t.
When we say the link text is clear and meaningful, we mean that the text describes the link by itself without relying on surrounding text. For example, in the “Contrast” section there was a link with the link text “this.” The text exists so it passes the “discernable” requirement. No question asked. If you are reading the sentence it looks clear enough. You can infer that “this” leads to a tool to help with contrast. However screen reader users don’t always know the context. One common way to browse a page is by links on the page. This helps when someone wants to find a specific link quickly. It’s also a default means of keyboard navigation since links are tab focusable content. So a screen reader will just get something like “link: this” as the full context. They don’t know what “this” is. Suddenly it is much less clear and definitely not meaningful.
Let’s see how to fix the ambiguous text:
- Open the blog post in the editor
- Click into the text and highlight “this”
- Type something more helpful like “this contrast checker”
There are times where the link text may not fit with a design and needs to have some screen reader text added. There will be a bonus post at the end of this series where I’ll demonstrate a tool to help with that. It should be the exception, not the rule.
As a general rule of thumb, it’s also helpful if all links to the same destination have the same link text. This is recommended for all users as it makes it clear that they go to the same place.
Next time I’ll be talking about Alternate Text.
