BPOW: Title attributes

By September 4th, 2013

In this week's BPOW (Best Practice of the Week), we look at the title attribute. Title attributes seem to end up everywhere. And, you really don't need them because most of the time they're just creating redundant information. For people with screenreaders, they might hear the title and the text - or just the link text. But, title attributes also have an impact on low vision users who use screen magnification.

Title attributes seem to end up everywhere. And, you really don’t need them because most of the time they’re just creating redundant information. For people with screenreaders, they might hear the title and the text – or just the link text. But, title attributes also have an impact on low vision users who use screen magnification.

<a title="Fall Schedule" href="fallschedule.html">Fall Schedule</a>

Let’s assume that the title attribute doesn’t parrot what the link text is – and contains important and unique information that the user needs.

<a title="2013 Fall TV Schedule" href="fallschedule.html">Fall</a>

Large mouse pointers are frequently used with screen magnification or on their own to make the mouse easier to spot. When hovering over a link that has a title attribute, the large mouse pointer covers the start of the title attribute.

Text link Fall with a large mouse pointer obscuring part of the title attribute

Longer title attributes may not fit inside the viewport with higher levels of magnification.  Low vision users rely on following text with the mouse pointer – which is just not possible with a title attribute.  It disappears when the mouse moves off the target.

In usability testing, we’ve even observed a user who was looking for a link on the screen.  She didn’t know that she stopped her mouse over a link with a title attribute.  That title attribute hid the link she was trying to hunt down.

How do you avoid these problems? Just avoid using title attributes.

Tagged with: