Matrix questions

HTML & CSS
1

Matrix questions are pretty common in surveys etc, but how would you mark them up properly in HTML?

An example question that I found: http://cdn.content.compendiumblog.com/uploads/user/b8bbc9ab-67b1-4a8e-ac5c-5811daa967bd/e8aea8b9-a088-4126-9569-2bd7f1f30889/Image/b752391225b0eb355166abca53c012aa.jpg

Radio buttons (or checkboxes) without a corresponding label is bad practice, so I guess each radio button should have a label which is somehow hidden with CSS…


<h2>Please agree or disagree with the following:</h2>
<table>
  <thead>
    <tr>
      <th>Statement</th>
      <th>Strongly Agree</th>
      <th>Agree</th>
      <th>Neutral</th>
      <th>Disagree</th>
      <th>Strongly Disagree</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>The company's current activities reflect a strong focus on the client</th>
      <td><input id="answer-1-1" name="answer-1" type="radio"><label for="answer-1-1">Strongly Agree</label></td>
      <td><input id="answer-1-2" name="answer-1" type="radio"><label for="answer-1-2">Agree</label></td>
      <td><input id="answer-1-3" name="answer-1" type="radio"><label for="answer-1-3">Neutral</label></td>
      <td><input id="answer-1-4" name="answer-1" type="radio"><label for="answer-1-4">Disagree</label></td>
      <td><input id="answer-1-5" name="answer-1" type="radio"><label for="answer-1-5">Strongly Disagree</label></td>
    </tr>
  </tbody>
</table>

Good/bad?

The fieldset tag is nowhere to be found, and that’s usually a bad sign when using a number of radio buttons :slight_smile:

But if a fieldset tag was to be used, how/where would it be used? Wrap the whole table in a fieldset and replace the h2 with a legend?

On the other hand, I guess each row in the table could logically be a fieldset on its own… Which of course doesn’t work markup-wise, since you can’t have each tr in a fieldset… Maybe a table shouldn’t be used at all?

Suggestions?