Tables

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. 

Fortunately, Digital Commons provides an easy way to create tables compliant with Web Content Accessibility Guidelines 2.0 Level AA guidelines, if used correctly.

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

Screenshot of table properties showing available input fields.
  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.