A table is an arrangement of information or data, typically in rows and columns, though tables can have a more complex structure. We need to pay extra attention to tables because if they are not properly structured, they can be a barrier to many people including those who rely on assistive technologies to navigate them. Remember the more complex your table is the more you will need to work to make it accessible. Avoid using tables for layout purposes only, doing so will make it difficult and frustrating for people using assistive technology to navigate your content.

Simple Tables

A simple table is a more accessible table than one that is complex. A simple table is a table that has one header row and one header column where the header column includes the type of information in the column. A simple table does not have merged cells. Screen reader users are able to navigate simple tables linearly by moving from table cell to table cell.

Parts of a Table

• Cell: A space to add information or data to.
• Header Cell: Header cells are the main reference points to help understand the data in a table. For simple data tables, in most cases, this is the first row and/or the first column of the table. Whether a column has a header row or header cell depends solely on the content of the table.
• Data Cell: Each data cell contains information relating to the combination of the row and/or column heading cells it is in line with.
• Rows: Table rows made up of a single set of horizontal cells.
• Columns: Table columns consist of a single set of vertical cells.
• Simple Data Table: A simple table is a table which has one header row and/or one header column. A simple table does not have any merged cells.

Example of a Poorly Designed Table

This table is what appears if you just add a table with the Insert/Edit Table Button, but do not add semantic markup. As it the following table is not very helpful to users of assistive technologies, such as screen readers.

Data for demonstrative purposes only. 

Example of an Accessible Table

• Visually the Header Row and Column are more predominant than the data cells
• Contains a caption which gives context of table
• The top row and first column are marked as headers
• Each header cell has a scope attribute added (the scope attribute has no visual effect, but can be used by screen reader users to help navigate a table)

The following table is more helpful to all users.

Assistive Technology Usage

Data for demonstrative purposes only.

Resources for Creating Simple Data Tables

• WebAIM Creating Accessible Tables

• Page:
  Adding Data Tables in Omni Campus CMS (Accessibility)
• Page:
  Tagging Simple Data Tables in Adobe Acrobat Pro (Accessibility)
• Page:
  Creating Accessible Data Tables in Microsoft Excel (Accessibility)
• Page:
  Create Accessible Data Table in Microsoft Word (Accessibility)