The Title attribute - what is it good for?

Index

1. The Title attribute - what is it good for?
2. What's the TITLE?
3. So what's the Title??
4. Title attribute - a brief history
5. a brief history [part 2]- Usability Guru's contribution
6. a brief history [part 3]
7. Display of titles [in browsers]
8. Display of titles [in browsers] continued..
9. Do users with disabilities read/hear the TITLE text?
10. Implications of TITLE attribute use. [part 1]
11. Implications of TITLE attribute use. [part 2]
12. Implications of TITLE attribute use. [part 3]
13. So what can be done?
14. So thats it?

<h1 title="absolutely nothing?">The Title attribute - what is it good for?</h1>

Steve Faulkner
Technical director at

This work is licensed under a Creative Commons License.

• TITLE is an element
• The most important element of a quality Web page
• The TITLE element in HTML is designed to provide a short piece of text that should stand for the document in cases such as:
  • window title bars
  • bookmark lists
  • result lists from search services
• The first content on a page that is heard by a screen reader user
• and is not the subject of today's presentation.

• The TITLE is also an attribute of an element.
• Anatomy of a html element

  <a id="a1" name="a1" title="example element" href="example.html"></a>

  element:

  a

  tags:

  <a>, </a>

  attributes:

  id, name, title, href

• It is a valid attribute for most elements [in HTML 4+]:
• a, abbr, acronym, address, applet, area, b, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins, kbd, label, legend, li, link, listing, map, noframes, noscript, object, ol, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var.

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."

-- Tim Berners-Lee, W3C

• He also said... in the HTML 2.0 specifications:

Jakob Nielsen's Alertbox for January 11, 1998

Using Link Titles to Help Users Predict Where They Are Going

"Do not assume that the link title will look the same for all users. Indeed, auditory browsers will read the text aloud and not display it visually. Different browsers will display link titles in very different ways"

• The Guru helped popularise the use of the TITLE attribute on links and propagate the misleading and simplistic notion that "auditory browsers will read the (TITLE) text aloud".
• In fact most screen readers will not speak the TITLE text unless the user is aware of the presence of TITLE texts and specifies the option to read TITLE texts, which for many, means that they will not hear the link text [more about this later].>
• Moving on the HTML 4 specification...

HTML 4.0 Specifications

2.3.2 Accessibility

"As the Web community grows and its members diversify in their abilities and skills, it is crucial that the underlying technologies be appropriate to their specific needs. HTML has been designed to make Web pages more accessible to those with physical limitations. HTML 4 developments inspired by concerns for accessibility include:"

"Support for the TITLE and lang attributes on all elements."

"This attribute offers advisory information about the element for which it is set."

• It is quite clear that the authors of the HTML 4.0 specifications intended the TITLE attribute to be used primarily to increase the accessibility of web pages.
• Unfortunately the browser developers didn't get the message...

Display of the TITLE attribute in some common browsers

Browser	Title Display	Other behaviours	Example Display
Explorer 5.x and up	TITLE text displays in pop-up tool tip on mouseover. Displays TITLE for all page elements.	TITLE text on form controls elements disappears after approximately 5 seconds
Netscape 4.x	Ignores TITLE attribute on all page elements.	none	none
Netscape 6.x and up, Firefox	TITLE text displays in pop-up tool tip on mouseover. Displays TITLE for all page elements.	TITLE truncated (after 75 characters) TITLE text disappears after approximately 5 seconds
Opera 8	TITLE text displays in pop-up tool tip on mouseover. Displays TITLE for all page elements.	pop-up displays TITLE text and URL of link.
Safari 1.3.1 & 2.0.1	TITLE text displays in pop-up tool tip on mouseover. Displays TITLE text for all page elements.	TITLE text disappears after approximately 5 seconds

Things to note:

• Display is device dependent - displayed on "mouse over" only [all browsers]
• Content cannot be resized or colours changed [all browsers].
• Time-limited display [disappears after a few seconds in IE/Firefox]
• Content is truncated [in Mozilla/Firefox]
• Appears on child elements if the title is not explicitly set on these elements.

Sometimes no, sometimes yes, sometimes maybe..

• Users that rely upon the keyboard to access web content cannot access the TITLE text.
• Some users of screen magnifiers will not be able to read the TITLE text.
• Most users of screen reader software will not be aware of the TITLE text, some will not be not able to read the TITLE text even if they know it is there.

Use of TITLE's on links

How does the use of the TITLE attribute effect users with disabilities - Includes users with a physical or cognitive disability or vision loss, whether or not they are users of Assistive Technology?

Checkpoint 13.1 of the Web Content Accessibility Guidelines [WCAG 1.0]

"Clearly identify the target of each link. Link text should be meaningful enough to make sense when read out of context -- either on its own or as part of a sequence of links."

"Link text - The rendered text content of a link".

• The link text needs to clearly define the target of the link
• If the TITLE text is needed for the target to be clearly defined, then the link is not clearly defined for many users with disabilities.

TITLEs, lots of them, are things any clearer?

A list of 82 links, 65 of which have TITLE attributes from Facts and Opinions About PDF Accessibility

Example link and TITLE texts from Facts and Opinions About PDF Accessibility

Screen Magnifier users

At higher magnification levels it is difficult if not impossible to read more than a few words of a TITLE text.

TITLE text	Example Display at 600% screen magnification
S5: A Simple Standards-Based Slide Show System
JAWS for Windows 4.02 Features and Enhancements
UA Guidelines Review of IBM Home Page Reader
AEBC

How to use or not use TITLE attributes

Recommendations

Don't use them on any element to convey important information unless you provide device independent access to the information

Acronyms and abbreviations

Include a title attribute, but also provide a plain text expansion the first time the acronym or abbreviation is used on the page.

Form controls

Do use the TITLE attribute to provide a label for a form control in situations where a text label is impractical such as the use of controls within a data table. If you want to hide text labels methods are discussed in this article: techniques for Invisible Form Prompts

Links

Do not use the TITLE attribute to clearly define the link target and if you use a TITLE to add extra non-critical information ensure that the plain link text information is also included before the superfluous stuff.

Yes

Thanks for listening, if you have any questions I will be around...

Useful References

• Screen reader software support for the title attribute.
• Assistive Technology Users Test title attribute access.
• HTML 4.0 specifications, 7.4.3 The title attribute
• Contradictions in Accessibility - Hidden Information
• The title attribute is 99% bad
• Day 14: Adding titles to links
• Using Link Titles to Help Users Predict Where They Are Going.
• HTML 4.01 specifications, 2.3.2 Accessibility
• Add Titles To Page Elements
• Title Attribute -- Your Take
• XHTML to XHTML transform using XSLT
• Experimenting with XSLT to transform XHTML into...XHTML
• Example XSL transformation files [zip file, 9 Kb]
• W3 schools XML tutorials
• Web Accessibility Tools Consortium [WAT-C]

This work is licensed under a Creative Commons License.