Make Tables Accessible on a Webpage

Making a table both visually pleasing and accessible is challenging. Only simple tables are accessible. (A simple table means that there is a maximum of one header row and one header column.) If a table is too complex, you may consider providing a description or summary of the table. Another option is to provide an image of the table and put the description or summary in the “image description” option.

An example of a complex table:

example of a complex table with merged cells and columns

An example of a simple table and a suggestion on simplifying the above table:

Simpler table the same content as the last table

To make tables accessible, consider the following criteria:

  • Don't Merge Cells:Even with headers properly marked, if cells are merged, a screen reader could find it difficult to determine which cell is which when cells become merged; therefore it is recommended not to merge cells.
  • Avoid blank cells: Use N/A or null for blank cells. For a visually pleasing table, the N/A font color can be the same as background color so it cannot be seen, but the screen reader will still detect it.
  • Add Titles (Captions) for Tables: It is also a good practice to provide titles/captions for tables, even for sighted users. To do this, you just need to check Caption option when inserting the table.

Resource:

NOTE: Most web text editor table tools do not allow easy customization of the header row and header column. The following table is an accessible table with its html code below. You can copy the code and paste it to the html View (or Code View, Text View) of the web text editor, then click back to the Visual View (or Live View). You can edit the content of the table

Sample table example

HTML code:

<table>
<caption>
Compare the Language
</caption>
<tbody>
<tr>
<th scope="col">Color</th>
<th scope="col">Spanish</th>
<th scope="col">French</th>
</tr>
<tr>
<th scope="row">Black</th>
<td>negro</td>
<td>noir</td>
</tr>
<tr>
<th scope="row">White</th>
<td>blanco</td>
<td>blanc</td>
</tr>
<tr>
<th scope="row">Red</th>
<td>rojo</td>
<td>rouge</td>
</tr>
</tbody>
</table>

This page developed and maintained by IT, Center for Instruction & Technology. Send comments and suggestions to cit@ccri.edu.

If you have difficulty accessing the information on this page, please contact Web Services.


Top
Last Updated: 12/29/16