Tables

Tables should only be used when presenting data and not for display purposes – this causes difficulties with screen readers used by persons with visual and other disabilities. Screen readers (used by persons with visual and other disabilities) will read aloud each header and cell as presented and the context can be confusing without additional code markup.

Consider accessibility

  • Include a Header Row: The first row of the table should state what kind of information is contained in each column (rows go across and columns go down). This provides context for the data and assists screen readers in navigating the table.
  • Use a simple table structure: Avoid tables nested within other tables. Also, avoid merged or split cells. All of these will make it very difficult, if not impossible, for screen readers to read the information in the table aloud in a way that makes sense.
  • Add Alt Text to the table: It can be time-consuming to read a table with a screen reader. Use alt text to add a short summary of the information provided in the table so that screen reader users can decide if they want to read the table in its entirety (see tutorial links below for instructions).
  • Avoid blank cells: You should never leave the left uppermost cell blank, as it’s the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there’s nothing more in the table.
  • Don’t use screenshots of tables: Build a table in your document or website properly. A screen reader can’t read an image, so a person using a screen reader won’t know what data is contained in a screenshot of a table.

Accessible Code

This example covers tables that have a simple row header and a simple column header. In such tables, the relationship between the headers and data cells becomes quickly ambiguous.  Tables need to have header information in both the top row and the first column if these are important for understanding the information in tabular form.

For such tables, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scope attribute can be set to row or col to denote that a header applies to the entire row or column, respectively.

All header cells are marked up as <th> cells with scope attributes added.Without this information, some users would not easily understand the relationship between header and data cells.

  • In the header row, the col value for scope associates each header cell with the data cells in the column.
  • In the header column, the row value associates the individual headers with their rows.

Copy and paste the following into the description field after clicking on “Text”.

<table>
<tbody>
<tr>
<th scope=”col”>Collection</th>
<th scope=”col”>Circulation</th>
<th scope=”col”>Renewals</th>
<th scope=”col”>Limit per Card</th>
<th scope=”col”>Hold Period</th>
<th scope=”col”>Fine Rate</th>
</tr>

<tr>
<th scope=”row”></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td style=”width: 109px;”></td>
</tr>

… ADD MORE <tr> sections as needed, ensuring that the first cell is defined as <th scope=”row”>

</tbody>
</table>

For more information see Tables Tutorial from W3.org

Troubleshooting

If you have a table already, and still want to use it, know that tables can be tricky when editing. For display issues, check the code in the “Text” editor and see if height and width are specified for the table, which may conflict with more specifications of height and width for rows or cells.