Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Strategy for Undoing Tables
<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:laura.smith@domain.com">laura.smith@domain.com</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:ron.johnson@domain.com">ron.johnson@domain.com</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>
// 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;
}
}
}
@yatil

This comment has been minimized.

yatil commented Jan 24, 2013

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.
@aarongustafson

This comment has been minimized.

Owner

aarongustafson commented Jan 24, 2013

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?

@stevenbenisek

This comment has been minimized.

stevenbenisek commented Feb 3, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment