Basic Accessible Table Markup

table_508_simple.html

<!-- Summary is deprecated -->
<div class="table-responsive">
<table id="tableid" aria-describedby="captionid">
<caption id="captionid" role="alert" aria-live="polite">[Data] sorted by [column header]</caption> 
<colgroup>
	<col />
	<col />
</colgroup>
<col />
<col />
<col />
<thead>
	<tr>	
		<th scope="col" aria-sort="ascending">heading 1</th>
		<th scope="col" aria-sort="none">heading 2</th>
		<th scope="col" aria-sort="none">heading 3</th>
		<th scope="col" aria-sort="none">heading 4</th>
		<th scope="col" aria-sort="none">heading 5</th>
	</tr>
</thead>
<tfoot>
	<tr>	
		<td>footer 1</td>
		<td>footer 2</td>
		<td>footer 3</td>
		<td>footer 4</td>
		<td>footer 5</td>
	</tr>
</tfoot>
<tbody>
	<tr>
		<th scope="row">row header</th>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</tbody>
</table>
</div>
<!---
Header columns must indicate if and how they are sorted.

Add a title attribute to the sortable links. The title's value should indicate how the column would be sorted when the user selects it:
<th aria-sort="none" …>
    <a … title="Sort [column header] ascending">Make</a>
</th>

/* Re-establish Caption, Header Link title attribute and ARIA sort attribute 
    linkID[0] = Header Link Text, linkID[1] = Sort Text
*/
if (linkID[1] == "asc") {
     $(this).attr("title", "Sort " + linkID[0] + " descending");
     $(this).parent().attr("aria-sort", "ascending");
     $("#tableid caption")[0].innerHTML = "[Data] Sorted by " + linkID[0] + ": Ascending Order";
}
else {
    $(this).attr("title", "Sort " + linkID[0] + " ascending");
    $(this).parent().attr("aria-sort", "descending");
    $("#tableid caption")[0].innerHTML = "[Data] Sorted by " + linkID[0] + ": Descending Order";
}
--->