HTML Accessibility with grid data

Question

Here is a js fiddle of my example output: http://jsfiddle.net/Hdzv8/ and below is the html. This is a pretty simple display of information but how would you make this accessible? I can make divs instead of tables but I cannot change the overall structure. The problem I have is there currently is no indication that "Weight" is a header for "16oz". How would you go about (from an accessability standpoint) labeling these sections as headers?

<table border="5">
<tr>
    <td colspan="6">Device Information</td>
</tr>
<tr>
    <td><b>Weight</b></td><td>16oz</td>
    <td><b>Height</b></td><td>3in</td>
    <td><b>Color</b></td><td>Brown</td>
</tr>
<tr>
    <td><b>Manufacturer</b></td><td>ACME Manufacturing</td>
    <td><b>Disposal Method</b></td><td>Shoot into the sun</td>
    <td><b>Alternate Color</b></td><td>Black</td>
</tr>
<tr>
    <td><b>Installation Manual</b></td><td>ACME 45.51.2009</td>
    <td><b>CCRC Code</b></td><td>CCRC551</td>
    <td><b>USNumber</b></td><td>55un</td>
</tr>

Answer 1

If you're going to have more than one record, I would leave this as a table (it's actually tabular data) but use th for the headers. If it's just the one record, I would go with divs or the like; seems more like presentation than just data then. HTMLDog has a few tutorials on tables with a lot of advice on usage and accessibility.

Edit: On second thought, I might just make a two-column, nine-row table where each row designates a field (e.g. weight, height) and the first column uses th to specify the row header and the second column uses a td for the actual value. See this Fiddle for a working example.

Edit 2: This related SO post makes me think a definition or description list (using the dl tag) might be appropriate if you didn't want to use a table.

Answer 2

I don't know if this is possible with your real data (since I don't really see a clear column relation on your example) but you could also consider transforming the whole markup in one (or more) description list e.g.

<tr>
   <td><b>Weight</b></td><td>16oz</td>
   ...
</tr>

could become

<dl>
    <dt>Weight</dt><dd>16oz</dd>
    ...
</dl>

otherwise you can still use table with headers attribute like so

<tr>
   <td id="header1"><b>Weight</b></td><td headers="header1">16oz</td>
   ...
</tr>

source: http://www.w3.org/TR/WCAG20-TECHS/H43

Answer 3

If you have to keep that format, you don't need a table. Tables should only be used for rendering data that belongs naturally in a grid. If you have to keep this format you would be better off to use a description list instead and use CSS to style it into a bordered styled table.

If you do use a table, here is the proper way. Use css instead of html attributes for styling Use 'strong' in place of 'b' Use tabl Tables must use proper html formatting

<table class="myborderclass">
<caption>
Device Information
</caption>
<thead>
 <tr>
   <th scope="col">Weight</th>
   <th scope="col">Height</b></th>
   <td scope="col">Color</b></th>
   <th scope="col">Manufacturer</b></th>
   <th scope="col">Disposal Method</b></th>
   <th scope="col">Alternate Color</b></th>
   <th scope="col">Installation Manual</b></th>
   <th scope="col">CCRC Code</b></th>
   <th scope="col">USNumber</b></th>
 </tr>
</thead>
<tbody>
<tr>
   <td>16oz</td>
   <td>3 inches</td>
   <td>Brown</td>
   <td>ACME</td>
   <td>Shoot into the sun</td>
   <td>Black</td>
   <td>ACME 45.51.2009</td>
   <td>CCRC551</td>
   <td>55un</td>
  </tr>
 </tbody>
</table>