Back to home
HTML table - TH element at top only test
Test
- Table header instructions are announced
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>
<thead>
<tr>
<th tabindex="0" aria-label="Account name: No sort applied, activate to apply a descending sort">Account name</th>
<th tabindex="0" aria-label="Account type: No sort applied, activate to apply a descending sort">Account type</th>
<th tabindex="0" aria-label="BSB: No sort applied, activate to apply a descending sort">BSB</th>
<th tabindex="0" aria-label="Account number: No sort applied, activate to apply a descending sort">Account number</th>
<th tabindex="0" aria-label="Current Balance: No sort applied, activate to apply a descending sort">Current Balance</th>
<th tabindex="0" aria-label="Available Balance: No sort applied, activate to apply a descending sort">Available Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Personal account</td>
<td>Main Account</td>
<td>345678</td>
<td>012345678</td>
<td>$143,000.00</td>
<td>$113,000.00</td>
</tr>
<tr>
<td>Smith Co Main USA</td>
<td>Secondary Account</td>
<td>882349</td>
<td>1234567</td>
<td>$23,123.00</td>
<td>$22,991.00</td>
</tr>
</tbody>
</table>
Support chart - tab across headers
OS |
Browser |
NVDA 2014.4 |
JAWS 16 |
VoiceOver |
Windows 7 |
IE 11 |
x
|
x
|
|
Windows 7 |
IE 8 |
x
|
x
|
|
Windows 7 |
Chrome 39 |
x
|
x
|
|
Windows 7 |
Firefox 34 |
x
|
x
|
|
OSX 10.9 |
Chrome 39 |
|
|
x
|
OSX 10.9 |
Firefox 34 |
|
|
x
|
OSX 10.9 |
Safari 7 |
|
|
x
|
Bottom of page - Back to home