HTML table - TH element at top only test

Test

Table can be sorted using keyboard only
Table headers announced including sorting functionality
Table headers announced after sorting occurs
Table data announced correctly after table sort - in order of new sort

Example

Account name	Account type	BSB	Account number	Current Balance	Available Balance
Personal account	Main Account	345678	012345678	$143,000.00	$113,000.00
Smith Co Main USA	Secondary Account	882349	1234567	$23,123.00	$22,991.00

Code sample - full table

<table id="accounts--list__table" class="">
	<thead>
		<tr class="">
			<th aria-label="Account name: Ascending sort applied, activate to apply a descending sort" aria-sort="ascending" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="0" class="col-1 col-md-3 tablesorter-header tablesorter-headerAsc">
				<div class="tablesorter-header-inner">Account name</div>
			</th>
			<th aria-label="Account type: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="1" class="col-2 col-md-2 tablesorter-header tablesorter-headerUnSorted">
				<div class="tablesorter-header-inner">Account type</div>
			</th>
			<th aria-label="BSB: No sort applied, activate to apply a descending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="2" class="col-md-1 text-right tablesorter-header tablesorter-headerUnSorted">
				<div class="tablesorter-header-inner">BSB</div>
			</th>
			<th aria-label="Account number: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="3" class="col-md-2 text-right tablesorter-header tablesorter-headerUnSorted"><div class="tablesorter-header-inner">Account number</div></th>
			<th aria-label="Current Balance: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="4" class="col-md-2 text-right tablesorter-header tablesorter-headerUnSorted"><div class="tablesorter-header-inner">Current Balance</div></th>
			<th aria-label="Available Balance: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="accounts--list__table" aria-disabled="false" role="columnheader" scope="col" tabindex="0" data-column="5" class="col-md-2 text-right tablesorter-header tablesorter-headerUnSorted"><div class="tablesorter-header-inner">Available Balance</div></th>
		</tr>
	</thead>
	<tbody aria-relevant="all" aria-live="polite">
		<tr>
			<td>Personal account</td>
			<td>Main Account</td>
			<td class="text-right">345678</td>
			<td class="text-right">012345678</td>
			<td class="text-right">$143,000.00</td>
			<td class="text-right available-balance">$113,000.00</td>
		</tr>
		<tr>
			<td>Smith Co Main USA</td>
			<td>Secondary Account</td>
			<td class="text-right">882349</td>
			<td class="text-right">1234567</td>
			<td class="text-right">$23,123.00</td>
			<td class="text-right available-balance">$22,991.00</td>
		</tr>
	</tbody>
</table>

Code sample - aria attributes only

<th 
	aria-label="Account name: No sort applied, activate to apply an ascending sort" 
	aria-sort="none" 
	style="-moz-user-select: none;" 
	unselectable="on" 
	aria-controls="accounts--list__table" 
	aria-disabled="false" 
	role="columnheader" 
	scope="col" 
	tabindex="0" 
	data-column="0" 
	class="tablesorter-header tablesorter-headerUnSorted">

<th 
	aria-label="Account name: Ascending sort applied, activate to apply a descending sort" 
	aria-sort="ascending" 
	style="-moz-user-select: none;" 
	unselectable="on" 
	aria-controls="accounts--list__table" 
	aria-disabled="false" 
	role="columnheader" 
	scope="col" 
	tabindex="0" 
	data-column="0" 
	class="tablesorter-header tablesorter-headerAsc">
	
<th
	aria-label="Account type: Descending sort applied, activate to apply an ascending sort" 
	aria-sort="descending" 
	style="-moz-user-select: none;" 
	unselectable="on"
	aria-controls="accounts--list__table"
	aria-disabled="false"
	role="columnheader"
	scope="col"
	tabindex="0"
	data-column="1"
	class="tablesorter-header tablesorter-headerDesc">

Support chart - keyboard
OS	Browser	Keyboard
Windows 7	IE 11	PASS
Windows 7	IE 8	PASS
Windows 7	Chrome 39	PASS
Windows 7	Firefox 34	PASS
OSX 10.9	Chrome 39	PASS
OSX 10.9	Firefox 34	PASS
OSX 10.9	Safari 7	PASS

Support chart - tab across headers
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Account type" "No sort applied" "Activate to apply an ascending sort" "Columnheader"	"Account type. Colon" "No sort applied" "Activate to apply an ascending sort" "Account type"
Windows 7	IE 8	Table does not render	Table does not render
Windows 7	Chrome 39	"Account type" "No sort applied" "Activate to apply an ascending sort"	"Account type. Colon" "No sort applied" "Activate to apply an ascending sort" "Account type"
Windows 7	Firefox 34	"Account type" "No sort applied" "Activate to apply an ascending sort" "Column header" "Selected editable" "Column 2"	"Account type. Colon" "No sort applied" "Activate to apply an ascending sort" "Use JAWS keys plus ALT plus M to move the controlled element" "Account type"
OSX 10.9	Chrome 39			"Account type" "No sort applied" "Activate to apply an ascending sort" "Account type"
OSX 10.9	Firefox 34			"Account type" "Group 2 of 6"
OSX 10.9	Safari 7			"Account type" "No sort applied" "Activate to apply an ascending sort" "Account type"

Support chart - activate sort
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	No announcement Return to cell: "Account type. Colon" "Ascending sort applied" "Activate to apply a descending sort" "Columnheader"	No announcement Return to cell: "Account type. Colon" "Ascending sort applied" "Activate to apply a descending sort" "Columnheader"
Windows 7	IE 8	Table does not render	Table does not render
Windows 7	Chrome 39	"Account type" "Ascending sort applied" "Activate to apply a descending sort"	No announcement Return to cell: "Account type. Colon" "Ascending sort applied" "Activate to apply a descending sort" "Columnheader" "Contained. Controlled"
Windows 7	Firefox 34	"Sorted ascending" "Account type" "Ascending sort applied" "Activate to apply a descending sort"	"Enter. Account descending" Begins to read table Return to cell: "Account type. Colon" "Ascending sort applied" "Activate to apply a descending sort" "Use JAWS keys plus ALT plus M to move the controlled element" "Sorted ascending" "Account type"
OSX 10.9	Chrome 39			No announcement
OSX 10.9	Firefox 34			No announcement
OSX 10.9	Safari 7			No announcement

Bottom of page - Back to home