Printer-friendly page
Screen-friendly pageSubheading Example
Accessibility Features of Example
- All heading elements (
h1,h2,h3, andh4) must contain content. - The words in the one and only
h1element are also in thetitleelement. - The
h2,h3, andh4elements are properly nested. - Contents of heading elements of the same level are unique.
- Contents of heading elements are concise, i.e. less than 65 characters.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iCITA: Web Survey with Form Controls Labelled by Hidden LABEL</title>
</head>
<body>
<h1>Web Survey with Form Controls Labelled by Hidden LABEL</h1>
<h2><a name="description"></a>Accessibility Features of Example</h2>
<ul>
<li>The <code>label</code> element content provides effective labels to form controls of following types: <code>input</code> element of <code>type="radio"</code> and <code>type="checkbox"</code>, and <code>select</code> element.</li>
<li>Since the form controls of this survey form are densely packed, the <code>label</code> element contents are hidden entirely or partially from the visual rendering using CSS technique of absolute positioning (i.e. use <code>position: absolute; top: -20em; left: -200em</code>).</li>
</ul>
<h2><a name="example"></a>Example</h2>
<form method="post" action="form-example-survey-label.php">
<div tabindex="0">
<h3>Survey Instructions</h3>
<p>Please rate the following statements (1 is lowest, 9 is highest) by indicating Minimum -- the number that represents the minimum level of service that you would find acceptable.</p>
</div>
<div tabindex="0">
<h3>Survey Questions</h3>
</div>
<table class="survey" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="prefix" id="pre_s1" colspan="2">When it comes to..</th>
<th class="column"> </th>
<th id="min_s1" colspan="9" class="column">My Minimum<br>Service Level Is</th>
</tr>
</thead>
<tbody>
<tr class="odd top">
<td class="number" align="left" valign="middle">
1)
</td>
<td class="question" align="left" valign="middle">
<h4>Employees who instill confidence in users</h4>
</td>
<td class="low rating" align="center" valign="middle"><abbr title="not applicable">n/a</abbr></td>
<td class="low rating" align="center" valign="middle">1</td>
<td class="rating" align="center" valign="middle">2</td>
<td class="rating" align="center" valign="middle">3</td>
<td class="rating" align="center" valign="middle">4</td>
<td class="rating" align="center" valign="middle">5</td>
<td class="rating" align="center" valign="middle">6</td>
<td class="rating" align="center" valign="middle">7</td>
<td class="rating" align="center" valign="middle">8</td>
<td class="rating" align="center" valign="middle">9</td>
</tr>
<tr class="even top">
<td class="number" align="left" valign="middle">
2)
</td>
<td class="question" align="left" valign="middle">
<div tabindex="0">
<h4>Making electronic resources accessible from my home</h4>
</div>
</td>
<td class="low rating" align="center" valign="middle"><abbr title="not applicable">n/a</abbr></td>
<td class="low rating" align="center" valign="middle">1</td>
<td class="rating" align="center" valign="middle">2</td>
<td class="rating" align="center" valign="middle">3</td>
<td class="rating" align="center" valign="middle">4</td>
<td class="rating" align="center" valign="middle">5</td>
<td class="rating" align="center" valign="middle">6</td>
<td class="rating" align="center" valign="middle">7</td>
<td class="rating" align="center" valign="middle">8</td>
<td class="rating" align="center" valign="middle">9</td>
</tr>
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iCITA: Web Survey with Form Controls Labelled by Hidden LABEL</title>
</head>
<body>
<h1>Web Survey with Form Controls Labelled by Hidden LABEL</h1>
<h2><a name="description"></a>Accessibility Features of Example</h2>
<ul>
<li>The <code>label</code> element content provides effective labels to form controls of following types: <code>input</code> element of <code>type="radio"</code> and <code>type="checkbox"</code>, and <code>select</code> element.</li>
<li>Since the form controls of this survey form are densely packed, the <code>label</code> element contents are hidden entirely or partially from the visual rendering using CSS technique of absolute positioning (i.e. use <code>position: absolute; top: -20em; left: -200em</code>).</li>
</ul>
<h2><a name="example"></a>Example</h2>
<form method="post" action="form-example-survey-label.php">
<div tabindex="0">
<h3>Survey Instructions</h3>
<p>Please rate the following statements (1 is lowest, 9 is highest) by indicating Minimum -- the number that represents the minimum level of service that you would find acceptable.</p>
</div>
<div tabindex="0">
<h3>Survey Questions</h3>
</div>
<table class="survey" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="prefix" id="pre_s1" colspan="2">When it comes to..</th>
<th class="column"> </th>
<th id="min_s1" colspan="9" class="column">My Minimum<br>Service Level Is</th>
</tr>
</thead>
<tbody>
<tr class="odd top">
<td class="number" align="left" valign="middle">
1)
</td>
<td class="question" align="left" valign="middle">
<h4>Employees who instill confidence in users</h4>
</td>
<td class="low rating" align="center" valign="middle"><abbr title="not applicable">n/a</abbr></td>
<td class="low rating" align="center" valign="middle">1</td>
<td class="rating" align="center" valign="middle">2</td>
<td class="rating" align="center" valign="middle">3</td>
<td class="rating" align="center" valign="middle">4</td>
<td class="rating" align="center" valign="middle">5</td>
<td class="rating" align="center" valign="middle">6</td>
<td class="rating" align="center" valign="middle">7</td>
<td class="rating" align="center" valign="middle">8</td>
<td class="rating" align="center" valign="middle">9</td>
</tr>
<tr class="even top">
<td class="number" align="left" valign="middle">
2)
</td>
<td class="question" align="left" valign="middle">
<div tabindex="0">
<h4>Making electronic resources accessible from my home</h4>
</div>
</td>
<td class="low rating" align="center" valign="middle"><abbr title="not applicable">n/a</abbr></td>
<td class="low rating" align="center" valign="middle">1</td>
<td class="rating" align="center" valign="middle">2</td>
<td class="rating" align="center" valign="middle">3</td>
<td class="rating" align="center" valign="middle">4</td>
<td class="rating" align="center" valign="middle">5</td>
<td class="rating" align="center" valign="middle">6</td>
<td class="rating" align="center" valign="middle">7</td>
<td class="rating" align="center" valign="middle">8</td>
<td class="rating" align="center" valign="middle">9</td>
</tr>
</tbody>
</table>
</body>
</html>