Skip to content

Instantly share code, notes, and snippets.

@aarongustafson
Last active December 11, 2015 15:39
  • Star 19 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save aarongustafson/4622706 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

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
Copy link

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