I thought title text improved accessibility. I was wrong.

A over-dramatic disaster destroying civilisation

Do you add a descriptive title attribute to your links? If so did you know that you might be making your site even less accessible? Recently everything I thought I knew about the title attribute was proved false when I started using a screenreader.

Insert/edit link dialog in WordPress

When WordPress added the input for adding a title to all links I was pleased. Finally, I thought, here’s a way that I can add more descriptive text about the destination of the link that will be read aloud in screenreaders. But I was wrong.

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 (here’s a list of what I learned). 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 chose 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.

@silktide says "We're researching link title text, & how it's not used by screen readers. Is there any reason to use it you can think of?" @Zeldman says: "No! Do not use"

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:

@silktide says "We're researching link title text, & how it's not used by screen readers. Is there any reason to use it you can think of?" @brucel says "Kill it with fire. Or as Bim, a blind screenreader user from RNIB would say http://bit.ly/hP62Ch"

He pointed us to an article explaining the title attribute can do more harm than good. Here’s the article on the RNIB website.

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 website testing tools Sitebeam and Nibbler already check 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:

<a href="#">
<span>Washington stimulates economic growth </span>Read More</a>

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.

There’s some more examples of how to make invisible content for screen reader users here.

If you enjoyed this, follow us on Twitter and Facebook.

Watch quick video tour of Sitebeam

Test your website with

or learn more