< Back to Demos | Learn more at PaulJAdam.com >
Creating Accessible Data Tables for Screen Reader Users
Screen Reader Support of Various Data Table Attributes and Tags
Attribute |
VO macOS Safari |
VO iOS Safari |
NVDA Firefox |
TalkBack Chrome |
TalkBack Firefox |
JAWS IE |
Narrator Edge |
<caption> |
Yes |
Yes |
|
Yes |
Yes |
|
|
headers |
No |
No |
|
|
|
|
|
<th> |
Yes |
Yes |
|
Yes |
Yes |
|
|
scope |
No |
No |
|
Partial |
No |
|
|
summary |
Yes |
Yes |
|
No |
Yes |
|
|
title |
Yes |
|
|
Yes |
No |
|
|
Simple Data Tables
Instructions
- Title of data table is inside the <caption> element.
- Column headers are inside <th scope="col"> elements.
- Row headers are inside <th scope="row"> elements.
- Avoid using blank header cells.
- Header cells with text abbreviations that need expansion use the title attribute with the expanded text set as the value.
Code
Right-click and hit inspect element on the data tables to view the accessible code.
Output
Simple Data Table Example of WAI-ARIA Attributes Accessibility Support
Role/Attribute |
VO macOS Safari |
VO iOS Safari |
TalkBack Chrome |
TalkBack Firefox |
NVDA Firefox |
NVDA IE |
aria-expanded |
Yes |
Yes |
Yes |
Yes |
Yes |
|
aria-required |
Yes |
Yes |
|
|
|
|
aria-current |
Yes |
Yes |
|
|
|
|
aria-label |
|
|
|
|
|
|
Show Table Accessibility Properties Reset Page
Complex Data Tables
Instructions
- Title of data table is inside the <caption> element.
- Column headers are inside <th scope="col"> elements.
- Column headers that span more than one column include a colspan attribute with the number of columns spanned as the value and scope="colgroup".
- Row headers are inside <th scope="row"> elements.
- Row headers that span more than one row include a rowspan attribute with the number of rows spanned as the value and scope="rowgroup".
- Avoid using blank header cells.
- Header cells with text abbreviations that need expansion use the title attribute with the expanded text set as the value.
- Headers attribute may not be necessary if table header rowspan and colspan is sufficient.
Code
Right-click and hit inspect element on the data tables to view the accessible code.
Output
Complex Data Table Example of WAI-ARIA Attributes Accessibility Support
Screen Reader |
VoiceOver |
TalkBack |
NVDA |
Browser |
macOS Safari |
iOS Safari |
Chrome |
Firefox |
Firefox |
IE |
aria-expanded |
Yes |
Yes |
Yes |
Yes |
Yes |
|
aria-required |
Yes |
Yes |
|
|
|
|
aria-current |
Yes |
Yes |
|
|
|
|
aria-label |
|
|
|
|
|
|
Show Table Accessibility Properties Reset Page
More Accessible Data Table Examples
Table 13.1
2018 Single Filer Taxable Income Tax Brackets and Rates
Rate | Taxable Income Bracket | Tax Owed |
10% |
$0 to $9,525 |
10% of taxable income |
12% |
$9,526 to $38,700 |
$952.50 plus 12% of the amount over $9525 |
22% |
$38,701 to $82,500 |
$4,453.50 plus 22% of the amount over $38,700 |
24% |
$82,501 to $157,500 |
$14,089.50 plus 24% of the amount over $82,500 |
32% |
$157,501 to $200,000 |
$32,089.50 plus 32% of the amount over $157,500 |
35% |
$200,001 to $500,000 |
$45,689.50 plus 35% of the amount over $200,000 |
37% |
$ 500 , 001 + |
$150,689.50 plus 37% of the amount over $500,000 |
Figure 12.2
Buying a House: Institutional Discrimination and Predatory Lending
SOURCE: By the author. Based on Kochbar and Gonzalez-Barerra 2009.
Applicant Group | Applicants | Whites | Latinos | African Americans |
These Applicants Were Denied a Mortgage | Applicants whose income was below the median income | 15% | 25% | 30% |
Applicants whose income was above the median income | 11% | 26% | 30% |
These Applicants Were Charged Higher Interest (given subprime loan) | Applicants who had 100% to 120% of median income | 14% | 36% | 43% |
Adjustments made to reconcile net income to net cash provided by operating activities
Item | Adjustment to net income on statement of cash flows |
Depreciation, Depletion, and Amortization Expense |
Increase |
Gains on Disposal of Long-term Assets |
Decrease |
Losses on Disposal of Long-term Assets |
Increase |
Increases in Current Assets other than Cash |
Decrease |
Decreases in Current Assets other than Cash |
Increase |
Increases in Current Liabilities |
Increase |
Decreases in Current Liabilities |
Decrease |
Figure 11.8
The Gender Gap Over Time: What Percentage of Men's Income Do Women Earn?
SOURCE: By the author. Based on Statistical Abstract of the United States 1995:Table 739; 2017:Table 730, and earlier years; and Figure 11.7 of this chapter.
Year | Men’s Income in Dollars | Women’s Income in Dollars | Women’s Income as a Percentage of Men’s income |
1960 |
$5,434 |
$3,296 |
61% |
1965 |
$6,598 |
$3,816 |
58% |
1970 |
$9,184 |
$5,440 |
59% |
1975 |
$12,934 |
$7,719 |
60% |
1980 |
$19,173 |
$11,159 |
60% |
1985 |
$24,999 |
$16,252 |
65% |
1990 |
$28,979 |
$20,591 |
71% |
1995 |
$40,367 |
$26,547 |
66% |
2000 |
$50,241 |
$32,940 |
66% |
2005 |
$56,187 |
$39,046 |
69% |
2015 |
$69,513 |
$51,634 |
74% |
2020 (author’s estimate) |
$80,000 |
$55,000 |
69% |
SHOPMART, INC.
Comparative Balance Sheet
December 31, 2018 and 2017
Item | Sub-Item | Sub-Item | 2018 | 2017 | Increase (Decrease) |
Assets | Current Assets: | Cash | $22,000 | $42,000 | $(20,000) |
Accounts Receivable | $90,000 | $73,000 | $17,000 |
Merchandise Inventory | $143,000 | $145,000 | $(2,000) |
Long-term Assets: | Plant Assets | $507,000 | $252,000 | $255,000 |
Accumulated Depreciation--Plan Assets | $(47,000) | $(42,000) | $(5,000) |
Total Assets: | $715,000 | $470,000 | $245,000 |
Liabilities | Current Liabilities: | Accounts Payable | $90,000 | $50,000 | $40,000 |
Accrued Liabilities | $5,000 | $10,000 | $(5,000) |
Long-term Liabilities: | Notes Payable | $160,000 | $80,000 | $80,000 |
Total Liabilities | $255,000 | $140,000 | $115,000 |
Stockholder's Equity | Common Stock, no par | $370,000 | $250,000 | $120,000 |
Retained Earnings | $110,000 | $80,000 | $30,000 |
Treasury Stock | $(20,000) | $0 | $(20,000) |
Total Stockholder's Equity | $460,000 | $330,000 | $130,000 |
Total Liabilities and Stockholder's Equity | $715,000 | $470,000 | $245,000 |