Support Centre

Designing an accessible table

Renée Meloche
Renée Meloche
  • Updated

There are several ways to represent the data in a basic table in a way that makes it more accessible to users with different visual impairments and accommodation needs:

Use header rows and columns

Screen readers use the row and column headers to read out relevant row or column information as users navigate through the table. This makes it easier to follow the content.

If your table content has a row or column that functions as a header, tag that row or column as a header. This information will be included in your PDF when you download. It won’t impact the way your table looks.

This table from Web Content Accessibility Guidelines has a header row which gives context to the data in each column. A screenreader will note the headers even when the user isn't in the header row; for example, if a user selects the middle cell, a screen reader would say: "Event (Column 2), The Obelisks".

 

This table offers the same information as the table above, with a header column instead of a header row. Again, this will allow a screen reader to identify where the information is in the table; e.g., reading the bottom right cell in the last column as "Venue (Row 3), Main Hall."

 

This table uses both a header row and a header column to contextualise the information it's presenting. Reading the bottom cell in the last column, a screen reader will state: "Friday (Column 6), 15:00 to 17:00 (Row 5), Open."

 

Use effective color contrast

Insufficient color contrast for text in a table will be flagged in the Accessibility Checker as a potential accessibility barrier. Check color contrast in the color menu as you customize your table in the upgraded Venngage Editor.

 

Use adequate text size

Tables are more accessible and the data in them easier to read when the text size is a little bigger. We recommend using 16px font whenever possible; text smaller than this will automatically be flagged in the Accessibility Checker.

 

Venngage Logo

 

Start designing!

Curious about upgrading? Compare our plan features side by side.

Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request