1

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>

1
  • The first row should be a caption element and CSS should be used instead of the border attribute and the b elements (should be th elements and in CSS font-weight: bold; - already by default on all known browsers but you can still write it)
    – FelipeAls
    Dec 30, 2011 at 22:18

3 Answers 3

2

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.

4
  • Ok easy enough, if I went with divs how would I specify that one div was a label (Height) and another was a value (160z)?
    – samwise
    Dec 30, 2011 at 18:44
  • Now that I'm thinking about it, I think a table makes sense here. Writing up an edit now.
    – sczizzo
    Dec 30, 2011 at 18:56
  • Hey that's great thanks! The only problem is I cannot change the UI, it has to go across so it would still be like this ( jsfiddle.net/AtKvC/2 ). Do you know if blending td/th like that is acceptable?
    – samwise
    Dec 30, 2011 at 19:20
  • Syntax-wise, totally acceptable. Judging by the scope attribute, though, I'd say the W3C only meant for one th per row or column. So if you're really worried about semantics, maybe just stick with td.
    – sczizzo
    Dec 30, 2011 at 19:37
1

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

2
  • In your second example, you're associating data cell with another data cell. I believe it's forbidden : Technique H43 is meant to associate data cells with header cells (and also "sub"-header cells with other header cells). Data cell=td and header cell=th, it should be <th id="header1">blah</th><td headers="header1">blah2</td>
    – FelipeAls
    Dec 30, 2011 at 21:46
  • looking at jimthatcher.com/webcourse9.htm#wc9.3 it seems that any cell could be used as a target for headers attribute (not only th elements): > "you attach an id attribute to any cell you want to be a header cell. Then, add the id's of each header cell to the headers attribute of a data cell." Dec 31, 2011 at 9:13
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.