Tables organize data with a logical relationship into grids. Sighted users can quickly scan a table, grasp its purpose and note which rows or columns have headers describing the data in the table. However, users who cannot see a table cannot understand these visual cues.
A table needs few specific HTML tags, so screen readers are able to identify the relationships between its contents. Without these tags, users who cannot see a table might find it very difficult or impossible to understand the relationships between the headers and cells in the table.
Best Practices
- Write column and row headers to add words that help users understand a table's structure.
- Add a summary of a table's content and purpose. Screen readers used by non-sighted users will read the purpose aloud.
- Do not use tables only for layout purposes. That creates a confusing experience for non-sighted users.
Creating an Accessible Table on Digital Commons
- Create a table inside the text editor. Select the table icon in the toolbar, and set the table properties in the pop-up window.
- Under headers, select whether the first row, the first column, or both will serve as header(s).
- Add a caption that identifies the overall topic of a table by selecting Table Caption icon under table properties. Captions do not appear visually on the frontend of the site but do get injected into the underlying markup that is read by the screen reader.