Change proposal Accepted by Working Group decision Tue, 20 Mar 2012

title attribute definition does not match reality

The following Change Proposal is for the the HTML WG Issue 192 Editor: Steve Faulkner (faulkner.steve@gmail.com)

Date: January 17 2012.

Summary

Currently the title attribute definition omits a widely used, widely supported and documented use of the title attribute. Add text refering to this method.

Rationale

The title attribute mapping to the accessible name property or equivalent(in the abscence of other labelling mechanisms) in accessibility APIs is widely supported by browsers that have practical support for Assistive Technology. Use of the accessible name for labelling of form controls is widely supported by assistive technology. Use of the title attribute to label form controls in cases where other labelling mechanisms already provide a visible but not a programmtically associated label, is is a well known practice and widely used. Use of the title attribute content in accessible name calculation is documented in ARIA 1.0. It is also documented in HTML to Platform Accessibility APIs Implementation Guide.

Examples of documented best practice:

• label controls: H65: Using the title attribute to identify form controls when the label element cannot be used
• label frames/iframes H64: Using the title attribute of the frame and iframe elements
• IBM accessibility advice on use of title attribute
• Illinois Center for Information Technology and Web Accessibility(Labels for Form Controls Rules)
• Using titles on form fields

Real world examples of title attribute usage to label form controls

the search text box on google

<input type="text" maxlength="2048" name="q" id="lst-ib"
autocomplete="off" size="41" title="Search" value="" class="gsfi"
dir="ltr" style="left: 0pt; border: medium none; padding: 0pt 0pt 0pt
2px; margin: 0pt; width: 100%; outline: medium none; top: 1px;
overflow: hidden; background:
url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D")
repeat scroll 0% 0% transparent; position: absolute; z-index: 5;
color: transparent;" spellcheck="false">

The 'notifications' and 'Options' custom controls on google

<a aria-owns="gbd1" aria-haspopup="true" onclick="gbar.tg(event,this)"
title="Notifications"
href="https://plus.google.com/u/0/notifications/all?hl=en" id="gbg1"
class="gbgt gbgtd"> <span class="gbtb2"> </span> <span class="gbts"
id="gbgs1"> <span class="gbid" id="gbi1a"></span>0 </span> </span> </a>

<a aria-owns="gbd5" aria-haspopup="true" onclick="gbar.tg(event,this)"
title="Options" href="http://www.google.com/preferences?hl=en"
id="gbg5" class="gbgt"> <span class="gbtb2"> </span> <span class="gbts"
id="gbgs5"> <span id="gbi5"> </span> </span></a>

text box on microsoft.com:

<input type="text" autocomplete="off" class="hpSrc_Textbox"
title="Search Microsoft.com"
id="ctl00_ctl07_SectionRepeater_ctl00_ItemRepeater_ctl00_ctl01_hpSearchTextBox"
name="ctl00$ctl07$SectionRepeater$ctl00$ItemRepeater$ctl00$ctl01$hpSearchTextBox"
style="width: 219px;">

text box on Yahoo.com

<input type="text" autocomplete="off" value="" title="Search" name="p"
class="input-query input-long med-large  " id="p_13838465-p" style="">

Yahoo mail custom button:

<a title="Next Page" data-action="next-page" class="icon next"
aria-disabled="true" role="button" href="#"></a>

Details

change summary:

The HTML5 spec currently states:

"The title attribute represents advisory information for the element, such as
would be appropriate for a tooltip. On a link, this could be the title or a
description of the target resource; on an image, it could be the image credit
or a description of the image; on a paragraph, it could be a footnote or
commentary on the text; on a citation, it could be further information about
the source; and so forth. The value is text."

Add the text in parentheses to the spec, in the position indicated:

"The title attribute represents advisory information for the element,
such as would be appropriate for a tooltip. On a link, this could be
the title or a description of the target resource; on an image, it
could be the image credit or a description of the image; on a
paragraph, it could be a footnote or commentary on the text; on a
citation, it could be further information about the source;

{on interactive content[1] it could be a label for, or instructions for, use of the element}

and so forth. The value is text."

[1] phrase 'interactive content' linked http://dev.w3.org/html5/spec/Overview.html#interactive-content-0

Impact

Positive Effects

The HTML5 spec will better reflect real world usage and advice for use of the title attribute. It will better support the pave the cowpaths HTML design principle:

When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.

Conformance Classes Changes

None known.

Risks

Authors may use the method when other labelling methods are more appropriate.