Tables in websites and documents are an important part of universal design for the web. This article will outline why tables need to be styled properly. In addition, the article will discuss when it is best to avoid tables and present information in other ways.
Tables in Websites and Documents
One principle of the Web Content Accessibility Guidelines (WCAG) requires that web content must be understandable. Tables help readers see how pieces of data relate to each other when they are presented in rows and columns.
Furthermore, another WCAG principle requires content to be perceivable. In other words, people with a variety of disabilities should be able to perceive content of a webpage that is presented audibly or visually, including tables. Finally, WCAG requires websites to be robust, to work with current and future assistive technologies.
Many web content creators may try to design tables through changes to the formatting of their text. For example, content creators may arrange information into rows and columns by using indents to place data in different areas of a page. This arrangement changes how the text looks. However, the new placement does not change how the text appears to people who use screen readers, software programs that read text aloud.
In contrast, screen readers can identify tables that content creators have tagged or styled using a menu or another control. This menu usually allows content creators to choose:
- The size of the table
- How many rows and columns the table will have
After a content creator has made a table this way, they can place their data points in the correct columns and rows.
When tables are properly formatted, screen readers recognize when they are entering a table, and state the number of rows and columns. Moreover, people using screen readers can:
- Navigate between rows and columns
- Move from one cell to the next with keyboard commands
Without this formatting, screen readers read all the text on a line from left to right. People reading this way cannot tell where one column ends and the next column begins.
Row Headers and Column Headers
Properly formatted tables also have row headers and column headers. In other words, the first cell in each column and each row is identified to screen readers as a header. When content creators select this feature, screen readers recognize the names of each row and column. As someone scrolls from one column to the next, the screen reader says the new column’s name before it states the new information in a cell. This formatting reminds screen-reader users of the column title, the way a non-screen-reader user is reminded by glancing up to the top of the column.
When to Use Tables
Content creators sometimes make formatted tables containing information that does not need to be in a table. For example, content creators may use table formatting to:
- Align content
- Space content evenly on a page
Some of these tables may have one (1) column, while other tables have more than one (1). Moreover, content creators may make the cell divisions, or the lines between rows and columns, invisible. As a result, this formatting makes a table look as if it is not a table.
However, when screen readers scroll over this type of content, they perceive it as a table, and read it as data in rows and columns. For example, screen readers state, again and again, whenever there is a new “row” or “column”. This formatting makes content difficult to read for no reason.
Therefore, content creators should avoid presenting information in this way unless it truly needs to be in a table. For instance, a table with one (1) column can be re-formatted as a list. Likewise, tables with more than one (1) column could be grouped under headings.
Nevertheless, tables can be useful ways to present certain information. For example, data from surveys often works well in tables, because people can easily compare and contrast different columns. Moreover, people can see how the pieces of information in each cell of the table relate to each other. Properly formatted tables provide all viewers of a website or document with the same chance to analyze data.