Search code examples
htmlcssaccessibilitysection508

HTML Accessibility with grid data

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>

Solution

  • 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.