Tables

Overview

It is important to create properly structured tables so that a screen reader can make sense of a table auditorily. Incorrect use of tables can cause cells of data or content to be read out of order by a screen reader and convey the information in a way that makes sense.

Out of the box, WordPress does not offer a straightforward method for adding accessible tables. Gutenberg editor offers a Table Block, however the functionality is very limited and not capable of making accessible tables since it is missing the ability to <th> and other necessary markup (as of April 2020). The rich text editor similarly does not have table functionality that is accessible. There are plugins available, or customized functionality that Modern Tribe may have built for your site to provide a more seamless table create experience. Please reference specific documentation that may have been provided on this topic. Creating accessible tables in WordPress, without adding new plugins or custom functionality, involves coding tables with HTML. If the website does not have custom functionality for creating accessible tables, content creators should be familiar with HTML table markup and accessibility best practices to manual code tables in the HTML view of a rich text editor field (see External Resources below for tips on writing HTML tables).

Tips for Creating Accessible Tables

  1. Tables should not be used for design/layout purposes and should instead contain only tabular data. For example, using a table to align pictures and text is bad practice.
  2. Keep your table structure simple by avoiding things like merged cells and columns. Complex tables are difficult to parse for screen readers.
  3. Always use proper table markup to present tabular information. At minimum, this should include the table, table row (tr), table header (th), and table data (td) elements. Make sure to define the row or column that will be used as a table header. In HTML, this means identifying all table headers using the <th> element. Do not use bold or page headings (e.g. h3, h4, h5 tags) for this purpose.
  4. If defining a width, use relative values.
  5. If no heading immediately precedes the table, add a table caption to describe the purpose of the table.

What to Avoid

  1. Avoid spanning rows and columns. Many screen readers cannot properly read this data.
  2. Avoid defining cell heights. This allows a cell to expand with its content.
  3. Do not duplicate the same information in the <caption> element and summary attribute of a data table.
  4. Do not use white space characters such as space, tab, line break, or carriage return to create a table in text content. Do not use the pre element to markup tabular information.