http://www.w3.org/TR/WCAG-TECHS/H43.html
Note: this example is HTML 4 closed </td> and </th>
| Homework | Exams | Projects | ||||
|---|---|---|---|---|---|---|
| 1 | 2 | Final | 1 | 2 | Final | |
| 15% | 15% | 15% | 20% | 10% | 10% | 15% |
<table border="1">
< tr>
< th width="73"
rowspan="2" id="h">Homework</th>
< th colspan="3"
id="e">Exams</th>
< th colspan="3"
id="p">Projects</th>
< /tr>
< tr>
< th
width="29" id="e1" headers="e">1</th>
< th width="29" id="e2"
headers="e">2</th>
< th width="52" id="ef"
headers="e">Final</th>
< th width="34" id="p1"
headers="p">1</th>
< th width="33" id="p2"
headers="p">2</th>
< th width="46" id="pf"
headers="p">Final</th>
< /tr>
< tr>
< td
headers="h">15%</td>
< td headers="e e1">15%</td>
< td headers="e e2">15%</td>
< td headers="e
ef">20%</td>
< td headers="p p1">10%</td>
< td
headers="p p2">10%</td>
< td headers="p pf">15%</td>
< /tr>
< /table>
http://www.w3.org/TR/WCAG-TECHS/H63.html
| Name | Phone# | Fax# | City | |
|---|---|---|---|---|
| 1. | Joel Garner | 412-212-5421 | 412-212-5400 | Pittsburgh |
| 2. | Clive Lloyd | 410-306-1420 | 410-306-5400 | Baltimore |
| 3. | Gordon Greenidge | 281-564-6720 | 281-511-6600 | Houston |
<table border="1">
< caption>Contact
Information</caption>
< tr>
< td></td>
< th
scope="col">Name</th>
< th scope="col">Phone#</th>
< th scope="col">Fax#</th>
< th
scope="col">City</th>
< /tr><tr>
< td>1.</td>
< th scope="row">Joel Garner</th>
< td>412-212-5421</td>
< td>412-212-5400</td>
< td>Pittsburgh</td>
< /tr><tr>
< td>2.</td>
< th scope="row">Clive Lloyd</th>
< td>410-306-1420</td>
< td>410-306-5400</td>
< td>Baltimore</td>
< /tr><tr>
< td>3.</td>
< th scope="row">Gordon
Greenidge</th>
< td>281-564-6720</td>
< td>281-511-6600</td>
< td>Houston</td>
< /tr>
< /table>
http://www.w3.org/TR/WCAG-TECHS/H44.html
<label for="firstname"> First name:</label>
< input type="text" name="firstname" id="firstname" />
<input type="checkbox" id="markuplang" name="computerskills"
checked="checked">
< label
for="markuplang">HTML</label>
<fieldset>
<legend>Choose a donut
type</legend>
<form action="http://example.com/donut"
method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate"
/>
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input
type="radio" name="flavor" id="honey" value="honey"/>
<label
for="honey">Honey Glazed</label><br/>
<input
type="submit" value="Purchase Donuts"/>
</p>
</form>
</fieldset>
Several options:
<p>
< label for="phone">Telephone:</label>
< input type="text" name="phone" id="phone" />
< /p>
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text"
size="3" value="" >
<input id="exchange" name="exchange" title="First
three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone
number"
type="text" size="4" value="" >
</fieldset>
http://www.w3.org/TR/WCAG-TECHS/H57.html
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"
xml:lang="fr">
http://www.w3.org/TR/WCAG-TECHS/H71.html
<fieldset>
<legend>The play
<cite>Hamlet</cite> was written by:</legend>
<input
type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label
for="kipling">Rudyard Kipling</label><br />
<input
type="radio" id="gbshaw" name="hamlet" value="c">
<label
for="gbshaw">George Bernard Shaw</label><br />
<input
type="radio" id="hem" name="hamlet" value="d">
<label
for="hem">Ernest Hemingway</label><br />
<input
type="radio" id="dickens" name="hamlet" value="e">
<label
for="dickens">Charles Dickens</label>
</fieldset>
<fieldset>
<legend>I am interested in the following
(check all that apply):</legend>
<input type="checkbox" id="photo"
name="interests" value="ph">
<label
for="photo">Photography</label><br />
<input
type="checkbox" id="watercol" name="interests" checked="checked"
value="wa">
<label for="watercol">Watercolor</label><br
/>
<input type="checkbox" id="acrylic" name="interests"
checked="checked" value="ac">
<label
for="acrylic">Acrylic</label>
…
</fieldset>
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred
philosopher</legend>
<input type="radio" name="philosopher"
id="philosopher_socrates" value="socrates"/>
<label
for="philosopher_socrates">Socrates</label>
<input type="radio"
name="philosopher" id="philosopher_plato" value="plato"/>
<label
for="philosopher_plato">Plato</label>
<input type="radio"
name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form>
<form action="http://example.com/adduser"
method="post">
< fieldset>
< legend>Residential
Address</legend>
< label for="raddress">Address:
</label>
< input type="text" id="raddress" name="raddress" />
< label for="rzip">Postal/Zip Code: </label>
< input
type="text" id="rzip" name="rzip" />
...more residential address
information...
< /fieldset>
< fieldset>
< legend>Postal Address</legend>
< label
for="paddress">Address: </label>
< input type="text"
id="paddress" name="paddress" />
< label for="pzip">Postal/Zip Code:
</label>
< input type="text" id="pzip" name="pzip" />
...more
postal address information...
< /fieldset>
< /form>
http://www.w3.org/TR/WCAG20-TECHS/C7
Washington has announced plans to stimulate economic growth. Washington stimulates economic growth Full Story
<p>Washington has announced plans to stimulate economic growth.
< a
href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
<style>a span { height: 1px; width: 1px; position: absolute;
overflow: hidden; top: -100px; } </style>
This is a good technique for table headers that should be longer but column width limits.
The following example shows how landmarks might be added to an HTML4 and XHTML 1.0 document. Th AT user or keyboard only user can use the landmarks to jump over sections of a page that they are not interested in.:
<div id="header" role="banner">A banner image and introductory
title</div><div id="sitelookup"
role="search">....</div>
< div id="nav"
role="navigation">...a list of links here ... </div>
< div
id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement
here...</div>
< div id="footer" role="contentinfo">(c)The
Freedom Company, 123 Freedom Way, Helpville, USA</div>
The following example shows a best practice of how a aria-label could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.
<div id="leftnav" role="navigaton" aria-label="Main
Navigation">
<ul><li>...a list of links here
...</li></ul> </div>
<div id="rightnav" role="navigation"
aria-label="Secondary Navigation"> <ul><li>...a list of links
here ...</li> </ul></div>
Describing the purpose of a link in HTML using the aria-label element
<h4>Neighborhood News</h4>
<p id="p1">Seminole
tax hike: Seminole city managers are proposing a 75% increase in property
taxes.
<a href="taxhike.html"
aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year. [Read more...]
The following example shows a best practice of how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.
<div role="region" aria-label="weather portlet"> ... </div>
Below is an example of aria-labelledby used on a Landmark heading role value. The region of the document to which the heading pertains to could be marked with the aria-labelledby property containing the value of the id for the header.
<div role="main" aria-labelledby="hdr1">
<h4 id="hdr1">News Stories ..
This example should replace the "read more" link text at the end of the teaser text with the content of the h2 heading referenced by aria-labelledby.
<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast,
causing flooding in many coastal towns. <a href="news.html"
aria-labelledby="headline">Read more...</a></p>
Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns. Read more...
The following example concatenates a link name through aria-labelledby referencing both the report title, "2012 Sales Report", and the respective file type, (PDF, Word, or Powerpoint).
Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby.
<p id="report-title">Download 2012 Sales
Report:
< a aria-labelledby="report-title pdf" href="#"
id="pdf">PDF</a> |
< a aria-labelledby="report-title doc"
href="#" id="doc">Word</a> |
< a aria-labelledby="report-title
ppt" href="#" id="ppt">Powerpoint</a></p>
Download 2012 Sales Report:PDF |Word |Powerpoint
Identifying the purpose of a link using link text combined with its enclosing list item technique</a>
Identifying the purpose of a link using link text combined with its enclosing list item technique
Coming soon to a town near you...the final 15 in the National Folk Festival lineup. [Read more...]
Performers from the upcoming National Folk Festival receive National Heritage Fellowships. [Read more...]
This example demonstrates how the aria-live attribute can be used to create automatic error notifications in an HTML5 form.
Error! Please enter your name.