United States Department of Veterans Affairs
Section 508 Support Office

Testing HTML for Section 508 Compliance

Page 1 of 19

Tables

Back Next

Introduction

Welcome to Module 7, Tables. In this module, you will learn how to test HTML tables for Section 508 compliance.

Before viewing this module, you are strongly encouraged to view Module 1, Introduction to Testing HTML for Section 508 Compliance. That module will help you understand concepts and terminology used throughout the course.

What You'll Learn in This Module

This module will introduce you to the different types of HTML tables: layout tables, simple data tables and complex data tables. You will learn what requirements each type of table must meet in order to be accessible. You will examine both compliant and noncompliant examples to understand how to tell the difference.

When you’ve completed this training, you should be able to:

  • Explain the differences between a simple data table, a complex data table and a layout table.
  • Identify the elements that make up a data table.
  • List the relevant Section 508 requirements for a data table.
  • Identify components of a compliant simple data table.
  • Identify components of a compliant complex data table.
  • Explain how to test a data table for Section 508 compliance.

Introduction to Tables

Screenshot of an example of a web page layed out with a table. Screenshot includes table tags and areas for a header, navigation, links, content, and a footer.

On a web page, a table serves one of two purposes.

The first purpose is to lay out information. In a layout table, data table markup can’t be used, so the page designer must carefully consider the order in which content will be read. Assistive technology (AT) will render the content from left to right, top to bottom. This reading order needs to match the intended reading order of the content.

Using a table to lay out information is no longer a best practice. Nonetheless, layout tables are still being created, and many older layout tables remain online.

The second purpose a table can serve is to present data in a grid format. A grid is an effective way to present large amounts of data or complex information. When the data table has been developed in an accessible manner, a user of AT can easily understand the pieces of information in its columns and rows and how these pieces are related.

Data tables must be marked up using HTML table elements. When table elements are not used, AT users will not know that a data table exists. The top row and left column in a table generally contain a short description of the contents of the corresponding column or row in the table. These cells are referred to as headers in an HTML table and are identified with a specific table header tag, <th>. When tables are marked up properly, screen readers are able to announce the row and column headers as the user moves from data cell to data cell in the table. Header cells and table data must appear in the same table in order for screen readers to be able to announce the header cell along with each data cell.

Screenshot of three data tables used as examples in this module. The first is a shedule with days across the top row and hours along the first column; the second table shows information about three states; and the third is a complex data table showing a price list.

A data table with just one header row or header column is called a simple data table. When a table contains two or more header rows or header columns, it is called a complex data table and needs additional markup in order to be accessible.

Select Next to continue.

 
Glossary in new window Resources in new window   Back Next