Too Much Accessibility: titles titles titles everywhere

This is actually an old post (with a newer URL after the site got re-done), but it’s worth repeating.

Thankfully, WordPress now no longer by default adds worthless title attributes to every freaking link anymore. But old version still do!

I’ve seen still too many times “SEO” given as a reason for title attributes. Know this way is pure evil. With all the potential trouble of mis-using title attributes, “doing it for SEO” almost guarantees you are, indeed, mis-using it. And so now you’re supporting robots over humans.

The article also touches on the title trick some of us try when the graphic designer insists that the link to the full article is only called “Read more”.

As Ryan Benson reminded me, this is one of the big bugs of ZoomText, a popular reader/magnifier.

I’m not sure if an empty-string title attribute is still a problem, but this is certainly code we’ve been encouraged to use in order to stop Internet Explorer from showing alt text like a tooltip, as it tends to do (however, it should be noted users of IE have come to rely on it as additional information scent, so not sure we really need to remove alt-tooltips anyway…).

A more updated set of recommendations for using title attributes is available at Steve Faulkner’s post over at Paciello Group:

The big problem I have with title attributes these days is lack of support on mobile devices. As far as I’m aware (and please correct me if I’m wrong), mobile devices don’t do anything with the title attribute. That’s a problem on one of my sites where I have a lot of footnotes, and although I put the notes at the bottom of the page, I also mark up the footnote reference as <abbr title="note goes here">1</abbr> to make it easier for people to find it … and that doesn’t work on mobiles :frowning:

You’d probably have to JS it to work with some gesture, I think.

For keyboarders with a focus you can CSS it, but not for unfocusable things like abbr.

Off Topic:

I just got a copy of Nielsen’s Mobile Usability. It’s got lots of good stuff in it, even though it’s already pretty old in the fast-paced world of mobile.

It gets misused by developers, under-used by browsers, and the verbosity caused by the over-use that you mentioned has done no good for its accessibility. If were not for all that, it could have been very useful; but it has been rendered near to useless instead. Not much fun trying to strip them out from Drupal’s forms as well, though it has always been much more disciplined with their use than WP was.

I never know why browser developers have not made more of it, with decent styling, keyboard access, the option to disable them, and so forth.

I’m not sure if an empty-string title attribute is still a problem…

Was there a particular issue with it at some point, poes?

What I meant there was, I remember this post from long ago… someone recently re-twotted it, and this was good because I lost my bookmarked URL to the article when the rnib site did an upgrade. So it may have caused some other problem I’m not aware of that no longer happens, unless it was in fact just a reference to the title=“” many of us do on images with alt to prevent IE from showing the alt like a tooltip.

Honestly sometimes I wonder if that would have been a good idea or not, to have images on all browsers show the alt text on hover. For one thing, it would have brought the attention of bad alt text to authors. For another, we’ve seen IE users come to rely on it: for confirmation of something, for some extra information (when the dev put good info in the alt text that wasn’t available as an image caption), or sometimes just the name of the file.

Yes, it’s a weird discrepancy in browser behaviour. I don’t think that IE’s way of doing it is right, although using a trick to hide it seems unnecessary.

Hm, there’s nothing in the specs about it showing up, so most devs consider it a bug.
Or at least, undesired behaviour.

The alternative for consistency across browsers would be to copy the alt text into the title if the title is empty - either byplacing the same content in both attributes (easily done using server side languages) of by having a couple of lines of JavaScript run to copy it across.

var imgs = document.getElementsByTagName('img');
for (var i = imgs.length - 1; i >= 0; --i) {
   if ('' === imgs[i].title) imgs[i].title = imgs[i].alt;

Of course generating it in the HTML in the first place would be preferred if you are the one creating the web page in the first place since then it will work for everyone and not just those with JavaScript enabled.

The JavaScript version would perhaps be more suited to be attached into the browser itself rather than to individual pages - adding it as a userscript into Firefox, Chrome or Opera would convert those browsers to working the same way that Internet Explorer does with the alt text being displayed when you hover the mouse over images that do not have specific title text. If attached as a userscript into IE it would reverse out theeffect of the title=“”