Subheading Example

Accessibility Features of Example

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">&nbsp;</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>