Skip to content

Instantly share code, notes, and snippets.

@cannona

cannona/index.html

Created May 1, 2015 21:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cannona/bfcdf44884e930d936bb to your computer and use it in GitHub Desktop.
Save cannona/bfcdf44884e930d936bb to your computer and use it in GitHub Desktop.
Download ZIP
Accessible Table Example // source http://jsbin.com/jamina
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Accessible Table Example</title>
<style id="jsbin-css">
.ascending .when-descending, .descending .when-ascending {
display: none;
}
.screenreader-only {
color: #0000FF;
}
</style>
</head>
<body>
<h1>Accessible Table Example</h1>
<p>
Screen reader only text, instead of being invisible, looks like
<span class="screenreader-only">this</span>
for demonstration purposes.
</p>
<table>
<tr>
<td>
<input id="select-all" type="checkbox"/>
<label for="select-all">Select All</label>
</td>
<th scope="col">
<button id="sort" class="ascending">
Name
<span class="screenreader-only">
<span class="when-ascending">(Ascending.</span>
<span class="when-descending">(Descending.</span>
</span>
</button>
</th>
<th scope="col">
Description
</th>
</tr>
<tr>
<td>
<input id="select-first" type="checkbox"/>
<label for="select-first" class="screenreader-only">Select first.</label>
</td>
<th scope="row">
<a href="#">First</a>
</th>
<td>
This is the first.
</td>
</tr>
<tr>
<td>
<input id="select-second" type="checkbox"/>
<label for="select-second" class="screenreader-only">Select second.</label>
</td>
<th scope="row">
<a href="#">Second</a>
</th>
<td>
This is the second.
</td>
</tr>
<tr>
<td>
<input id="select-third" type="checkbox"/>
<label for="select-third" class="screenreader-only">Select third.</label>
</td>
<th scope="row">
<a href="#">Third</a>
</th>
<td>
This is the third.
</td>
</tr>
</table>
<script id="jsbin-javascript">
$(document).ready(function () {
var $itemCheckboxes = $(':checkbox').not(':first');
var $selectAllCheckbox = $('#select-all');
$('#sort').click(function () {
$(this).toggleClass('ascending descending');
});
$selectAllCheckbox.change(function () {
if (this.checked) {
$itemCheckboxes.prop('checked', true);
} else {
$itemCheckboxes.prop('checked', false);
}
});
$itemCheckboxes.change(function () {
if ($selectAllCheckbox[0].checked && !this.checked) {
$selectAllCheckbox.prop('checked', false);
}
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>Accessible Table Example</title>
</head>
<body>
<h1>Accessible Table Example</h1>
<p>
Screen reader only text, instead of being invisible, looks like
<span class="screenreader-only">this</span>
for demonstration purposes.
</p>
<table>
<tr>
<td>
<input id="select-all" type="checkbox"/>
<label for="select-all">Select All</label>
</td>
<th scope="col">
<button id="sort" class="ascending">
Name
<span class="screenreader-only">
<span class="when-ascending">(Ascending.</span>
<span class="when-descending">(Descending.</span>
</span>
</button>
</th>
<th scope="col">
Description
</th>
</tr>
<tr>
<td>
<input id="select-first" type="checkbox"/>
<label for="select-first" class="screenreader-only">Select first.</label>
</td>
<th scope="row">
<a href="#">First</a>
</th>
<td>
This is the first.
</td>
</tr>
<tr>
<td>
<input id="select-second" type="checkbox"/>
<label for="select-second" class="screenreader-only">Select second.</label>
</td>
<th scope="row">
<a href="#">Second</a>
</th>
<td>
This is the second.
</td>
</tr>
<tr>
<td>
<input id="select-third" type="checkbox"/>
<label for="select-third" class="screenreader-only">Select third.</label>
</td>
<th scope="row">
<a href="#">Third</a>
</th>
<td>
This is the third.
</td>
</tr>
</table>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.ascending .when-descending, .descending .when-ascending {
display: none;
}
.screenreader-only {
color: #0000FF;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function () {
var $itemCheckboxes = $(':checkbox').not(':first');
var $selectAllCheckbox = $('#select-all');
$('#sort').click(function () {
$(this).toggleClass('ascending descending');
});
$selectAllCheckbox.change(function () {
if (this.checked) {
$itemCheckboxes.prop('checked', true);
} else {
$itemCheckboxes.prop('checked', false);
}
});
$itemCheckboxes.change(function () {
if ($selectAllCheckbox[0].checked && !this.checked) {
$selectAllCheckbox.prop('checked', false);
}
});
});</script></body>
</html>
Raw
jsbin.jamina.css
.ascending .when-descending, .descending .when-ascending {
display: none;
}
.screenreader-only {
color: #0000FF;
}
Raw
jsbin.jamina.js
$(document).ready(function () {
var $itemCheckboxes = $(':checkbox').not(':first');
var $selectAllCheckbox = $('#select-all');
$('#sort').click(function () {
$(this).toggleClass('ascending descending');
});
$selectAllCheckbox.change(function () {
if (this.checked) {
$itemCheckboxes.prop('checked', true);
} else {
$itemCheckboxes.prop('checked', false);
}
});
$itemCheckboxes.change(function () {
if ($selectAllCheckbox[0].checked && !this.checked) {
$selectAllCheckbox.prop('checked', false);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment