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:
<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.
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
Silktide helps you understand and improve your websites.
But what does that actually mean?
Let’s start by looking at how website teams function.
Option one: These folks create content for the website, and the developers maintain it all. As your company grows, so does the amount of content. You can see how the developers could become overwhelmed, because they’re dealing with all the issues of accessibility, usability and even the content itself. So let’s remove the bottleneck.
Option two: Now those content creators have direct access to the website, and you’re thinking… This was a mistake. So the website is going to have problems either way, and until the complaints start rolling in… how would you even know where to begin?
Silktide provides a single source of truth for problems ranging from spelling and grammar mistakes to accessibility issues. Whether you need a bird’s eye view of your entire web estate, or you want to dive into a site and get down to the nitty gritty of a single page’s issues, Silktide has you covered. No matter the size of your website.
Silktide’s inspector shows you exactly where your website’s problems are, whether it’s right out in the open, hidden in the code, or even on mobile, so you can get serious about accessibility.
Every issue comes with information on why it matters to your website visitors, and simple guidance on how to fix it. You can even highlight parts of the page yourself and assign tasks to your teammates. Integrate your CMS with Silktide, and you can fix these issues on the fly.
And don’t forget, we’re talking about improving your content, accessibility, marketing, user experience, and more.
We know there’s a lot to keep track of, but with Silktide, you no longer need to be an expert in everything.
