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;
    }
  }
}

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.