< 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

  1. Title of data table is inside the <caption> element.
  2. Column headers are inside <th scope="col"> elements.
  3. Row headers are inside <th scope="row"> elements.
  4. Avoid using blank header cells.
  5. 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

  1. Title of data table is inside the <caption> element.
  2. Column headers are inside <th scope="col"> elements.
  3. Column headers that span more than one column include a colspan attribute with the number of columns spanned as the value and scope="colgroup".
  4. Row headers are inside <th scope="row"> elements.
  5. Row headers that span more than one row include a rowspan attribute with the number of rows spanned as the value and scope="rowgroup".
  6. Avoid using blank header cells.
  7. Header cells with text abbreviations that need expansion use the title attribute with the expanded text set as the value.
  8. 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
RateTaxable Income BracketTax 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 GroupApplicantsWhitesLatinosAfrican Americans
These Applicants Were Denied a MortgageApplicants whose income was below the median income15%25%30%
Applicants whose income was above the median income11%26%30%
These Applicants Were Charged Higher Interest (given subprime loan)Applicants who had 100% to 120% of median income14%36%43%

Adjustments made to reconcile net income to net cash provided by operating activities
ItemAdjustment 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.
YearMen’s Income in DollarsWomen’s Income in DollarsWomen’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
ItemSub-ItemSub-Item20182017Increase
(Decrease)
AssetsCurrent 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
LiabilitiesCurrent 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 EquityCommon 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