Step 10: Usability and the Title Attribute

From PikaDocs

At this step we take a modest breather to pause and reflect about the humble title attribute (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3). No, were not talking about the title element (http://www.w3.org/TR/REC-html40/struct/global.html#edef-TITLE), the singular tag located in the first few lines of code at the top of the structural markup.

Yes, we're talking about the often underused (http://www.7nights.com/asterisk/archive/2004/07/title-attribute-your-take) and/or overused (http://www.htmldog.com/ptg/archives/000105.php) attribute that may appear multiple times within a given web page, and be attached to almost any type of XHTML page element (http://www.htmldog.com/guides/htmlbeginner/tags/).

In building out the Claire redesign, we are mindful of how frequently new users rotate in and out of the case management system: new advocates and support staff, far-flung contract attorneys, and countless volunteers of every ilk, interest and internet experience. Even assuming these newbies to the Pika CMS are familiar with the web browser metaphors from countless hours filing out online forms at eBay and Amazon.com, what can be done to make the Pika interface more user friendly, and hopefully more accessible (http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/) as well?

One way to go is to do what we detailed in the prior step, about our experimentation with pop-up help windows. But another, more pervasive and arguably more commonly helpful thing to do is to selectively embed title attributes in page elements that would benefit from a helpful "tool tip" that pops up whenever the mouse pointer hovers over the element. To illustrate, here is the markup for the anchor (http://www.htmldog.com/reference/htmltags/a/) tag in the horizontal navigation bar, part of the default.html template:

<a href="%%[base_url]%%/cal_day.php" accesskey="" title="Daily, weekly and monthly calendars">Calendar</a>

The title="Daily, weekly and monthly calendars" code snippet is the title attribute plus its declared value ("Daily, weekly and monthly calendars"), which, when the mouse hovers over that particular anchor tag, displays as:

This little bit of additional information, hopefully, helps the user better and more immediately understand where they are going (http://www.useit.com/alertbox/980111.html). Here are additional examples of how we are selectively embedding title attributes in some of the initial Claire templates, to help users not only know "where they are going" but also the "effect" or "consequence" of clicking on a page element like a input (http://www.htmldog.com/reference/htmltags/input/) submit button:

[edit]