Designing Tables

Caitlin Malone

8 Designing Tables

Attribution

The data table example on this page was suggested by Brian Richwine.

Key Takeaways

Tables should not be images unless they contain features that can’t be replicated with HTML.
Tables should be formatted with built-in table tools or HTML, never text formatting such as indents, spaces or columns.
Every cell should have its own header. Don’t merge cells or headers.
Headers should never be empty.
Lists should be used inside cells to organize data.

Overview

This page expands on Table Basics by discussing tables that require modification in order to be accessible.

Should It Be A Table?

Tables are useful tools, but they aren’t always the best solution for every situation. In general, tables are more difficult to navigate for screen reader users, so they should be used only when necessary. Poorly designed tables can also detract from the overall learner experience.

When evaluating a table, keep in mind:

Tables are best used to show and compare data.
Tables should not be used for page formatting, like making columns or callout boxes. For accessible ways to format pages, see Advanced HTML Techniques (COMING SOON).
Tables should not be used for lists.
- If the same information could be conveyed in a series of numbered steps, make the table a numbered list.
- If the table is a list of facts, turn it into a bulleted list.
- If the table is showing vocabulary and definitions, turn it into a definition list (will be added in future updates to this Pressbook).
Is the overall format of the table confusing? Could the information be better represented in a list, flowchart, equation, or paragraph of text?

Tables That Aren’t Tables

Tables are sometimes provided by an SME as an image or another inaccessible format. In general, if it looks like a table and can be recreated in HTML, it should be an HTML table.

You should recreate tables that are:

presented as images or screenshots
images of a table created in a program like Excel
formatted with plain text (using indents, spaces or columns to line up the data)

Note: if the table is contained in a stand-alone Excel spreadsheet that will be made available to learners, contact your local accessibility expert and/or ATAC for help to make the spreadsheet accessible.

What Can Be Recreated as HTML?

Tables that can be HTML
Item	Explanation	Example(s)
Most tables with data	Most tables, including tables with unusual formatting, can be made accessible (see Table Structure below)	A listing of monthly temperatures for London from 1800-1899 Transactions in accounting ledgers A comparison of business rules for various types of inventory transactions
Tables with footnotes	Footnotes should be reproduced above the table to provide context for the data	A table with a footnote indicating that values are in millions of US dollars.
Tables with accompanying text	Accompanying text should be reproduced as regular text, either above or below the table (depending on context).	A table with a note above it indicating that values were unusual due to an economic slowdown in quarter 3. A table with a note below it describing unusual variations in the data learners may encounter.

What Can’t Be Recreated as HTML?

Graphical features that convey meaning usually can’t be recreated as HTML. If any graphical arrows do not show relationships, but rather serve to highlight a footnote or accompanying text, this text can usually be reproduced with HTML without needing an infographic.

Tables that can’t be HTML
Item	Problem Area(s)	Explanation	Recommended Solution(s)
Tables with diagram features	Arrows showing relationships Images Structures that can’t be reproduced as HTML	Tables can only provide meaning to data. They can’t show relationships the way arrows or lists can.	Turn the table into an infographic.

Table Structure

Once you’ve determined that you need to recreate the table in HTML, the next step is to evaluate the structure of the table for accessibility issues.

Unusual Table Layouts

Table layouts in which a cell takes up more than one row or column are extremely hard for screen reader users to navigate and interpret. Frequently, these tables can also cause confusion for other learners as well. These layouts will have to be remade so each cell is only one row tall and one column wide.

Unusual Structure: Inaccessible Example

The following table is inaccessible for two reasons:

The first header, “Plant Types”, spans two columns.
The first cell, “Deciduous”, spans 3 rows.

Inaccessible structure example
Plant Types		Animal Types
Deciduous	Trees	Cat
	Bushes	Bird
	Flowers	Mouse

Unusual Structure: Accessible Fix

One way to make this table more accessible is simply to add the term “Deciduous” to all other cells in the “Plant Types” column. Since they all carry this term, there is no real reason for the “Deciduous” cell (and in fact this example is fairly trivial). Doing this removes the accessibility issues from both the header and the cell.

Accessible structure example
Plant Types	Animal Types
Deciduous Trees	Cat
Deciduous Bushes	Bird
Deciduous Flowers	Mouse

Too Much Data: Inaccessible Example

The following table demonstrates an accessibility concern commonly encountered by ATAC. The table uses an inaccessible structure to apply headings to subsections of data. The headings “Data set 1”, “Data set 2”, and “Data set 3” are header cells that span three columns.

Inaccessible data example
Data set 1
Location	# of Birds Sighted	Most Common Bird
Bloomington	34	Robin
Indianapolis	26	Robin
Fort Wayne	50	Sparrow
Data set 2
Location	# of Birds Sighted	Most Common Bird
Bloomington	16	Cardinal
Indianapolis	12	Mourning Dove
Fort Wayne	25	Robin
Data set 3
Location	# of Birds Sighted	Most Common Bird
Bloomington	22	Finch
Indianapolis	31	Cardinal
Fort Wayne	12	Sparrow

Too Much Data: Accessible Fix

Since each data set stands alone, the most accessible solution is to break each subsection into its own table, and apply each heading as a caption.

Data set 1
Location	# of Birds Sighted	Most Common Bird
Bloomington	34	Robin
Indianapolis	26	Robin
Fort Wayne	50	Sparrow

Data set 2
Location	# of Birds Sighted	Most Common Bird
Bloomington	16	Cardinal
Indianapolis	12	Mourning Dove
Fort Wayne	25	Robin

Data set 3
Location	# of Birds Sighted	Most Common Bird
Bloomington	22	Finch
Indianapolis	31	Cardinal
Fort Wayne	12	Sparrow

Fixing Table Layouts

Sometimes (like in the example above), it is relatively easy to fix an inaccessible table. When the table is more complicated, it’s important to consult with your SME(s) for the best way forward. Some methods to keep in mind are:

Breaking up information into separate cells (demonstrated above)
Breaking up a table into two or more tables (if too much information is being presented at once)
Including information above the table that provides context to the table’s data

Changing Presentation

You may find that the format of the table needs to be altered slightly to best present the content. In particular, edX has a width limit on its pages. For particularly large tables, you may need to flip them (so the larger side is displayed vertically down the page) or break them up up into multiple tables so they display properly to learners.

If a table seems particularly confusing, you may want to consider changing the presentation to better present the content.

Empty Headers

No table should ever have an empty header. You must rework any table layout so that every header has a title, and every cell has a titled header.

Data cells can be empty, but must be handled in a way that is accessible. Review “Formatting Data” below for details.

Inaccessible Header Example

The following table uses an empty header to create a comparison chart. Since this empty header is in the top left cell of the table, it causes two accessibility problems:

A header doesn’t contain text
The first cell that a screen reader will access is blank.

These issues would make it difficult for screen reader users to interpret and navigate the table.

Inaccessible headers example
	Types of Art
	Painting	Drawing
Materials	Paint, brush, canvas	Pencil(s), paper
Difficulties	Blending paint while still wet	Blending colors
Benefits	Looks nice	Looks nice

The left column lists a number of features common to both types of art being compared, so a title could easily be determined for the empty header. The header spanning two columns (“Types of Art”) could be incorporated into the table’s caption to provide additional context, but it doesn’t really need to be its own cell.

Accessible Header Fix

Comparison of types of art
Characteristic	Painting	Drawing
Materials	Paint Brush Canvas	Pencil(s) Paper
Difficulties	Blending paint while still wet	Blending colors
Benefits	Looks nice	Looks nice

Formatting Data

Lists of Data

If a cell contains a set of information that is separated with commas or new lines, this data should be formatted as a list. For example, if a cell included the list “metaphor, simile, synecdoche”, it would be properly formatted like this:

metaphor
simile
synecdoche

Formatting in this manner helps screen reader users navigate through the contents of cells.

Special Formatting

Some specialized tables may need additional formatting in order to convey meaning. In these cases, the formatting will need to be announced before the table so screen reader users know to adjust their settings so they can access this additional information. (Formatting that doesn’t convey meaning doesn’t need to be announced).

Special formatting may include the following:

Bold or italic text
Underlined text
Double-underlined text
Indentations

Special formatting should not include the following, as they can’t be accessed by screen reader users:

Text color
Highlighted text

To announce special formatting, include a text description in a paragraph above the table that describes:

The type of formatting being used
The meaning of the formatting

The following are examples of how special formatting may be announced before a table.

“In the following table, subtotals are underlined and totals are double underlined.”
“Indentations indicate subitems in a category. Subitems are listed underneath the category to which they belong.”

Empty Cells

Cells without data (that are not headers) are allowed as long as notation is provided to screen reader users. Please review Tables and Table Formatting in the technical track for details.

Table Captions

Captions are required for tables to be accessible. Captions provide context to the table and help screen reader users navigate between tables when they search through the contents of a page.

Captions are not titles, so only the first letter of a caption should be capitalized. If the caption is itself a title, copy the capitalization used in the title.

Captions should be reasonably short, and should serve only to provide context to the table. If there is key information that is needed to interpret the contents of the table, put the information in a paragraph above the table.

Some table captions will be reasonably easy to infer. For other tables that are not so obvious, consult with your SME to determine any standards or possibilities for the table.