Do you add a descriptive title attribute to your links? Did you know that you might be making your site even less accessible? Everything I thought I knew about the title attribute was proved wrong when I started using a screenreader.

What I thought was true

Having an attribute to describe the link would be useful for screenreaders and for SEO purposes, so I’d always assumed that’s what the title attribute was for. I thought it was read aloud by screenreaders, to solve the problem of weak link text like “read more” and “click here”, adding title text would be read aloud instead, or at least as additional text that could be accessed by pressing a special hotkey. It was for this reason that I meticulously added useful text into the title attribute that would be useful to blind users.

I couldn’t be more wrong.

A few weeks ago I spent some time using screenreaders like a blind person would. I used the most popular commercial screenreader JAWS and the most popular free alternative NVDA. It was an incredibly enlightening experience and I learned a lot. One of the main things I noticed is that the title attribute isn’t read aloud, AT ALL.

There’s an option in JAWS that allows you to read title text instead of the normal anchor text, but it’s not enabled by default. The only very tiny exception a title attribute will be read is if there’s absolutely no link anchor text, and that’s rare. Even if the link wraps an image, the screenreader will choose to read the image’s alt text instead of the title attribute.

So if you’ve been adding descriptive text into the title attribute, don’t. Blind users won’t hear it. It’s next to useless. This common misconception could lead to important information being completely inaccessible by the people who it’s intended for.

If you need proof, here’s a video of JAWS and NVDA reading out link text in Firefox and Internet Explorer.

I asked HTML expert Jeffrey Zeldman whether we should be using title text in links, here’s his answer.

I also asked Bruce Lawson, web accessibility expert from Opera, and author of HTML5 doctor. His advice was clear that we shouldn’t be using the title attribute:

He pointed us to an article explaining the title attribute can do more harm than good.

W3C’s solution

So the best way to make a link accessible is to make the anchor text relevant and descriptive. This has been best practice for a while, and our web accessibility testing platform already checks for what we call “weak text” like “read more” and “click here”. The reason this is bad is that screenreader users often use hotkeys to navigate the page, skipping to the next heading or link. If they skip to a link that says “read more”, it’s unclear what page they’ll be taken when clicked.

But sometimes for us sighted users, a “read more” link is completely appropriate. We can’t write an incredibly long and unique description in the anchor text of every one of our links. So what should we do?

The W3C have a recommendation, but it’s a bit bizarre. They recommend writing all the text in the anchor, but if you need to provide additional information for screenreaders, wrap this in a span which you hide with CSS. This means the unique text is there for everyone, but if you really just need the words “read more”, you can show that, and hide everything else.

Here’s an example:


Washington stimulates economic growth Read More

What I find the most bizarre about this recommendation is how they suggest hiding the text. Using display:none will make the text hidden in screenreaders, so we have to force the text out of the displayed area.

a span {
 height: 1px;
 width: 1px;
 position: absolute;
 overflow: hidden;
 top: -10px;
}

Sighted users will just see the words “Read more”, whilst screenreaders will hear “Link: Washington stimulates economic growth. Read More”

This method is explained in more detail here in the W3C’s article about using CSS to hide a portion of the link text.

Get more resources in our accessibility center

Our accessibility center is filled with advice and practical tips for making your website more accessible. Get articles, hints, tips, webinars, and videos.

Footnote

Silktide is a software platform built to help large organizations find and fix errors on their website, across web accessibility, content quality, marketing, user experience, and, of course, data privacy.

Our platform helps you make better websites, and find and fix common problems, by showing you where on each page they occur. Click here to see how it works in our online demo.

Video Transcript

David Ball, Author at Silktide

I thought title text improved accessibility. I was wrong.

I thought title text improved accessibility. I was wrong.

What I thought was true

W3C’s solution

Get more resources in our accessibility center

Footnote