Accessible Tables

Tables present information in a grid which a sighted user can scan to understand the relationship between columns, rows, and data. Properly coded tables help assistive technology announce the column and/or row number and header as users move between cells. This ensures everyone can access and understand tables. The Brightspace Accessibility Checker is a robust tool for check table accessibility.

Who benefits from accessible tables

While sighted users can scan a table to understand the relationship between rows and cells, some users of assistive technology require those relationships to be indicated audibly. Consider the following demonstration of a screen reader reading a table without proper code followed by the same table with proper code.

Take note that in the table without proper code the screen reader could move from left to right and row to row to announce the cell contents. However, when deeper in the table it becomes unclear what the cell data refers to. In the properly coded table screen reader software announced the header labels such as brand, type, and colour and announced what column or row the cell is in. This helps users that cannot see the table to understand the information and relationships between data.

How to fix it

Table Caption

A table caption provides an overview of the information in the table. A caption could be considered similar to a title.

In the Accessibility Checker, type a brief description of the table in the Provide caption field and select Repair.

Table Header Cell

Header cells are required to convey relationships between data to users of assistive technology. Assistive technology will announce the header label to orient users. This ensures everyone can access and understand tables. Header cells can be a row or column.

In the Accessibility Checker, select Header row or Column row from the Choose table header menu to designate the top row or first column as a header. Click Repair to fix the error.

Table Header Scope

Once a header is set scope must be applied. Scope indicates the relationship between the header cell and subsequent data, for example if the top cell of the second column is a header cell, it’s scope would be the second column. This means that when navigating a table, the column label associated with a cell is announced, helping users to understand where they are in a table and the relationships between cells.

In the Accessibility Checker, choose Row, Column, Row group, or Column group in the Select header scope menu then select Repair. Depending on the layout and complexity of your table, you may need to repeat the process for each column and/or row.

How to prevent it next time

To create an accessible table:

1. Open the Table menu in the editor tool bar and move to Insert Table.
2. Select the number of columns and rows desired.
3. To designate header cells:
   1. Place the cursor in the appropriate cell
   2. Open the Table menu and choose Cell and then Cell Properties.
   3. In the Cell Properties window, select Header cell in the Cell type field.
4. To set scope:
   1. Choose Row or Column as appropriate in the Scope menu.
5. Click Save.
6. Open the Table menu and select Table Properties.
7. Check Show Caption and select Save.
8. Replace the “Caption” placeholder text with a brief description of the table.