4 Table Basics

On This Page

Key Takeaways

  • All tables must have a caption.
  • All cells must have an associated header.
  • Cells should never be empty.
  • Don’t merge cells or create unusual table layouts.

Overview

Tables, even simple ones, are typically difficult for screen reader users to navigate and interpret. Proper formatting is essential for making tables accessible.

To be accessible, a table must have all of the following:

  • Introductory text that provides context to the data
  • A caption
  • A header row or column
  • Headers with scope specified (see Table Headers section)
  • No empty cells

For premade templates made with HTML, please see Appendix: Common HTML Templates.

Announcing A Table

A text introduction before a table provides:

  1. Navigation information for screen reader users
  2. Information needed to understand the table’s contents

The text introduction lets screen reader users know that they’re about to navigate a table and explains its purpose. This provides context to audience members so they can evaluate the data in a meaningful way. If there are other features of the table that are new, unusual, or may not be typically announced by screen readers, these features should also be described. Unusual features may include:

  • Bold, italic, or underlined text
  • Symbols and abbreviations that have not been previously defined
  • Superscripts that indicate footnotes

Example: Announcing a Table

An online course include a table of formulas, their names, and some information regarding their use. The formulas use some conventions that are specific to the course field, which may be new to some learners. In addition, the table contains some footnotes that are located underneath the table.

Correct

“The following table lists key formulas you will learn during this module. For the homework assignment, you will need to know when to apply each formula based on the scenarios listed. Superscript numbers indicate footnotes that list exceptions to these rules. The X notation indicates when to do Y.”

Incorrect

“Note the key formulas that you will need for this module. Pay close attention to item ‘a’.”

This example is incorrect because:

  • The example mentions “key formulas”, but does not indicate they are in a table.
  • Item ‘a’ is not described as a footnote.
  • Unusual notation is not described before the table.

Captions

Captions are labels that are associated directly with tables. While a text introduction is separate from a table, a caption is part of the table itself.

Captions are used to provide short, memorable descriptions of tables. They are useful for announcing the purpose of a table to screen reader users before they start the process of reading it. This is especially useful if there are multiple tables on a page, when screen reader users may need to switch between tables or search for what they’re looking for. In addition, labeling tables helps all audience members distinguish between multiple, similar-looking tables.

Captions are not titles, and should only be capitalized for the beginning letter and any proper nouns. However, if the table’s caption is also a proper title, then copy the title’s capitalization. Titles should be kept as short as possible and contain only information necessary for understanding and distinguishing unique tables.

Example: Captions

A paper includes an abbreviated table of climate data for Bloomington, Indiana. Similar tables are included elsewhere in the document for each of the IU campuses. What should the table caption be?

(Note: this example does not include any field-specific standard practices regarding labeling, and is for demonstration purposes only.)

Correct

“Climate data for Bloomington, Indiana (truncated)”

Incorrect

“Climate Data, Including Temperature, Precipitation, and Barometric Pressure, For Bloomington, Indiana, 1920-2020”

This example is incorrect because:

  • The caption should not be capitalized like a title, unless that is the exact title of a table published by another party.
  • Information about the data types (temperature, etc.) are the same in all tables, so are not useful for identification purposes. This information could be better included in a text introduction, especially since the caption is so long.
  • The fact that the table is abbreviated is not mentioned in the caption.

Table Headers

Every cell in a table must have an associated header. Headers are titles that communicate the structure of the data. They are essential for screen reader users, but often very useful for everyone.

Interface Method

Canvas includes the option to apply headers and captions via interface. To use this option:

  1. Create your table and enter the header text in the cells where they should appear.
  2. Click the “Accessibility Checker” button.
  3. Follow the directions to fix any flagged errors. When the table you’re working on comes up:
    1. Enter a caption, if needed.
    2. Choose what type of headers the table should have. See below for details.

Types of Headers

Table headers come in multiple types. For most tables, you’ll only need the row and column (col) types. Header type is specified in HTML by applying scope to the header tag.

Most tables have a row of headers at the top and the data underneath. For these tables, you can specify a scope of col, as shown below.

<th scope="col">header text here</th>

Sometimes you’ll see tables with a column of headers on the left and data to the right. For these tables, you can specify a scope of row, as shown below.

<th scope="row">header text here</th>

On rare occasions, you may see a table with a row of headers at the top and a column of headers on the left. In this situation, you should do the following:

  • Apply scope="col" to all headers in the top row
  • Apply scope="row" to all headers on the left, excluding the top header (which should have a scope of col).

For examples of tables with a header row and a header column, please see Appendix: Common HTML Templates.

Handling Empty Cells

Table cells can’t be left empty. Most of the time, you can just add explanatory text, such as:

  • No data
  • Not Applicable or N/A

Other times, it might be necessary to change the way the data is presented so all cells contain something, such as:

  • Data that has an X to indicate “yes” and blank to indicate “no” can be changed to simply “Yes” or “No”

If a cell must absolutely appear blank to support understanding of the content (such as with accounting journal entries), place the following code in HTML editor where the cell contents would be. This produces white text that says “No Data”, which will be read by screen readers but will not be seen unless the cell is highlighted.

<span style=”color:#fff;”>No Data</span>

More Resources

License

Accessibility and UDL Best Practices Guide Copyright © by Caitlin Malone. All Rights Reserved.