< 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

<table>
<caption>
Simple Data Table Example of WAI-ARIA Attributes Accessibility Support
</caption>
<tbody>
<tr>
<th scope="col">Role/Attribute</th>
<th scope="col" title="VoiceOver macOS Safari">VO macOS Safari</th>
<th scope="col" title="VoiceOver iOS Safari">VO iOS Safari</th>
<th scope="col">TalkBack Chrome</th>
<th scope="col">TalkBack Firefox</th>
<th scope="col" title="Non-Visual Desktop Access Firefox">NVDA Firefox</th>
<th scope="col" title="Non-Visual Desktop Access Internet Explorer">NVDA IE</th>
</tr>
<tr>
<th scope="row">aria-expanded</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-required</th>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-current</th>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-label</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

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

<table>
<caption>
Complex Data Table Example of WAI-ARIA Attributes Accessibility Support
</caption>
<thead>
<tr>
<th scope="row">Screen Reader</th>
<th colspan="2" scope="colgroup">VoiceOver</th>
<th colspan="2" scope="colgroup">TalkBack</th>
<th colspan="2" title="Non-Visual Desktop Access" scope="colgroup">NVDA</th>
</tr>
<tr>
<th scope="row">Browser</th>
<th scope="col">macOS Safari</th>
<th scope="col">iOS Safari</th>
<th scope="col">Chrome</th>
<th scope="col">Firefox</th>
<th scope="col">Firefox</th>
<th scope="col" title="Internet Explorer">IE</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">aria-expanded</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-required</th>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-current</th>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">aria-label</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

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