Table compliance with the Web Content Accessibility Guidelines (WCAG) 2.0

Creating an accessible data table can be one of the most challenging tasks for a designer. The reason is that screen readers need sufficient clues in order to navigate correctly through the table areas, otherwise they may become disoriented causing a lot of confusion and overhead.

In this article you will find a list of tips on how to create an accessible table that meets the Web Content Accessibility Guidelines (WCAG) 2.0 criteria using techniques supported by Tabulizer.

Data Tables vs Layout Tables

There are two basic uses for tables on the web:

• data tables
• layout tables

The original intended use of HTML tables was for tabular data. According to the WCAG 2.0 documentation, information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

On the other hand, layout tables do not have logical headers that can be mapped to information within the table cells. Layout tables were traditionally used to overcome limitations in visual presentation and layout using HTML (e.g. aligning unrelated images and text). Even though WCAG do not prohibit the use of layout tables, it is highly recommended for such purposes to use CSS instead, which results in cleaner and more simple HTML code, better end user adaptability, and few potential accessibility issues.

Screen readers use the following clues to classify a table as data tableand traverse it accordingly:

• Table Caption
  The caption for a table is a table identifier and acts like a title or heading for the table. The caption element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.
• Table Summary
  The summaryattribute of the table element makes this information available to people who use screen readers; the information is not displayed visually. The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data. The summary attribute may be used whether or not the table includes a caption element. If both are used, the summary should not duplicate the caption.
  
• Row Headers and Column Headers
  For simple tables, where the first row or column is the header row, you can use the TH tag to markup header cells. For more complex table, or in cases where the header row/column is not the first one it is recommended to use the scopeattribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns.
  

Things to Avoid

When constructing your table, try to avoid the following bad practices:

• Make your table overly complex
  Try to keep it simple without nested tables, rowspans and columns spans, especially in the headers. If your table is very complex, consider replacing it with a series of linked simple tables.
• Do not use TH in layout tables
  Do not use markup, such as the TH tag, that will confuse screen reader and treat a layout table as a data table.