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

1. Create a table inside the text editor. Select the table icon in the toolbar, and set the table properties in the pop-up window.
2. Under headers, select whether the first row, the first column, or both will serve as header(s).
3. Add a caption that identifies the overall topic of a table. Captions have substantial usability benefits, especially if a page has multiple tables.
4. Add a summary of the table's content and purpose. It will be read by screen readers and will not appear visually on the page. To add a summary to a table, go into the source view and manually add it inside the opening <table> element: <table summary="Add summary information here">