Tables

Downloadable page: Download Lesson on Tables

The Standards

Section 508 Standards:

WCAG 2.0 Guidelines:

  • Guideline 1.3.1 Links to an external site. "Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)" (W3C)

What do the Standards Mean?

These standards specifically refer to tables used to present data. Tables used for website layout purposes are not included because it is recommended that developers refrain from using them. Using layout tables may not make a website inaccessible; however, it takes an extensive amount of time and effort for the developer to ensure the tables are compliant. The same functionality can be achieved through easier website development methods.

Individuals without visual disabilities may use visual cues to determine the layout and structure of a data table. They can differentiate between header cells and data cells by looking at their location on the table and the text formatting. Headers are usually in the first row and/or first column and are formatted differently than the data cells. Using that information, they can deduce how to read the table. Alas, individuals with visual disabilities who rely on assistive technology cannot deduce how to read a table using these same methods. To read a table, these individuals rely on features added with markup language Links to an external site. (e.g. html). The rationale is similar to that of headings and list structure in that users of assistive technology cannot tell the difference between header cells and data cells when differentiated only by direct formatting; therefore, developers should use markup language (e.g. code) to indicate:

  • The row and column headers
  • The association between data cells and header cells

For complex tables, it is also helpful to add the following features:

  • Table Caption
  • Summary Attribute
  • Use a Simple Layout
  • Avoid Blank and Merged Cells

Example Table

The following table has all of the stated accessibility features:

Superpowers of Super Heroes by Publisher
Publisher Name Superpower
DC Superman X-ray vision, flight, super strength, heat vision, super speed
Marvel Hulk Super strength

The Markup Language (Code)

Review the markup language or code for the Superpowers of Super Heroes by Publisher table:

<table summary=”Read from left to right.”>

<caption>Superpowers of Superheroes by Publisher</caption>

<tr>

<th scope="col">Name</th>

<th scope="col">Superpower</th>

</tr>

<tr>

<th scope="row">DC</th>

<td>Superman</td>

<td>X-ray vision, flight, super strength, heat vision, super speed</td>

</tr>

<tr>

<th scope="row">Marvel</th>

<td>Hulk</td>

<td>Super strength</td>

</tr>

</table>

Table Caption

The caption is used to give the table a title or a label. The caption is indicated in the example with the code:

<caption>Superheros</caption>.

Row and Column Headers

The row and column headers create structure for the table to help users navigate the content. The headers are indicated in the example with the code: <th></th>.

Association Between Data Cells and Header Cells

In addition to the row and column header, information about how they are associated with the data must be provided. Associating data cells with header cells requires the code: scope="row" and scope=”col”.

Summary Attribute

For accessibility purposes, the summary attribute is used to provide additional information about how a table should be read or notes about the formatting and layout. The summary attribute is not displayed on the table itself; it is only visible in the code. This is indicated in the example with the code: summary="Read from left to right."

How to Make a Table Accessible?

Most tools for creating tables have editing features that allow developers to add some or all of the above features. While not all tables need a caption or a summary, if your tool does not allow you to add row and column headers or associate headers with data cells then developers should use a different tool.  

Resources

Information on this page is from the following resources about tables:

Estimated time: 10 minutes