Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add wai-aria roles
<table role="grid">
<thead>
<tr role="row">
<th scope="col" role="columnheader">Name</th>
<th scope="col" role="columnheader">Email</th>
<th scope="col" role="columnheader">Dept, Title</th>
<th scope="col" role="columnheader">Phone</th>
</tr>
</thead>
<tbody>
<tr class="vcard" role="row">
<th scope="row" class="n" data-title="Name" role="rowheader">
<b class="family-name">Smith</b>,
<b class="given-name">Laura</b>
</th>
<td data-title="Email" role="gridcell">
<a class="email" href="mailto:laura.smith@domain.com">laura.smith@domain.com</a>
</td>
<td data-title="Dept, Title" role="gridcell">Biology, Director</td>
<td class="tel" data-title="Phone" role="gridcell">
<a href="tel:+1123456789">123-456-789</a>
</td>
</tr>
<tr class="vcard" role="row">
<th scope="row" class="n" data-title="Name" role="rowheader">
<b class="family-name">Johnson</b>,
<b class="given-name">Ron</b>
</th>
<td data-title="Email" role="gridcell">
<a class="email" href="mailto:ron.johnson@domain.com">ron.johnson@domain.com</a>
</td>
<td data-title="Dept, Title" role="gridcell">Purchasing, Director</td>
<td class="tel" data-title="Phone" role="gridcell">
<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;
}
/*
* 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.