Example 1 - Heading Example

Example Start

iCITA: Web Survey with Form Controls Labelled by Hidden LABEL

Web Survey with Form Controls Labelled by Hidden LABEL

Accessibility Features of Example

Example

Survey Instructions

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.

Survey Questions

When it comes to..   My Minimum
Service Level Is
1)

Employees who instill confidence in users

n/a 1 2 3 4 5 6 7 8 9
2)

Making electronic resources accessible from my home

n/a 1 2 3 4 5 6 7 8 9

Example End

Example Description

Related Rules

HTML Source 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>