How to Code Accessible Tables
There are many appropriate uses for tables on websites, but the problem lies in understanding the proper way to make those tables accessible for all users. Don’t panic, tables are not to be feared or avoided! With some careful planning and a better understanding of the different table elements and attributes, you too can add usable data tables to your web pages.
Layout Tables vs. Data Tables
Tables have been used for page layout since the early days of the Web. Due to advancements in both W3C recommendations and coding capabilities, table layouts are becoming another distant memory, as they may cause considerable accessibility problems. The presentation and layout of web page elements can and should be controlled through appropriate cascading style sheets (CSS) and tables should be used to display data only.
Use the Simplest Table Possible
A simple table basically means that there is only one header row and one header column in the table. A header specifies the type of information in the row/column. There are no merged cells within a simple table. Once we have merged cells, we need to approach the table as a complex table, which have different coding considerations. It may even be preferable to create more than one simple table instead of using a complex table.
Sometimes, complex tables are required. Some data tables may require more than one level of row and/or column heading. Most people will not find this a problem; visually the table is logical. However, Assistive Technology, like screen readers, will need very specific instructions to correlate these extra levels of headings to the information contained in the data cells.
Marking Up Tables
The very first step toward creating an accessible data table is to define row and column headers. This is easy enough to do. In the markup, the
<td> tag is used for table data cells and the
<th> tag is used for table header cells.
Simply changing the appropriate
<td> tags to
<th> tags signifies that the information within the cell is different from the information that still sits in a
<td> cell. The location of the cell does not change. Now before you say, “That was easy,” be aware that this is just the first part of making that simple table accessible. It gets a little more complicated, but not too complicated. I promise.
Associate Data Cells with Appropriate Headers
Now that we’ve created headers, we need to associate the cells with the appropriate headers. There are two ways to associate data cells with their headers.
The Scope Attribute
The scope attribute tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header. By specifying the “col” or “row” attribute in addition to the scope attribute, you’ve tied that column or row to the correct header. A screen reader now has the instructions it needs to present the table correctly.
Headers and ID Attributes
Another way to accomplish this is to use the headers and ID attributes.
This method is NOT recommended for simple tables, but may be useful in complex tables. The headers and ID method should only be used when there is more than one logical level in a table, and when it is necessary to link more than two headers with a data cell. Stick with the scope attribute unless your table is more complex and the scope attribute will not do the trick.
Use proportional table sizing rather than absolute or fixed-pixel sizing. Let the browser window determine the width of the table whenever possible. By establishing a fixed width on a table, you are not allowing the table to flow into the viewport area available. Luckily, this is becoming a more standard practice now that we are planning and implementing responsive website layouts.
Other Table Markups
Tables should have some sort of identifying title or caption to them. Using the
<caption> tag can do this, and you can add the
<caption> tag right after the opening
<table> tag. It is not absolutely necessary to have
<caption> tags on every data table for the sake of accessibility, but it is still a good practice. And of course all of these additional attributes and tags can be styled appropriately with your cascading style sheets.
The summary attribute is not a requirement for simple tables, but can increase the comprehension of more complex tables for people using screen readers. A good summary can highlight the important elements of a table, and help the user to know what data can be found in the table. A good practice is to only use table summaries when they do what they were designed to do: summarize complex data.
Want to learn more about Accessible Tables?
There are other more complex methods of marking up tables than those discussed here. Please download the on-demand webinar below for a more hands-on explanation of coding tables. The webinar will be a useful guide to understanding some of the different techniques for making tables accessible. I’ll show code examples and discuss:
- Simple tables
- Complex tables
- The correct attributes to make a table accessible
- Proportional Sizing
- Additional Table code attributes