By bim
Time to vent some steam about the TITLE attribute. This, almost more than any other item in the web author's toolbox, seems to be misunderstood and overused. The TITLE is an essential attribute for some elements, such as ACRONYM or ABBR, and is a required attribute for FRAME elements where it provides contextual information that wouldn't otherwise be obvious to screen reader users. Unfortunately though, it can be applied to almost any HTML element. Most often we see it on links and images, where it can confuse or even mask essential information. It can create issues on other elements, but for this article we'll concentrate on the damage it can do to clear link text and images with good ALT attributes. Often creating classic examples of too much accessibility.
Users and TITLE attributes
Before going into the reasons why the TITLE attribute can create accessibility problems, lets look at who can, and who can't "benefit" from information presented in that way.
-
Keyboard only users: would never see the TITLE content, because the "tooltip" is activated only by mouse hover.
-
Most screen reader users: wouldn't hear it, unless they set their settings to do so. This would be at the expense of the ALT attribute, as two "tooltips" can't be read at the same time. As the ALT attribute is required, and the TITLE attribute is optional, few users would choose to hear the TITLE rather than the ALT.
-
Other screen reader users: notably those designed for people with low vision, as opposed to no vision, may support the TITLE attribute on links, but will also read the link text. On images they read the ALT attribute only. These readers often also read portions of text "on hover", which is handy for locating required information without literally having to navigate to that part of the page. But if a TITLE attribute exists in the hover region it will be read instead of the visible text.
-
Screen magnification users: would have their access to information in an image's ALT attribute blocked by a TITLE attribute, especially, a null one.
-
People with dyslexia: often prefer not to have "tooltips" popping up, as they can be a serious distraction to the process of reading the text. If they have moved to a standards compliant browser to get away from the ALT attribute popping up in Internet Explorer, imagine how delighted they might be to find a site that has more TITLE "tooltips" than a leopard has spots.
So we have a range of users: some who don't have any access to information in the TITLE attribute, others who do have access to it, but have specific needs on what it contains and yet others, whose browsing experience would be improved if it were used with more discretion. If, about now, you're beginning to wish that the use of TITLE attributes had been restricted to elements where they are essential, join the club. Membership is free and there's plenty of room inside.
TITLE attribute shortcomings
The enthusiasm with which many web authors employ this attribute, is enough to make some disabled users' heads spin with the volume of repeated or irrelevant text at one end of the scale; while at the other end, users are kept completely in the dark about important information. How can that happen you might well ask. Well, it rather depends on what the web author believes they should put into a TITLE attribute, and why. The problem is, opinions vary. This means that the quality and value of information slotted into TITLE attributes also varies … widely.
Too much information
At the head-spinning end of the spectrum, the content might be:
-
Identical link text and TITLE attribute. This is repetition for, and may be confusing to; users who have screen readers that do read aloud the TITLE attribute. They may hear both, the link text and the TITLE attribute. Unless punctuation, or a space has been left between the two, confusion arises because the last word of the TITLE is joined to the first word of the link text. So a link, and TITLE, that both said, "Appearing in Diss" would be delivered as "Appearing in disappearing in Diss". Most of the time of course it isn't that neat, and a completely unrecognisable mash of sound is produced.
-
Link text with a TITLE attribute, which repeats the link text, but prefixes it with fluffy terms such as "Link to information on …" or "Click here for more about (whatever)". The problems here are for people with dyslexia, and screen magnification users as well as those who have screen readers that read aloud the TITLE attribute. The dyslexic user will see the "tooltip" and may recognise that its first words aren't the same as the link text, so rather than follow the link, they may spend frustrating time moving the mouse on and off the link to have time enough to read the "tooltip", only to find that it wasn't important, or even different, information at all. Screen magnification users may never know whether the "tooltip" held useful information or not, they're less likely to be able to see the information that follows the fluff, as their enlarged view of the "tooltip" may only be able to show the first two or three words. This may or may not reassure them that there is nothing important in the "tooltip", usually it won't, leaving them in doubt.. The TITLE supporting screen reader user gets both TITLE and link text, gets cross, and after a few such links is likely to head for pastures new where they won't be sent crazy.
-
A decorative image with a null ALT attribute and a descriptive TITLE attribute. This is the kind of use that can unnecessarily distract a dyslexic user. Images are often quite big targets, if the user is concentrating on reading some text; it's quite possible for the mouse pointer to be moved over an adjacent image. The resulting "distraction from the tooltip" popup could mean that they have to start again. If you can't imagine what it's like to be unable to recognise words instantly, try reading Russian.
Hidden information
At the head-scratching end of the spectrum, the information invisible to users who don't have access to the TITLE attribute commonly includes:
-
A link's destination. Generic link text like "Read more" is often given a TITLE attribute to explain where the link goes.
-
New window warnings.
-
File format or file size information.
In addition, unless images are turned off, the TITLE attribute can make other, more important information, unavailable to most users. This happens when:
-
An image has an ALT attribute and a TITLE attribute that differ from one another. Only screen reader users would have access to the ALT attribute text, everyone else would see the TITLE attribute. Where these aren't functionally identical, someone is losing out. One recently seen example of an image used as a link to a PDF version of a magazine, had a perfect ALT attribute, giving the document name, format type and file size, which was overridden by the TITLE attribute "Document cover". In that case, only screen reader users had any useful information.
-
A linked image is given a good ALT attribute but also a null TITLE attribute. In this case, nothing at all is available to people who rely on "tooltip" information, which may be most users, depending on the quality of the image. The null TITLE attribute means that no "tooltip" at all is made visible.
Using TITLE attributes
So it seems that the TITLE attribute can do real harm to the accessibility of images and links where they're used. Can anyone give any instances where they are beneficial? I can think of only one: where a rollover image effect is required, the TITLE attribute would be needed on the link element, if the original image were rendered as a background. Any other offers: or should we just stop using them? Well, we're convinced, so we're in the process of trying to remove the little perishers from the links in the WACblog. As most of you know, this is a Wordpress template, so we didn't put them in, but we're going to get them out. :)