A Strategy for Undoing Tables

undoing-tables.html

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Dept, Title</th>
      <th scope="col">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr class="vcard">
      <th scope="row" class="n" data-title="Name">
        <b class="family-name">Smith</b>,
        <b class="given-name">Laura</b>
      </th>
      <td data-title="Email">
        <a class="email" href="mailto:[email protected]">[email protected]</a>
      </td>
      <td data-title="Dept, Title">Biology, Director</td>
      <td class="tel" data-title="Phone">
        <a href="tel:+1123456789">123-456-789</a>
      </td>
    </tr>
    <tr class="vcard">
      <th scope="row" class="n" data-title="Name">
        <b class="family-name">Johnson</b>,
        <b class="given-name">Ron</b>
      </th>
      <td data-title="Email">
        <a class="email" href="mailto:[email protected]">[email protected]</a>
      </td>
      <td data-title="Dept, Title">Purchasing, Director</td>
      <td class="tel" data-title="Phone">
        <a href="tel:+11234567891">123-456-7891</a>
      </td>
    </tr>
  </tbody>
</table>

undoing-tables.scss

// undo tables for small screens
// $break-4 is the px-width break at which you want to cut it off
@media (max-width: px-to-ems($break-4 - 1px)) {
  
  // make each table separate from other ones
  table {

    border: 0;
    @include trailing-border;
    padding-bottom: 0;
    display: block;
    width: 100%;
    	
    // make sure captions are displayed
    caption {
      display: block;
    }
    
    /* 
     * wipe the thead from the face of the earth
     * modern screen readers will expose the 
     * generated content
     */
    thead {
      display: none;
      visibility: hidden;
    }
    
    /*
     * make everything display block so it 
     * aligns vertically
     */
    tbody, tr, th, td {
      border: 0;
      display: block;
      padding: 0;
      text-align: left;
      white-space: normal;
    }
    
    // give each row a little space
    tr {
      @include trailer;
    }
    
    /* Labeling
     * adding a data-title attribute to the cells
     * lets us add text before the content to provide
     * the missing context
     * 
     * Markup: 
     *   <td data-title="Column Header">Content Here</td>
     * 
     * Display:
     *   Column Header: Content Here
     */
    th[data-title]:before,
    td[data-title]:before {
      content: attr(data-title) ":\00A0";
      font-weight: bold;
    }
    th:not([data-title]) {
      font-weight: bold;
    }
    
    // hide empty cells
    td:empty {
      display: none;
    }
  }
}

That’s basically how I do it, too. Some notes:

• Probably you could just use the title attribute instead of an data-title on the table cells to make more out of the progressive enhancement. (And it may help people with screen magnifier, an additional benefit.)
• Hiding thead accessible AND using content: attr(data-title) ":\00A0"; doubles up the heading, which is undesired. I’d recommend adding role=presentation to the table with JavaScript to prevent double announcement.

Two things:

1. I am always wary of title as it is my understanding that it would be read out, which we would not want in this case as an appropriately-associated th (using scope) should be read out to the user. We would not want to double-up that info (per your second comment, above).
2. It is my understanding that generated content is purely presentational. It is not exposed via the DOM (i.e. is not accessible as a node, not selectable with the cursor, etc.) and as such should not be (and traditionally has not been) exposed to screenreaders for that very reason.

Have circumstances changed in either or both of these?

Oddly VoiceOver (Mac) ignores the implicit role for table after changing the display value of one of its required children to block. Explicitly adding the appropriate roles (https://gist.github.com/4698174) fixes this to a certain extent. The table regains its semantic meaning but there's still some discrepancy between visual and spoken rows/cells.