Web Survey with Form Controls Labelled by Hidden LABEL

Accessibility Features of Example

The label element content provides effective labels to form controls of following types:
- input element of type="radio" and type="checkbox"
- select element
Since the form controls of this survey form are densely packed, the label element contents are hidden entirely or partially from the visual rendering using CSS technique of absolute positioning (i.e. use position: absolute; top: -20em; left: -200em).
The hidden labels for input element of type="radio" and type="checkbox" include the following information:
- the question number
- the type of question
- the rating value
The hidden part of the labels for select elements include the following information:
- the question number
Navigation and Orientation to Survey Questions
- The question numbers are available to the speech user as part of the label elements to orient them to the question number before reading the question text, but are hidden for the graphical rendering.
- Question text is placed within headings (h3) to provide direct navigation to questions using heading navigation commands.
- tabindex attribute is used on the question text to help screen reader users orient to the question as they TAB through the form controls. Most browsers will move keyboard focus to any element that contains a tabindex attribute value greater than or equal to zero.
- The tabindex attribute is only valid on links and form controls, so using tabindex on other elements will result in validation errors. To get around this problem the tabindex value can be set using javascript after the page loads.

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
Desired --
the number that represents the level of service that you personally want
Perceived --
the number that represents the level of service that you believe our library currently provides

For each item, you must EITHER rate the item in all three columns OR identify the item as "N/A" (not applicable). Selecting "N/A" will override all other answers for that item.

Survey Questions

When it comes to..			My Minimum Service Level Is									My Desired Service Level Is									Perceived Service Performance Is
		N/A	Low				High					Low				High					Low				High
1)	Question 1 Employees who instill confidence in users	Question 1 does not apply	Minimum service rating 1, lowest, for question 1	Minimum service rating 2 for question 1	Minimum service rating 3 for question 1	Minimum service rating 4 for question 1	Minimum service rating 5 for question 1	Minimum service rating 6 for question 1	Minimum service rating 7 for question 1	Minimum service rating 8 for question 1	Minimum service rating 9, highest, for question 1	Desired service rating 1, lowest, for question 1	Desired service rating 2 for question 1	Desired service rating 3 for question 1	Desired service rating 4 for question 1	Desired service rating 5 for question 1	Desired service rating 6 for question 1	Desired service rating 7 for question 1	Desired service rating 8 for question 1	Desired service rating 9, highest, for question 1	Perceived service rating 1, lowest, for question 1	Perceived service rating 2 for question 1	Perceived service rating 3 for question 1	Perceived service rating 4 for question 1	Perceived service rating 5 for question 1	Perceived service rating 6 for question 1	Perceived service rating 7 for question 1	Perceived service rating 8 for question 1	Perceived service rating 9, highest, for question 1
		n/a	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9
2)	Question 2 Making electronic resources accessible from my home or office	Question 2 does not apply	Minimum service rating 1, lowest, for question 2	Minimum service rating 2 for question 2	Minimum service rating 3 for question 2	Minimum service rating 4 for question 2	Minimum service rating 5 for question 2	Minimum service rating 6 for question 2	Minimum service rating 7 for question 2	Minimum service rating 8 for question 2	Minimum service rating 9, highest, for question 2	Desired service rating 1, lowest, for question 2	Desired service rating 2 for question 2	Desired service rating 3 for question 2	Desired service rating 4 for question 2	Desired service rating 5 for question 2	Desired service rating 6 for question 2	Desired service rating 7 for question 2	Desired service rating 8 for question 2	Desired service rating 9, highest, for question 2	Perceived service rating 1, lowest, for question 2	Perceived service rating 2 for question 2	Perceived service rating 3 for question 2	Perceived service rating 4 for question 2	Perceived service rating 5 for question 2	Perceived service rating 6 for question 2	Perceived service rating 7 for question 2	Perceived service rating 8 for question 2	Perceived service rating 9, highest, for question 2
		n/a	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9
3)	Question 3 Library space that inspires study and learning	Question 3 does not apply	Minimum service rating 1, lowest, for question 3	Minimum service rating 2 for question 3	Minimum service rating 3 for question 3	Minimum service rating 4 for question 3	Minimum service rating 5 for question 3	Minimum service rating 6 for question 3	Minimum service rating 7 for question 3	Minimum service rating 8 for question 3	Minimum service rating 9, highest, for question 3	Desired service rating 1, lowest, for question 3	Desired service rating 2 for question 3	Desired service rating 3 for question 3	Desired service rating 4 for question 3	Desired service rating 5 for question 3	Desired service rating 6 for question 3	Desired service rating 7 for question 3	Desired service rating 8 for question 3	Desired service rating 9, highest, for question 3	Perceived service rating 1, lowest, for question 3	Perceived service rating 2 for question 3	Perceived service rating 3 for question 3	Perceived service rating 4 for question 3	Perceived service rating 5 for question 3	Perceived service rating 6 for question 3	Perceived service rating 7 for question 3	Perceived service rating 8 for question 3	Perceived service rating 9, highest, for question 3
		n/a	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9
4)	Question 4 Giving users individual attention	Question 4 does not apply	Minimum service rating 1, lowest, for question 4	Minimum service rating 2 for question 4	Minimum service rating 3 for question 4	Minimum service rating 4 for question 4	Minimum service rating 5 for question 4	Minimum service rating 6 for question 4	Minimum service rating 7 for question 4	Minimum service rating 8 for question 4	Minimum service rating 9, highest, for question 4	Desired service rating 1, lowest, for question 4	Desired service rating 2 for question 4	Desired service rating 3 for question 4	Desired service rating 4 for question 4	Desired service rating 5 for question 4	Desired service rating 6 for question 4	Desired service rating 7 for question 4	Desired service rating 8 for question 4	Desired service rating 9, highest, for question 4	Perceived service rating 1, lowest, for question 4	Perceived service rating 2 for question 4	Perceived service rating 3 for question 4	Perceived service rating 4 for question 4	Perceived service rating 5 for question 4	Perceived service rating 6 for question 4	Perceived service rating 7 for question 4	Perceived service rating 8 for question 4	Perceived service rating 9, highest, for question 4
		n/a	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9
5)	Question 5 A library Web site enabling me to locate information on my own	Question 5 does not apply	Minimum service rating 1, lowest, for question 5	Minimum service rating 2 for question 5	Minimum service rating 3 for question 5	Minimum service rating 4 for question 5	Minimum service rating 5 for question 5	Minimum service rating 6 for question 5	Minimum service rating 7 for question 5	Minimum service rating 8 for question 5	Minimum service rating 9, highest, for question 5	Desired service rating 1, lowest, for question 5	Desired service rating 2 for question 5	Desired service rating 3 for question 5	Desired service rating 4 for question 5	Desired service rating 5 for question 5	Desired service rating 6 for question 5	Desired service rating 7 for question 5	Desired service rating 8 for question 5	Desired service rating 9, highest, for question 5	Perceived service rating 1, lowest, for question 5	Perceived service rating 2 for question 5	Perceived service rating 3 for question 5	Perceived service rating 4 for question 5	Perceived service rating 5 for question 5	Perceived service rating 6 for question 5	Perceived service rating 7 for question 5	Perceived service rating 8 for question 5	Perceived service rating 9, highest, for question 5
		n/a	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9	1	2	3	4	5	6	7	8	9

Please indicate your library usage patterns:
6)	Question 6 The library helps me stay abreast of developments in my field(s) of interest.	Minimum service rating 1, lowest, for question 6: The library helps me stay abreast of developments in my field(s) of interest.	Minimum service rating 2 for question 6	Minimum service rating 3 for question 6	Minimum service rating 4 for question 6	Minimum service rating 5 for question 6	Minimum service rating 6 for question 6	Minimum service rating 7 for question 6	Minimum service rating 8 for question 6	Minimum service rating 9, highest, for question 6: The library helps me stay abreast of developments in my field(s) of interest.
		1	2	3	4	5	6	7	8	9
		Strongly Disagree					Strongly Agree
7)	Question 7 The library aids my advancement in my academic discipline or work.	Minimum service rating 1, lowest, for question 7: The library aids my advancement in my academic discipline or work.	Minimum service rating 2 for question 7	Minimum service rating 3 for question 7	Minimum service rating 4 for question 7	Minimum service rating 5 for question 7	Minimum service rating 6 for question 7	Minimum service rating 7 for question 7	Minimum service rating 8 for question 7	Minimum service rating 9, highest, for question 7: The library aids my advancement in my academic discipline or work.
		1	2	3	4	5	6	7	8	9
		Strongly Disagree					Strongly Agree
8)	Question 8 The library enables me to be more efficient in my academic pursuits or work.	Minimum service rating 1, lowest, for question 8: The library enables me to be more efficient in my academic pursuits or work.	Minimum service rating 2 for question 8	Minimum service rating 3 for question 8	Minimum service rating 4 for question 8	Minimum service rating 5 for question 8	Minimum service rating 6 for question 8	Minimum service rating 7 for question 8	Minimum service rating 8 for question 8	Minimum service rating 9, highest, for question 8: The library enables me to be more efficient in my academic pursuits or work.
		1	2	3	4	5	6	7	8	9
		Strongly Disagree					Strongly Agree
9)	Question 9 The library helps me distinguish between trustworthy and untrustworthy information.	Minimum service rating 1, lowest, for question 9: The library helps me distinguish between trustworthy and untrustworthy information.	Minimum service rating 2 for question 9	Minimum service rating 3 for question 9	Minimum service rating 4 for question 9	Minimum service rating 5 for question 9	Minimum service rating 6 for question 9	Minimum service rating 7 for question 9	Minimum service rating 8 for question 9	Minimum service rating 9, highest, for question 9: The library helps me distinguish between trustworthy and untrustworthy information.
		1	2	3	4	5	6	7	8	9
		Strongly Disagree					Strongly Agree
10)	Question 10 The library provides me with the information skills I need in my work or study.	Minimum service rating 1, lowest, for question 10: The library provides me with the information skills I need in my work or study.	Minimum service rating 2 for question 10	Minimum service rating 3 for question 10	Minimum service rating 4 for question 10	Minimum service rating 5 for question 10	Minimum service rating 6 for question 10	Minimum service rating 7 for question 10	Minimum service rating 8 for question 10	Minimum service rating 9, highest, for question 10: The library provides me with the information skills I need in my work or study.
		1	2	3	4	5	6	7	8	9
		Strongly Disagree					Strongly Agree

Please answer a few questions about yourself:
11)	Question 11 The library that you use the most often:
12)	Question 12 Age:
13)	Question 13 Sex:
14)	Question 14 Discipline:

HTML Code

<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:</p>
    <ul class="survey">
       <li><div>Minimum --</div> the number that represents the minimum level of service that you would find acceptable</li>
       <li><div>Desired --</div> the number that represents the level of service that you personally want</li>
       <li><div>Perceived --</div> the number that represents the level of service that you believe our library currently provides</li>
    </ul>
    <p>For each item, you must EITHER rate the item in all three columns OR identify the item as "N/A" (not applicable). Selecting "N/A" will override all other answers for that item.</p>
  </div>
  <div tabindex="0">
    <h3>Survey Questions</h3>
  </div>
  <table class="survey" cellspacing="0" cellpadding="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>
        <th id="des_s1" colspan="9" class="column">My Desired<br/>Service Level Is</th>
        <th id="per_s1" colspan="9" class="column">Perceived Service<br/>Performance Is</th>
      </tr>
      <tr>
        <th colspan="2"> </th>
        <th id="na_s1" class="na"><abbr title="Not Applicable">N/A</abbr></th>
        <th class="low"  colspan="4">Low</th>
        <th class="high" colspan="5">High</th>
        <th class="low"  colspan="4">Low</th>
        <th class="high" colspan="5">High</th>
        <th class="low"  colspan="4">Low</th>
        <th class="high" colspan="5">High</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           1)
        </td>
        <td class="question" align="left" valign="middle">
          <div tabindex="0">
            <h3><span class="hidden">Question 1</span> Employees who instill confidence in users</h3>
          </div>
        </td>
        <td class="low" align="center" valign="middle">
           <input class="low" type="checkbox" name="s1_q1_na" id="s1_q1_na"/>
           <label class="hidden" for="s1_q1_na">Question 1 does not apply</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_1"/>
           <label class="hidden" for="s1_q1_min_1">Minimum service rating 1, lowest, for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_2"/>
           <label class="hidden" for="s1_q1_min_2">Minimum service rating 2 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_3"/>
           <label class="hidden" for="s1_q1_min_3">Minimum service rating 3 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_4"/>
           <label class="hidden" for="s1_q1_min_4">Minimum service rating 4 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_5"/>
           <label class="hidden" for="s1_q1_min_5">Minimum service rating 5 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_6"/>
           <label class="hidden" for="s1_q1_min_6">Minimum service rating 6 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_7"/>
           <label class="hidden" for="s1_q1_min_7">Minimum service rating 7 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_8"/>
           <label class="hidden" for="s1_q1_min_8">Minimum service rating 8 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_min" id="s1_q1_min_9"/>
           <label class="hidden" for="s1_q1_min_9">Minimum service rating 9, highest, for question 1</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_1"/>
           <label class="hidden" for="s1_q1_des_1">Desired service rating 1, lowest, for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_2"/>
           <label class="hidden" for="s1_q1_des_2">Desired service rating 2 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_3"/>
           <label class="hidden" for="s1_q1_des_3">Desired service rating 3 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_4"/>
           <label class="hidden" for="s1_q1_des_4">Desired service rating 4 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_5"/>
           <label class="hidden" for="s1_q1_des_5">Desired service rating 5 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_6"/>
           <label class="hidden" for="s1_q1_des_6">Desired service rating 6 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_7"/>
           <label class="hidden" for="s1_q1_des_7">Desired service rating 7 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_8"/>
           <label class="hidden" for="s1_q1_des_8">Desired service rating 8 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_des" id="s1_q1_des_9"/>
           <label class="hidden" for="s1_q1_des_9">Desired service rating 9, highest, for question 1</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_1"/>
           <label class="hidden" for="s1_q1_per_1">Perceived service rating 1, lowest, for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_2"/>
           <label class="hidden" for="s1_q1_per_2">Perceived service rating 2 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_3"/>
           <label class="hidden" for="s1_q1_per_3">Perceived service rating 3 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_4"/>
           <label class="hidden" for="s1_q1_per_4">Perceived service rating 4 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_5"/>
           <label class="hidden" for="s1_q1_per_5">Perceived service rating 5 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_6"/>
           <label class="hidden" for="s1_q1_per_6">Perceived service rating 6 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_7"/>
           <label class="hidden" for="s1_q1_per_7">Perceived service rating 7 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_8"/>
           <label class="hidden" for="s1_q1_per_8">Perceived service rating 8 for question 1</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q1_per" id="s1_q1_per_9"/>
           <label class="hidden" for="s1_q1_per_9">Perceived service rating 9, highest, for question 1</label>
        </td>
      </tr>
      <tr class="odd">
        <td colspan="2"> </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>
        <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>
        <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">
            <h3><span class="hidden">Question 2</span> Making electronic resources accessible from my home or office</h3>
          </div>
        </td>
        <td class="low" align="center" valign="middle">
           <input class="low" type="checkbox" name="s1_q2_na" id="s1_q2_na"/>
           <label class="hidden" for="s1_q2_na">Question 2 does not apply</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_1"/>
           <label class="hidden" for="s1_q2_min_1">Minimum service rating 1, lowest, for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_2"/>
           <label class="hidden" for="s1_q2_min_2">Minimum service rating 2 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_3"/>
           <label class="hidden" for="s1_q2_min_3">Minimum service rating 3 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_4"/>
           <label class="hidden" for="s1_q2_min_4">Minimum service rating 4 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_5"/>
           <label class="hidden" for="s1_q2_min_5">Minimum service rating 5 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_6"/>
           <label class="hidden" for="s1_q2_min_6">Minimum service rating 6 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_7"/>
           <label class="hidden" for="s1_q2_min_7">Minimum service rating 7 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_8"/>
           <label class="hidden" for="s1_q2_min_8">Minimum service rating 8 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_min" id="s1_q2_min_9"/>
           <label class="hidden" for="s1_q2_min_9">Minimum service rating 9, highest, for question 2</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_1"/>
           <label class="hidden" for="s1_q2_des_1">Desired service rating 1, lowest, for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_2"/>
           <label class="hidden" for="s1_q2_des_2">Desired service rating 2 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_3"/>
           <label class="hidden" for="s1_q2_des_3">Desired service rating 3 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_4"/>
           <label class="hidden" for="s1_q2_des_4">Desired service rating 4 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_5"/>
           <label class="hidden" for="s1_q2_des_5">Desired service rating 5 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_6"/>
           <label class="hidden" for="s1_q2_des_6">Desired service rating 6 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_7"/>
           <label class="hidden" for="s1_q2_des_7">Desired service rating 7 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_8"/>
           <label class="hidden" for="s1_q2_des_8">Desired service rating 8 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_des" id="s1_q2_des_9"/>
           <label class="hidden" for="s1_q2_des_9">Desired service rating 9, highest, for question 2</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_1"/>
           <label class="hidden" for="s1_q2_per_1">Perceived service rating 1, lowest, for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_2"/>
           <label class="hidden" for="s1_q2_per_2">Perceived service rating 2 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_3"/>
           <label class="hidden" for="s1_q2_per_3">Perceived service rating 3 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_4"/>
           <label class="hidden" for="s1_q2_per_4">Perceived service rating 4 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_5"/>
           <label class="hidden" for="s1_q2_per_5">Perceived service rating 5 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_6"/>
           <label class="hidden" for="s1_q2_per_6">Perceived service rating 6 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_7"/>
           <label class="hidden" for="s1_q2_per_7">Perceived service rating 7 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_8"/>
           <label class="hidden" for="s1_q2_per_8">Perceived service rating 8 for question 2</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q2_per" id="s1_q2_per_9"/>
           <label class="hidden" for="s1_q2_per_9">Perceived service rating 9, highest, for question 2</label>
        </td>
      </tr>
      <tr class="even">
        <td colspan="2"> </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>
        <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>
        <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="odd top">
        <td class="number" align="left" valign="middle">
           3)
        </td>
        <td class="question" align="left" valign="middle">
          <div tabindex="0">
            <h3><span class="hidden">Question 3</span> Library space that inspires study and learning</h3>
          </div>
        </td>
        <td class="low" align="center" valign="middle">
           <input class="low" type="checkbox" name="s1_q3_na" id="s1_q3_na"/>
           <label class="hidden" for="s1_q3_na">Question 3 does not apply</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_1"/>
           <label class="hidden" for="s1_q3_min_1">Minimum service rating 1, lowest, for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_2"/>
           <label class="hidden" for="s1_q3_min_2">Minimum service rating 2 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_3"/>
           <label class="hidden" for="s1_q3_min_3">Minimum service rating 3 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_4"/>
           <label class="hidden" for="s1_q3_min_4">Minimum service rating 4 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_5"/>
           <label class="hidden" for="s1_q3_min_5">Minimum service rating 5 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_6"/>
           <label class="hidden" for="s1_q3_min_6">Minimum service rating 6 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_7"/>
           <label class="hidden" for="s1_q3_min_7">Minimum service rating 7 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_8"/>
           <label class="hidden" for="s1_q3_min_8">Minimum service rating 8 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_min" id="s1_q3_min_9"/>
           <label class="hidden" for="s1_q3_min_9">Minimum service rating 9, highest, for question 3</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_1"/>
           <label class="hidden" for="s1_q3_des_1">Desired service rating 1, lowest, for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_2"/>
           <label class="hidden" for="s1_q3_des_2">Desired service rating 2 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_3"/>
           <label class="hidden" for="s1_q3_des_3">Desired service rating 3 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_4"/>
           <label class="hidden" for="s1_q3_des_4">Desired service rating 4 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_5"/>
           <label class="hidden" for="s1_q3_des_5">Desired service rating 5 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_6"/>
           <label class="hidden" for="s1_q3_des_6">Desired service rating 6 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_7"/>
           <label class="hidden" for="s1_q3_des_7">Desired service rating 7 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_8"/>
           <label class="hidden" for="s1_q3_des_8">Desired service rating 8 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_des" id="s1_q3_des_9"/>
           <label class="hidden" for="s1_q3_des_9">Desired service rating 9, highest, for question 3</label>
        </td>
        <td class="low radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_per" id="s1_q3_per_1"/>
           <label class="hidden" for="s1_q3_per_1">Perceived service rating 1, lowest, for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_per" id="s1_q3_per_2"/>
           <label class="hidden" for="s1_q3_per_2">Perceived service rating 2 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <input type="radio" name="s1_q3_per" id="s1_q3_per_3"/>
           <label class="hidden" for="s1_q3_per_3">Perceived service rating 3 for question 3</label>
        </td>
        <td class="radio" align="center" valign="middle">
           <i

Bread Crumbs

Web Survey with Form Controls Labelled by Hidden LABEL

Accessibility Features of Example

Example

Survey Instructions

Survey Questions

Question 1 Employees who instill confidence in users

Question 2 Making electronic resources accessible from my home or office

Question 3 Library space that inspires study and learning

Question 4 Giving users individual attention

Question 5 A library Web site enabling me to locate information on my own

Question 6 The library helps me stay abreast of developments in my field(s) of interest.

Question 7 The library aids my advancement in my academic discipline or work.

Question 8 The library enables me to be more efficient in my academic pursuits or work.

Question 9 The library helps me distinguish between trustworthy and untrustworthy information.

Question 10 The library provides me with the information skills I need in my work or study.

Question 11 The library that you use the most often:

Question 12 Age:

Question 13 Sex:

Question 14 Discipline:

HTML Code