Foundations of Accessible Document Design: Tables

This article is the eighth in a nine-part series covering the basic principles of digital document design. Begin with our first article and follow along for more digital document design tips!

Once upon a time, creating documents was simple: you’d dip your quill into your inkpot and swiftly scrawl your message across a fresh sheet of parchment. But as technology evolved, so did our content, leading to the need for more advanced ways to display information. While we now have various tools for creating digital documents, the limited options of the past often resulted in creative workarounds. These techniques made documents visually appealing but inaccessible by today’s standards.

As we become increasingly committed to creating inclusive digital documents, it’s time to ditch these old habits and embrace more accessible design practices. One important step is to stop using tables for layout purposes and instead use them only when necessary for displaying data. By doing so, you'll make it easier for folks who use assistive technologies to navigate and understand your document.

Select the graphic for a full-screen display of the Accessible Document Checklist.

Select to expand for full description of Accessibility Document Checklist graphic.

---

Rule No. 8: Use tables for the presentation of data only

Tables are great for organizing data - they help you display information in a structured and logical way. If you use your document authoring tool’s table function, you’ll benefit from programmatic labels, making the table easier to navigate for both sighted readers and those who use screen readers.

Comparatively, when tables are used for layout purposes, they can create significant barriers for readers who rely on screen readers. By avoiding layout tables, you ensure that everyone can access and understand your information.

Why is it important to include alt text?

If you’ve been following along in this series, you’re no stranger to the term “programmatic” - we’ve discussed this concept when it comes to headings, lists, and alt text. So how do these invisible labels apply to tables?

In general, a table relies on visual components to communicate its information. A sighted reader can typically scan a table and quickly determine the relationships between its rows and columns. However, for a screen reader user, it can be difficult to figure out how the content is related if no clear labels are provided. This is why it’s essential to create tables using the table function in your document authoring tool, not by manually drawing a table. The table tool typically has built-in properties that help screen readers convey the table’s structure, allowing users to navigate it easily and understand both the data and its headers.

Select the graphic for a full-screen display of a table formatting tool.

Why should I avoid layout tables?

Layout tables are designed to control the visual arrangement of content on the page. Think of this like a map with no labels: it might look nice, but how can you use the map to get to your destination? Layout tables don’t convey any meaningful structure to assistive technologies, leading to confusion and frustration as screen reader users try to interpret the relationships between the table’s cells and their contents. Avoid using tables for layout and instead focus on other design methods that enhance accessibility.

Best practices for creating data tables

• Start with a title or name before your table. This helps screen reader users quickly identify the topic of the table. And this is especially helpful if there is more than one table in your document - titling each table makes it easier for screen reader users to return to a specific table if needed. 

• Keep the structure of your table simple. Screen readers count cells to keep track of their location in a table. Nested tables, merged cells, and split cells are confusing for screen readers, making the table hard to understand. Blank cells should also be avoided - hearing a blank cell might mislead someone into thinking the table is finished even if there’s more data to review. 

• Label the headers in your table. This is typically done automatically if your table is inserted programmatically. Nonetheless, it's a very important step for screen reader users. While sighted readers can usually scan a table to figure out how the data is organized, screen reader users rely on headers to describe the corresponding data. Headers help them navigate large tables and avoid confusion with similar-sounding data.

Demo: Table read aloud by NVDA screen reader (0:49)

The following video demonstrates what a screen reader user might hear when navigating a table. By designating a header row and maintaining a simple structure, you ensure that the table's information is organized and accessible to screen reader users.

Select to expand for transcript of screen reader demo.

---

When it comes to tables, keep it simple: use them sparingly, and keep their structure as straightforward as possible. This will ensure that your document is accessible to a wide range of readers. 

Up next is the final installment of our Foundations of Accessible Document Design series: the importance of using descriptive link text in your document.