< Back to Demos | Learn more at PaulJAdam.com >
Accounting Tables
Table with two row headers, one spanning multiple rows. Column headers visually hidden with height: 0px; font-size:0px;
CAMPUS APARTMENT LOCATORS
Income Statement
Month Ended July 31, 2018
| Income Type |
Revenue or Expense |
Debit |
Credit |
| Revenues: |
Service Revenue |
|
$ 1,900 |
| Expenses: |
Rent Expense |
$ 400 |
|
| Utilities Expense |
100 |
|
| Total Expenses |
|
500 |
| Net Income |
|
|
$ 1,400 |
*VoiceOver iOS did not speak visually hidden column headers that used the CSS clip method.
Table with two row headers, one spanning multiple rows. Column headers are not hidden. Same as table above just showing the column headers.
CAMPUS APARTMENT LOCATORS
Income Statement
Month Ended July 31, 2018
| Income Type |
Revenue or Expense |
Debit |
Credit |
| Revenues: |
Service Revenue |
|
$ 1,900 |
| Expenses: |
Rent Expense |
$ 400 |
|
| Utilities Expense |
100 |
|
| Total Expenses |
|
500 |
| Net Income |
|
|
$ 1,400 |
*VoiceOver iOS speaks only the first row header for each data cell. But the unique row header is in the second column and is not spoken to VoiceOver iOS. VoiceOver macOS handles this table well speaking all column and row headers as expected.
Table with multiple column headers in tbody. thead column headers visually hidden with height: 0px; font-size:0px;
CAMPUS APARTMENT LOCATORS
Income Statement
Month Ended July 31, 2018
| Revenue or Expense |
Debit |
Credit |
| Revenues: |
|
|
| Service Revenue |
|
$ 1,900 |
| Expenses: |
|
|
| Rent Expense |
$ 400 |
|
| Utilities Expense |
100 |
|
| Total Expenses |
|
500 |
| Net Income |
|
$ 1,400 |
*VoiceOver iOS speaks the row and column headers for each data cell. Column headers that span multiple columns inside the tbody are not spoken as column headers to VoiceOver on iOS or macOS. Because of the way this table is worded the it's not important for the strings "Revenues:" and "Expenses:" to be spoken as column headers to the screen reader.
*This data table is the best experience for mobile users.
**TalkBack on Android with Chrome has no data table accessibility support, row and column headers are not spoken for data cells.
***TalkBack on Android with Firefox has Excellent support for both techniques on this page. Better than VoiceOver.