Tables are found virtually everywhere, from scientific documents to restaurant menus. As a regular element of digital design, it’s important to consider the accessibility standards around tables when sharing them online.
Proper semantic structure in tables is particularly important for communicating information to viewers with visual impairments. Screen readers rely on linear navigation, so without correct tags and layout structure, they can unpredictably jump focus and relay confusing strings of information when reading a table. In this post, we’ll discuss five common accessibility issues that arise when navigating tables, and propose solutions to help prevent them.
-
Images of Tables
Sometimes tables are embedded as images instead of text. In these scenarios, screen readers cannot interpret the table and will instead read out vague tags like “image” or “graphic,” in addition to any provided alternative text. Trying to relay a table through alt text can result in a description that is too long and convoluted to be meaningful for screen-reader users.
It’s best practice to completely avoid using images of tables. Rather, ensure that your tables are text-based to help make them easier for screen readers to parse.
-
Improper or Missing Table Headers
When a table does not include properly tagged headers, a screen reader will convey data cells as a string of text and numbers without relevant context, effectively making the information incomprehensible.
It is important to note that simply bolding the top row of cells does not allow a screen reader to identify that row as a table header. Instead, the table must contain proper tags and define whether a header applies to a row (scope=”row”) or a column (scope=”column”). With these tags, a screen reader can meaningfully parse a table and read its contents in a way that accurately conveys information.
-
Splitting and Merging Cells
While splitting and merging cells are common in table design, they confuse screen readers by breaking the relationship between headers and data cells. Without a meaningful programmatic relationship between headers and their related data cells, a table’s grid becomes difficult for assistive technologies to interpret.
There are some complex ways to give tables on webpages clearer programmatic relationships with merged cells; however, even then, they are often difficult for screen readers to process. It is best practice to avoid using split and merged cells so users can navigate content more effectively.
-
Nested Tables
Similar to splitting and merging cells, nesting tables adds complexity that screen readers cannot navigate meaningfully due to ambiguous data relationships. Introducing a nested table makes the structure less clear because the relationship between the header and data cells becomes significantly more complicated.
Once again, the best practice is to avoid nested tables to ensure you are creating clear and effective information.
-
Illogical Reading Order
A confusing and inconsistent reading order can be the result of many things: lack of tags, improper structure, and missing captions are just a few possibilities. By addressing these underlying structural issues first, you can ensure a logical reading order that effectively conveys the information within your data cells.
When checking the reading order, ensure that the navigation follows the logical sequence of the table, which is typically left to right and row by row. Creating a table with a standardized format and proper values for each row and column is the best way to ensure an accurate reading order.
Making Tables Accessible Makes Content More Inclusive
The visual-first design of tables presents a natural challenge for people with visual impairments. But creating a solid structural foundation and using correct code significantly improves a screen reader’s ability to interpret data logically. Content creators can extend their reach and enhance overall usability by proactively thinking of accessibility barriers during the design and creation phase.
