Skip to Main Content

LibA11y: accessibility for LibGuides: 2.6 Tables

Better Tables

Screen readers read column and row headers to provide the listener with information on the tables' content and structure.

Solutions

Screenshot of table properties menu in LibGuides.

  • Use tables for data that fits well into rows and columns.
  • Do not use tables for formatting pages, links, or other information.
  • Always use table headers to describe the contents of the table columns.
  • The table headers should clearly communicate the data below them.
  • Avoid spanned rows as screen readers may not properly parse them.

Example

Here is an example default 3x2 table with a header created within LibGuide's rich text editor (screenshot at right). It's key you identify which row or column is the table header.

State State Capital
Ohio Columbus
Indiana Indianapolis
Kentucky Frankfort

Common coding error

A common error with tables is incorrectly identifying the table header. As noted above, you can identify the header with a dropdown in LibGuide's table builder. However, if your table already exists, look at the code of the table header cells. In the case above, state and state capitol are the header cells. If these cells are identified as <td> (table data cell), it will receive an error. To correct it, go into the "Source" and change <td> and </td> to <th> and </th> so it looks like this...

<thead>
<tr>
<th>State</th>
<th>State Capital</th>
</tr>
</thead>