ExplicitAssociationPatterns

From HTML WG Wiki
Jump to: navigation, search


Patterns for Explicit Associations in HTML

The purpose of this page is to serve as a central repository for the study of patterns for explicit associations, as defined by HTML 4.01, in order to compare them to patterns for explicit associations included in, or removed from, HTML5.

ABBR and ACRONYM Expansion Provided Using the "title" Attribute

 
<p>
Although <abbr title="Doctor">Dr.</abbr> Smith's office is on 
Delancy <abbr title="Street">St.</abbr> he practices out of 
<abbr title="Saint">St.</abbr> Vincent's Hospital, on Maplewood 
<abbr title="Drive">Dr.</abbr>.
</p>
 
 
<p>The <acronym title="American Dental Association">ADA</acronym> 
has updated its rules for <acronym title="Americans With Disabilities Act"
>ADA</acronym>-compliance on the safety precautions to be taken when 
dealing directly with a patient who has notified the dentist that he or
she has a communicable disease.</p>
 

The accesskey Attribute

Example 1: accesskey Defined for FORM Controls

 
<label for="s1">Search <acronym title="World Wide Web Consortium (W3C)"
>W3C</acronym> web space:</label>
<input type="text" id="s1" size="15" maxlength="255" />
<br>
<input type="radio" name="sitesearch" checked="checked" accesskey="3" 
id="s2" value="w3.org" /> <label for="s2">Search w3.org</label>
<br>
<input type="radio" name="sitesearch" accesskey="w" value=""> <label 
for="s3">Search <acronym title="World Wide Web">WWW</acronym></label>
<br>
<input type="submit" value="Go" accesskey="s" name="sa" /> or 
<input type="reset" value="Reset" accesskey="r" name="rs" />
 

Example 2: Illustrates the limitations of alpha-numeric accesskeys and the importance of providing an easily accessed listing of the author-defined accesskeys. Note that it also illustrates the use of the "title" attribute to make [ HR] a semantic, rather than purely presentational, divider:

 
<map name="nav" id="nav">
<p class="intro">
<a id="choose-month" name="choose-month"
><span class="toc-intro">Choose a Month</span></a>
<br />
<a href="#jan" accesskey="1" 
	title="January (accesskey 1)">January</a> | 
<a href="#feb" accesskey="2" 
	title="February (accesskey 2)">February</a> | 
<a href="#march" accesskey="3" 
	title="March (accesskey 3)">March</a> | 
<a href="#april" accesskey="4" 
	title="April (accesskey 4)">April</a> | 
<br />
<a href="#may" accesskey="5" 
	title="May (accesskey 5)">May</a> | 
<a href="#june" accesskey="6" 
	title="June (accesskey 6)">June</a> | 
<a href="#july" accesskey="7" 
	title="July (accesskey 7)">July</a> | 
<a href="#aug" accesskey="8" 
	title="August (accesskey 8)">August</a> | 
<br />
<a href="#sept" accesskey="9" 
	title="September (accesskey 9)">September</a> | 
<a href="#oct" accesskey="o" 
	title="October (accesskey o)">October</a> | 
<a href="#nov" accesskey="n" 
	title="November (accesskey n)">November</a> | 
<a href="#dec" accesskey="d" 
	title="December (accesskey d)">December</a>
<br />
<a href="#accesskeys" accesskey="l">list of accesskeys for this document</a>
</p>
</map>

<hr title="End Table of Contents/Begin January Dates" />

<!-- ... -->

<h2>
<a name="accesskeys" id="accesskeys"
>List of ACCESSKEYs Defined for This Document</a>
</h2>

<p>
An accesskey has been defined for each month in the year. In an attempt 
at mnemonics, i have assigned numeric accesskeys to the first nine 
months of the calendar (1 equals January through 9 equals September), 
then used the first letter of the remaining months as the accesskeys for 
October through December.
</p>

<ul>
<li><strong class="keybinding">1 = January</strong></li>
<li><strong class="keybinding">2 = February</strong></li>
<li><strong class="keybinding">3 = March</strong></li>
<li><strong class="keybinding">4 = April</strong></li>
<li><strong class="keybinding">5 = May</strong></li>
<li><strong class="keybinding">6 = June</strong></li>
<li><strong class="keybinding">7 = July</strong></li>
<li><strong class="keybinding">8 = August</strong></li>
<li><strong class="keybinding">9 = September</strong></li>
<li><strong class="keybinding">O = October</strong></li>
<li><strong class="keybinding">N = November</strong></li>
<li><strong class="keybinding">D = December</strong></li>
<li><strong class="keybinding">L = List of accesskeys</strong> (this list)</li>
<li><strong class="keybinding">T = Terminal Index</strong></li>
</ul>

<hr title="End List of Accessibility Features/Begin End Matter" />
 

Example 3: What is the state of support for Non-AlphaNumeric Characters As Accesskeys?

 
<p>
This document contains a series of links, each of which uses a non-alpha-numeric 
character from the <a href="http://www.w3.org/TR/html4/sgml/entities.html#h-24.2" 
title="character entity references for ISO 8859-1 (Latin-1) characters"
><abbr title="International Organization for Standards">ISO</abbr>-8859-1 
(Latin-1) character set</a> as an <code>"<a 
href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="accesskey as defined in the HTML4 Technical Reference"
>accesskey</a>"</code>.
</p>

<p>
There are eight tests in this section, each leading to the next, save for the 
final test, which links directly to the "How to Provide Feedback" 
section. The character-entity code for an ampersand (<code class="example"
>&amp;</code>) has been defined as the <code>"<a 
href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey" 
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the first test. Depending upon your browser, the first link will either receive 
focus or will be activated when the <code>accesskey</code> defined for it 
-- <strong>and</strong> -- is invoked. Note that in some implementations, it may be 
necessary to use a modifier key, such as the ALT, CMD, or SHIFT key, to trigger an 
<code>accesskey</code> event. 
</p>

<p class="indent">
<a href="#accesskey-test2" accesskey="&" 
title="skip to the next test (accesskey: &)"
>Continue with the second test (the accesskey for this link is &)</a>
</p>

<p>
<a name="accesskey-test2" id="accesskey-test2"></a>
The character-entity code for a double-quote (<code class="example">&#34;</code>) has been 
defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test3" accesskey=""" 
title="skip to the next test (accesskey: ")"
>Continue with the third test (the accesskey for this link is ")</a>
</p>


<p>
<a name="accesskey-test3" id="accesskey-test3"></a>
The character-entity code for an apostrophe or single-quote (<code class="example">&#34;</code>) 
has been defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test4" accesskey="'" 
title="skip to the fourth test (accesskey: ')"
>Continue with the fourth test (the accesskey for this link is ')</a>
</p>

<p>
<a name="accesskey-test4" id="accesskey-test4"></a>
The character-entity code for a hyphen (<code class="example">&#45;</code>) 
has been defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test5" accesskey="-" 
title="skip to the fifth test (accesskey: -)"
>Continue with the fifth test (the accesskey for this link is -)</a>
</p>

<p>
<a name="accesskey-test5" id="accesskey-test5"></a>
The character-entity code for an equals-sign (<code class="example">&#61;</code>) has been 
defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test6" accesskey="=" 
title="skip to the sixth test (accesskey: =)"
>Continue with the sixth test (the accesskey for this link is =)</a>
</p>

<p>
<a name="accesskey-test6" id="accesskey-test6"></a>
The character-entity code for the at-sign (<code class="example">&#64;</code>) has been 
defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test7" accesskey="@" 
title="skip to the seventh test (accesskey: @)"
>Continue with the seventh test (the accesskey for this link is @)</a>
</p>

<p>
<a name="accesskey-test7" id="accesskey-test7"></a>
The character-entity code for a period (<code class="example">&#46;</code>) has been 
defined as the <code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#accesskey-test8" accesskey="." 
title="skip to the eighth test (accesskey: .)"
>Continue with the eighth test (the accesskey for this link is .)</a>
</p>

<p>
<a name="accesskey-test8" id="accesskey-test8"></a>
The character-entity code for a forward-slash (<code class="example">&#47;</code>, 
also known as a "<span lang="la">solidus</span>") has been defined as the 
<code>"<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"
title="definition of the HTML4 attribute accesskey">accesskey</a>"</code> for 
the next link on this page. 
</p>

<p class="indent">
<a href="#feedback" accesskey="/" 
title="skip to the How to Provide Feedback section (accesskey: /)"
>Continue with the How to Provide Feedback section (accesskey for this link is /)</a>
</p>

<hr title="End Test/Begin Survey" />
 

ALT and Longdesc

Simple Example:

 
<img src="md-flag-large" alt="The Flag of the State of Maryland" 
longdesc="md-flag-longdesc.html" />
 

More Complex Example: IMG element with three descriptor attributes: alt, longdesc and title

  • the graphic used in the example, world.gif, is an animated graphic of the globe spinning;
  • the graphic, and its alt text, fit surrounding context; visual flow as well as logical alternative which both provides and apt description of the graphic and an introductory clause leading to the next block of text: "Link Locally, Act Globably"
 

<h1><span lang="la">Civitas</span>
<br />
<img src="world.gif" alt="as long as the world turns" 
longdesc="world.html" 
title="Long Description of Decorative Graphic available" />
<br />
<span class="motto">Link Locally, Act Globally</span>
</h1>

 
  • three distinct functions are performed by the attributes defined in this example, which raises the following questions:
    • how does one deliver each descriptor to the user?
    • must one be forced to choose one from a list, set a cascade, or be alerted programmatically that 3 descriptors are available for this object through the use of an earcon or a "sound sentry" equivalent interface?
    • optimally, the user would be able to query the object for all descriptors, or at least an indication of their presence, so that they can be communicated to the user (through such mechanisms as a context menu, hot-key invoked menu/list, etc.

Anchors

Example 1: Two elements in a document instance are associated by an anchor:

 
   <cite><a href="#anais">Anais</a></cite>
   <!-- ... -->
   <p id="anais">Anaïs Nin (February 21, 1903 - January 14, 1977) 
   was a French-born author of Spanish, Cuban, and Danish... </p>
 

Example 2: Using internal anchors to points directly to a source, and then back to the document instance following the link to the internal anchor:

 
<p> <!-- ... --> [<a href="#note2">explanatory note 2</a>]</p>

<p><a id="back2"></a> <!-- ... --></p>

<!-- ... -->

<dl>
<dt id="note2"><!-- contents of explanatory note --></dt>
<dd><a href="#back2"
>return to the text immediately following Explanatory Note 2</a>
</dd></dl>
 

Attribute values

The value of an attribute defines the element it belongs to.

 
   <p id="introp1" title="preface" class="pref">
   <!-- The following document... --> </p>
 

The CITE Element

 
<dl>
<dt>CITE</dt>
<dd>Contains a citation or reference to other sources</dd>
<dd><cite><a href="http://www.w3.org/TR/html401/struct/text.html#edef-CITE"
    >Definition of <code>CITE</code> in HTML 4.01</a></cite></dd>
</dl>
 
 
<p><strong class="entry-title">DEBAUCHEE</strong>, <abbr 
title="noun">n.</abbr>  One who has so earnestly pursued pleasure 
that he has had the misfortune to overtake it.</p>
<p class="attrib"><cite>Ambrose Bierce, <a 
href="http://example.org/bierce/dd.txt#D class="book-title">The 
Devil's Dictionary</a></cite></p>
 

The FIELDSET, LEGEND and LABEL Model

  
 <fieldset>
 <legend>Please Rate Our Customer Service</legend>
 
 <input type="radio" id="f2c1" value="vs">
 <label for="f2c1">Very Satisfied</label>
 <br />
 <input type="radio" id="f2c2" value="ss">
 <label for="f2c2">Somewhat Satisfied</label>
 <br />
 <input type="radio" id="f2c3" value="sd">
 <label for="f2c3">Somewhat Disatisfied</label>
 <br />
 <input type="radio" id="f2c4" value="vd">
 <label for="f2c4">Very Disatisfied</label>
 <br />
 <input type="radio" id="f2c5" value="86">
 <label for="f2c5"
 >I Will Never Do Business with Your Company Again</label>
 <br />
 
 </fieldset>
 

IFRAME Element

Example: Document A references document B, which is exposed in an inline frame. (This example is available as a functioning web document.)

 
<iframe title="Inline Frame Test" scrolling="auto" src="foo1.html">
</iframe>
 

LABEL for/id Association with FORM Controls

 
<label for="fc1">Search the public-html archive:</label> 
<input type="text" id="fc1" />
 

The lang Attribute

Example: Multiple Natural Language Switches Indicated by the lang Attribute.

The following example is an extract from a document instance for which the defined default natural language is "en-us". Note the use of the hreflang attribute, when pointing to a resource whose natural language is the value of the hreflang attribute. Note: this example cites a real organization, Retina Suisse, a Swiss organization that operates in the 3 official languages of Switzerland: French, German, and Italian. Thus, although the official name of the organization is always given in French, there are alternate sites which mirror the main site's content, but in German and Italian. (The reason the real URI has been changed to a generic domain is primarily because this wiki won't allow ".ch" in links.)

 

<ul>
<li><a href="http://example.org/r-s.html" 
title="Swiss Retinitis Pigmentosa Association">Swiss <abbr 
title="Retinitis Pigmentosa">RP</abbr> Association (<span lang="fr"
>Retina Suisse</span>)</a>

<ol>
<li><a href="http://example.org/index.php?lang=de" hreflang="de"
><span lang="fr">Retina Suisse</span> (<span lang="de"
>deutsch</span>)</a></li>

<li><a href="http://example.org/index.php?lang=fr" hreflang="fr"
><span lang="fr">Retina Suisse (français)</span></a></li>

<li><a href="http://example.org/index.php?lang=it" hreflang="it"
><span lang="fr">Retina Suisse</span> (<span lang="it"
>italiano</span>)</a></li>
</ol></li></ul>

 

Links

Example 1: Document X links to resource Y somewhere on the network.

 
   <link rel="stylesheet"
         href="http://example.org/foo.css"
         type="text/css"
         media="screen"/>
 

Example 2: Document A contains an element which links to resource B:

 
 <img src="cornwallis" alt="Portrait of Lord Cornwallis, ca. 1774" 
 longdesc="cornwallis-1774-longdesc.html" />
 

Nested Elements

Example 1: A nested element X is defined to have a "meaningful" relationship with the nesting element Y.

 
   <object>
     <p>…content…</p>
   </object>
 

Example 2: Multiple child elements associated with a single parent through inheritence:

 
<div id="intro" title="Preface" class="intro-text">
 <p id="introp1"> <!-- The following document... --> </p>
 <p id="introp2"> <!-- Additionally, the intent of the authors... --> </p>
 <p id="introp3"> <!-- Please report any problems... --> </p>
</div>
 

Quotes: The Q and BLOCKQUOTE elements

Note: The following example assumes the following CSS values:

 
@media screen {
em.em-quote { text-decoration: none; }
em.em-quote:before { content: "open-quote"; }
em.em-quote:after { content: "close-quote"; }
}
@media aural { 
em.em-quote { pitch: 60; stress: 75; richness: 75; }
 }
 
 
In his <a href="fdr-4-freedoms.html">State of the Union 
address of January 1941</a>, Roosevelt proposed an ambitious 
<em class="em-quote">lend-lease</em> program whereby the United 
States would become the <q cite="fdr-4-freedoms.html#free4p36s2"
>arsenal</q> of democracy by bolstering Britain against the 
Third Reich:
</p>

<blockquote cite="fdr-4-freedoms.html#free4p41">
<p>Let us say to the democracies: <em class="em-quote">We Americans 
are vitally concerned in your defense of freedom.  We are putting 
forth our energies, our resources and our organizing powers to give 
you the strength to regain and maintain a free world.  We shall 
send you in ever-increasing numbers, ships, planes, tanks, guns. 
That is our purpose and our pledge.</em>
</p>
</blockquote>
 

The tabindex Attribute

Example 1: tabindex used to provide logical tabbing order for a book's table of contents, leading from Chapter 1 of Our Mutual Friend through the last chapter, then to the hyperlink which leads back to the site's index of Charles Dickns' works.

 
<dl>
<dt><cite>Our Mutual Friend, by <a href="../cd-index.html" tabindex="76"
   >Dickens, Charles</a></cite></dt>
   <dd><a href="omf_chapter1.html" tabindex="1">Chapter 1</a></dd>
   <dd><a href="omf_chapter2.html" tabindex="2">Chapter 2</a></dd>
   <dd><a href="omf_chapter3.html" tabindex="3">Chapter 3</a></dd>
<!-- ... -->
   <dd><a href="omf_chapter75.html" tabindex="75">Chapter 75</a></dd>
</dl>
 

Example 2: Use of tabindex to provide a logical tab order when the default tab order does not suffice. In the following example, a genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The "tabindex" attributes of the input fields are used to specify a tab order that navigates column by column. This example was adapted from Techniques for WCAG 2.0</b>. You can also test support for tabindex and scope using an archived example.

 

<form action="#" method="post">
 <table summary="the first column contains the search criteria 
  of the groom, the second column the search criteria of the bride">
 <caption>Search for marriage records</caption>
 <tr>
   <th scope="col">Search criteria</th>
   <th scope="col">Groom</th>
   <th scope="col">Bride</th>
 </tr>
 <tr>
  <th scope="row">First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="First name of the groom" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
      title="First name of the bride" tabindex="4"></td>
 </tr>
 <tr>
  <th scope="row">Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="Last name of the groom" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="Last name of the bride" tabindex="5"></td>
 </tr>
 <tr>
  <th scope="row">Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="Place of birth of the groom" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="Place of birth of the bride" tabindex="6"></td>
 </tr>
</table>
</form>

 

<b>Note: The preceding example uses the scope attribute to bind rows and columns to their headings. It also makes use of the "falback" mechanism, by defining a pertinent contextualizing title attribute to each input element.

scope = scope-name CI

This attribute specifies the set of data cells for which the current header cell provides header information. This attribute may be used in place of the headers attribute, particularly for simple tables. When specified, this attribute must have one of the following values:

  1. row: The current cell provides header information for the rest of the row that contains it (see also the section on table directionality).
  2. col: The current cell provides header information for the rest of the column that contains it.
  3. rowgroup: The header cell provides header information for the rest of the row group that contains it.
  4. colgroup: The header cell provides header information for the rest of the column group that contains it.

Attributes Binding TABLE child elements


axis

separate example not yet available

 

 

headers/id, summary, and scope bindings

 
<table border="2" summary="The following table is divided into 4 colums: 
List Name, List Description, List Archive, and List Services. Since 
there are 9 Web Accessibility Initiative Emailing Lists, there are nine 
rows, each reserved for a specific list.">

<tr>
<td id="ln">List Name</td>
<td id="desc">Description</td>
<td id="la">List Archive</td>
<td id="ls">Subscription Management</td>
</tr>

<tr class="interest-group">
<td headers="ln" scope="row"> w3c-wai-ig@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/IG">Web Accessibility Initiative Interest Group</a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-ig" 
title="Web Accessibility Initiative Interest Group's list's email archive">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-ig-request@w3.org" 
title="Subscribe to or Unsubscribe from the Web Accessibility Initiative Interest Group's list"
>subscribe/unsubscribe</td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-au@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/AU/"> 
<acronym title="Web Accessibility Initiative">WAI</acronym> 
Authoring Tools Accessibility <acronym title="Working Group"
>WG</acronym></a></td>
<td headers="ls"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-au" 
title="Authoring Tool Accessibility Guidelines' email archive">archive</a></td>
<td headers=""ls> <a href="mailtoo:w3c-wai-au-request@w3.org" 
title="Subscribe to or unsubscribe from the Authoring Tool Accessibility Guidelines' list"
>subscribe/unsubscribe</a></td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-er-wg@w3.org
<td headers="desc"> Evaluation and Repair Tools <acronym 
 title="Working Group">WG</acronym></a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-er-wg" 
 title="Email archives for the Evaluation and Repair Tools' mailing list">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-er-wg@w3.org" 
 title="Subscribe to or unsubscribe from the Evaluation and Repair Tools' mailing list"
>subscribe/unsubscribe</a></td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-eo@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/EO"
 >Education and Outreach Working Group</td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-eo" 
 title="Email archive for the Education and Outreach Working Group">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-eo-request@w3.org" 
 title="Subscribe to or Unsubscribe from the Education and Outreach Working Group's list"
 >subscribe/unsubscribe</a></td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-gl@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/GL"
 >Web Content Accessibility Guidelines <acronym title="Working Group"
 >WG</acronym></a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-gl"
 title="Email archive of the Web Content Accessibility Guidelines Working Group"
 >archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-gl-request@w3.org"
 title="Subscribe to or Unsubscribe from the Web Content Accessibility Guidelines Working Group's mailing list"
 >subscribe/unsubscribe</a></td>
</tr>

<tr class="member-list">
<td headers="ln" scope="row"> w3c-wai-pf@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/PF">Protocols & Formats 
<acronym title="Working Group">WG</acronym> (public page)</a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Member/w3c-wai-pf@w3"
 title="Protocols and Formats Working Group's member-only archives">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-pf-request@w3.org" 
 title="Subscribe or Unsubscribe from the Protocols & Formats list"
 >subscribe/unsubscribe</a></td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-rd@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/RD"></a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-rd"
 title="Research and Development Working Group's list archives">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-rd-request@w3.org" 
title="Subscribe or Unsubscribe from the Research and Development list"
 >subscribe/unsubscribe</a></td>
</tr>

<tr class="working-group">
<td headers="ln" scope="row"> w3c-wai-ua@w3.org</td>
<td headers="desc"> <a href="http://www.w3.org/WAI/UA"
 >User Agent Accessibility Guidelines <acronym title="Working Group"
 >WG</acronym></a></td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/w3c-wai-ua"
 title="User Agent Accessibility Guidelines Working Group's list archives">archive</a></td>
<td headers="ls"> <a href="mailto:w3c-wai-ua-request@w3.org" 
 title="Subscribe or Unsubscribe from User Agent Accessibility Guidelines' list"
 >subscribe/unsubscribe</a></td>
</tr>

<tr class="special-list">
<td headers="ln" scope="row"> wai-xtech@w3.org</td>
<td headers="desc"> Cross <acronym title="Working Group">WG</acronym> Technical Issues List</td>
<td headers="la"> <a href="http://lists.w3.org/Archives/Public/wai-xtech"
 title="Cross Working Group Technical Issues list archives">archive</a></td>
<td headers="ls"> <a href="mailto:wai-xtech-request@w3.org" 
title="Subscribe or Unsubscribe from the Cross-Working Group Technical Issues list"
 >subscribe/unsubscribe</a></td>
</tr>

</table>

 

scope

For sample code, please refer to ExplicitAssociationPatterns#head-5863a518c17510a69b5f858ae1655e8b25db3246: Example 2 of the "tabindex" attribute. To test the scope and tabindex attributes defined for a FORM embedded in a TABLE.


The title Attribute

Example 1: Hyperlink title Collides With Hyperlink Text and title Expansion for contained ACRONYM

 
Converted to <a href="http://www.w3.org/WAI/References/HTML4-access" 
title="Accessibility Improvements in HTML4"><acronym 
title="HyperText Markup Language, version 4">HTML4</acronym></a> & 
<a href="http://www.w3.org/TR/CSS-access" 
title="Accessibility Features of Cascading Style Sheets, level 2"
><acronym title="Cascading Stylesheets, Level 2">CSS2</acronym></a> on 
April 1, 1999
 

Explicit Association Patterns in HTML5

The hr Element

Source: HTML5, Section 3.9.2. The hr element

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

 
<hr title="End of Page 14; Begin Page 15">
 

The hreflang Attribute

Source: HTML5 Definition of hrefleng

 

 

The id Attribute

Source: HTML5 3.4.1. The id attribute

The id attribute represents its element's unique identifier. The value must be unique in the subtree within which the element finds itself and must contain at least one character. The value must not contain any space characters.

If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the subtree the element finds itself (e.g. for selectors in CSS or for the getElementById() method in the DOM).

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.

The id DOM attribute must reflect the id content attribute.


The lang attribute

Source: HTML5, Section 3.4.3. The lang (HTML only) and xml:lang (XML only) attributes

The lang attribute specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid RFC 3066 language code, or the empty string. [RFC3066]

The xml:lang attribute is defined in XML.

If these attributes are omitted from an element, then it implies that the language of this element is the same as the language of the parent element. Setting the attribute to the empty string indicates that the primary language is unknown.

The lang attribute may only be used on elements of HTML documents. Authors must not use the lang attribute in XML documents.

The xml:lang attribute may only be used on elements of XML documents. Authors must not use the xml:lang attribute in HTML documents.

To determine the language of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang or xml:lang attribute set. That specifies the language of the node.

If both the xml:lang attribute and the lang attribute are set on an element, user agents must use the xml:lang attribute, and the lang attribute must be ignored for the purposes of determining the element's language. If no explicit language is given for the root element, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language. In the absence of any language information, the default value is unknown (the empty string). User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronounciations, or for dictionary selection).

The lang DOM attribute must reflect the lang content attribute.


The LINK Element

Source: HTML5, Section 3.7.4. The link Element

The link element allows authors to indicate explicit relationships between their document and other resources.

The destination of the link is given by the href attribute, which must be present and must contain a URI (or IRI). If the href attribute is absent, then the element does not define a link.

The type of link indicated (the relationship) is given by the value of the [rel attribute, which must be present, and must have a value that is an unordered set of space-separated tokens. The allowed values and their meanings are defined in a later section. If the rel attribute is absent, or if the value used is not allowed according to the definitions in this specification, then the element does not define a link.

Two categories of links can be created using the link element. Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents. The link types section defines whether a particular link type is an external resource or a hyperlink. One element can create multiple links (of which some might be external resource links and some might be hyperlinks). User agents should process the links on a per-link basis, not a per-element basis.

The exact behaviour for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below). For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available even if the resource is not applied. (However, user agents may opt to only fetch such resources when they are needed, instead of pro-actively downloading all the external resources that are not applied.) Interactive user agents should provide users with a means to follow the hyperlinks created using the link element, somewhere within their user interface. The exact interface is not defined by this specification, but it should include the following information (obtained from the element's attributes, again as defined below), in some form or another (possibly simplified), for each hyperlink created with each link element in the document:

  • The relationship between this document and the resource (given by the rel attribute)
  • The title of the resource (given by the title attribute).
  • The URI of the resource (given by the href attribute).
  • The language of the resource (given by the hreflang attribute).
  • The optimum media for the resource (given by the media attribute).

User agents may also include other information, such as the type of the resource (as given by the type attribute).

 
<link rel="stylesheet" href="A" type="text/css">
<link rel="stylesheet" href="B" type="text/plain">
<link rel="stylesheet" href="C">
 

...then a compliant UA that supported only CSS style sheets would fetch the A and C files, and skip the B file (since text/plain is not the MIME type for CSS style sheets). For these two files, it would then check the actual types returned by the UA. For those that are sent as text/css, it would apply the styles, but for those labelled as text/plain, or any other type, it would not.

The title Attribute

Source: HTML5, Section 3.4.2. The title attribute

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.

If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information.

If the title attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.

Some elements, such as link and dfn, define additional semantics for the title attribute beyond the semantics described above.

The title DOM attribute must reflect the title content attribute.


Proposed Explicit Association Patterns for HTML5


Related Resources


Email

Thread: Patterns for explicit associations