|
Usability Tip:
Add Titles To Page Elements
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Looking for a way to pack more information into the confined space of your Web page? The TITLE attribute is a little-used way to add explanations, captions, and keywords to block-level elements on your Web page. Use it to help clarify forms, add tool hints, or to increase site usability for visitors with disabilities.
Link Titles Give More Information
If you're familiar with Windows products, you've probably seen the little "tooltip" boxes that regularly pop up over text and icons. They give you more information about a link or describe the purpose of an obscure icon.
Create the same effect on your Web site using the TITLE attribute. It's most commonly used inside HREF tags. Link titles allow you to add descriptive text about a link. The description pops up when a mouse moves over the link. Try it with the link below:
Browser Photo
If you're using Explorer 4.x and up or Netscape 6.x with either Windows or a MAC operating system, you should have seen this link description: "Browser Photo helps you quickly find browser display problems!" If you're using an older version of Netscape or WebTV, you didn't see it - but it didn't break the page display.
More Ways To Use Titles
Although links are the most common use, you can add titles to virtually any element or image. The syntax is simple: just add TITLE="your text here" to the opening part of the tag. The TITLE attribute works with tables, definition lists, paragraphs, forms, form elements, header tags, other block-level elements, and images.
While it's hard to see any real benefits from adding titles to paragraphs and header tags, other elements really benefit from titles. Increase the usability of your Web site by adding the TITLE element to:
- Forms - Use a form title (inside the opening FORM tag) to tell visitors the purpose of the form: Sign up for a newsletter, enter a sweepstakes, etc.
- Form attributes - Complex forms that collect more data than basic name and address information are easier to understand if the elements have TITLE attributes that explain their purpose. If you're asking for the security code on a credit card, use the TITLE attribute to explain to visitors that it's the 4-digit number above their credit card number. Or alert visitors that the comments they type into a Comments textbox are limited to 300 characters.
- Images - An image title works much like the ALT text description for images. Use it to describe the image, include copyright information, describe the destination link in an image map, etc. Note though, that the TITLE attribute overrides the ALT attribute. When you pass a mouse over the image, you see the TITLE text, not the ALT description.
- Blockquotes - Use a TITLE attribute to include the correct literary or technical citation information with your blockquotes - if you aren't already using the CITE tag to display it.
|
The TITLE attribute is an easy way to give the majority of your visitors more information about our page elements without taking up valuable real estate on your page.
Increase Accessibility And Usability
Titles are also one way to increase the overall accessibility and usability of your Web pages - but they aren't a panacea. Most screen readers will pick up the TITLE content, but visitors using other types of assistive technologies may not benefit.
That's because this technique is mouse-dependent: visitors who navigate using their keyboards won't see this extra information.
However, you are making the browsing experience better for the vast majority of your visitors. Those visitors with incompatible browsers or technologies won't get broken pages as a result. But remember that they won't be receiving as much information as other visitors.
As with other techniques (like JavaScript or image map navigation) that aren't completely device-independent, you'll need to be careful about including important site information only inside TITLE attributes. Think of them as an elegant enhancement to your site, not as a primary means of displaying information.
Although this technique isn't compatible with all browsers, it doesn't break page layout. Other techniques do! It's always critical to test your site thoroughly on all browsers and operating systems before you post it.
|
