Data and Layout Tables

Web designers use tables to hold data and they also use tables to structure page layout. The Section 508 standards inform designers that data tables must be accessible. Using tables for layout isn't addressed within the 508 standards, but is a consideration all designers are encouraged to understand and examine.

Creating an accessible data table can be one of the most challenging tasks for a designer. This isn't meant to imply that all data tables will be time consuming tasks of frustration for you. Simple data tables pose little additional work. Complex data tables will require a thorough understanding of the issues of accessibility and the techniques that can be employed. Section 508 - Standard (g) provides guidance for simple data tables. Section 508 - Standard (h) addresses more complex data tables.

Section 508 - Standard (g)

Row and column headers shall be identified for data tables

Section 508 - Standard (h)

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

back to top

Explanation - Standard (g) - Simple Data Tables

What is a Simple Data Table?

A simple table can be defined as having one row of headings or one column of headings, or both. The table below is a simple data table. It has only one row of headings.

Table Linearization

Before discussing the accessibility issues that exist with a simple data table, it is necessary to understand the manner by which assistive technology reads a table. Assistive technology reads the table in its linear order. Linear order can be imagined if the table is examined by individual row and then by reading columns from left to right within each row. The linearized form of this data table is:

Name
Department
Phone Number
Alice Anderson
COSI
2-2129
Blaire Bundy
LTDE
5-3668
Greg Konop
PTE
5-6485
Wei-Zhong Wang
HelpDesk
5-4754

The linear order for this table makes sense as long as the individual listening to or reading the content knows that the column headings are Name, Department, and Phone Number. Screen readers will assume that the first row of a table contains column headings and likewise that the first column holds row headings. Correct or incorrect, this assumption is made.

Therefore, when a screen reader reads the table, the cell data will be prefaced with an announcement of the column or row heading. Make note of the inclusion of Name, Department, and Phone Number prior to Alice Anderson's information in the example below.

Name
Department
Phone Number
Name Alice Anderson
Department COSI
Phone Number 2-2129

Let's recap the three concepts presented. One, simple data tables have either one row of headings or one column of headings, or both. Two, tables are read by assistive technology in their linear form. Linear form is gathered from starting in the first row of the table, then progressing left to right across a column. When the row ends, progression continues to the start of the next row. Third, assistive technology will assume that the first row of data and the first column of data contain heading information, even if they don't. Several techniques can ensure that assistive technology is recognizing the correct cells as headers.

back to top

Technique for Simple Data Tables

Simple data tables such as the sample used in this section don't pose a barrier to individuals with disabilities. However, proper use of HTML table markup tags is required.

Proper Use of Table Headings

The structure of a table consists primarily of three HTML tags.

• <table> is the indicator that directs the browser to understand that a table will be used
• <tr> directs the browser to begin a new row in the table
• <td> indicates one cell of a table

Table headings should be marked within the HTML code using a fourth tag, <th>. The <th> tag replaces <td>. The significance of <th> is that the cell will be interpreted as a heading by assistive technology. It will visually appear centered and bold. If this appearance doesn't meet your approval, a style sheet can be used to add formatting that does. Don't let the default format deter your use of <th>.

Use <th> tags for all table headings. This refers to both column heads and row heads. Don't use <th> in a cell that is not a header.

Table Headings in Macromedia Dreamweaver

Cells that will contain table headings can be formatted as <th> rather than <td> in Dreamweaver without having to work in HTML code. The process requires only that the designer place the cursor in the correct cell and then locate the table header checkbox on the Dreamweaver property inspector.

back to top

Explanation - Standard (h) - Complex Data Tables

What is a complex data table? A complex data table includes more than two levels of headings. Complex data tables are not common on the web. If the complexity of the concepts presented in this section overwhelm you, don't panic. Chances are high that you will not be working with tables that are this complex.

The Enrollment Comparison example that follows illustrates a data table with three levels of headings. (Data in this table is fictional.)

What are the heading levels in this table? One level contains the years. A second level identifies the academic institution. The academic levels at an institution constitute the third level.

Visually, this table is easy enough to manage. Finding the enrollment for Sophomores at the University of Wisconsin-Stevens Point in the year 2002 requires you to locate the correct institution, then find the intersection of the year 2002 column and the Sophomore column.

Finding this data using a screen reader is more of a challenge. Without special HTML additions to the code, the screen reader would be able to identify the calendar year or the academic level of a cell, but it wouldn't be able to announce the institution to which the data is associated. This is the obstacle with a complex data table.

back to top

Technique for an Accessible Complex Data Table

Properly coding a complex data table ranks among the most challenging tasks in accessible design. It requires a thorough understanding of the HTML that constructs tables. It also requires a great amount of patience as today's web editors don't provide much support for marking complex data tables appropriately. There are two approaches that could be taken to make the Enrollment Comparison table accessible.

Use ID and HEADER Table Coding

ID and HEADER coding gives a designer a way to correlate data in a table to the headers that define it. If the designer codes accurately, a screen reader is able to inform the listener that the data is for a sophomore at Stevens Point in the year 2002, or whatever headings are appropriate. This is done through the assignment of table head ids and the correlation of table data to those table head ids.

Table Head Identification (id)

Table headings are identified through the use of an id attribute. Observe the id value in the code for Stevens Point below.

<th id="r2_c1">Stevens Point</th>

The value of r2_c1 that was assigned is a recognized convention. R2 represents row two of the table. C1 represents column one of the table. You may use any convention that you feel is appropriate. Id for this example could be set to a value of Stevens Point if that is easier to remember.

In our example, both sophomore and the year 2002 are also table headers. Their id's in the example table are as follows:

Sophomore code - <th id="r4_c1">Sophomore</th>
2002 code - <th id="r1_c4">2002</th>

Examine our technique to this point. All table headings are marked with a <th> tag and also an id attribute. The id attribute is assigned a value. In our example, the value is the location of the cell defined by its row and column number.

Correlating Table Data to Table Head ids

If implemented correctly, the result of this step is that a screen reader will announce the table headings that define table data. For instance, Sophomore Stevens Point 2002 2010. This result would make clear to the listener that the enrollment for Stevens Point Sophomores in the year 2002 is 2,010.

This step is completed by assigning a value to the <td> tag in a table through the use of a headers attribute. The headers attribute needs to connect the data to Stevens Point, Sophomore, and the year 2002. Note the headers attribute in the code example below. It contains reference to three different ids. Each id is separated with one space. The order that the ids are placed within the header declaration isn't significant.

<td headers="r2_c1 r1_c4 r4_c1">2010</td>

A refresher on id values for this example:

• r2_c1 was the id assigned to Stevens Point
• r1_c4 was the id assigned to the year 2002
• r4_c1 was the id assigned to sophomore

The cell containing 2,010 is now correctly associated with the appropriate table headings. Each cell in the table needs to have similar coding. As we said at the onset of this technique, this is among the most challenging tasks in accessible design.

The complete HTML coding of the Enrollment Comparison data table is available.

Breaking Complex Tables into Simple Tables

Any accessible solution that avoids the requirement to use id and headers is a good one to consider from a standpoint of efficiency. The Enrollment Comparison presents an example of a complex table that could be broken down into two simple tables, thereby eliminating much work, not to mention the migraine its code may bring.

The enrollment information from the two institutions is accessible without needing id and headers. It is a simple data table and follows the same guidelines as all other simple tables. A devil's advocate argument is that the data has been divided into two tables, however, the prior structure required the information to be analyzed as independent data sets. This hasn't changed in the new arrangement.

Summary

Complex data tables present a real challenge to designers. Either the table needs id and headers coding or a complete restructuring. In either case, set aside a block of time to make the data accessible.

back to top

Other Considerations

Is SCOPE a Technique for Data Tables?

This technique is not needed if table headings are correctly marked using <th>. Proper use of scope is as an attribute to <td>. The intent of scope is to correlate data in the first row or column of a table to data within the table. Designers may have chosen to use scope over <th> as it has no impact on the formatting of the text within the header cell. However, this is contrary to the specification that all table headings should be indicated through the use of <th>. As <th> eliminates the need for scope and should be used rather than <td> for headings, scope is not needed.

SUMMARY and CAPTION

These two table elements can clarify for assistive technology users the purpose of a table.

Summary

Summary is transparent to sighted users. It is an attribute of the <table> tag. Proper use of summary provides an overview of the content in the table and possibly the layout of the table. While not a requirement of Section 508, it is a quick implementation to make that assistive technology users can benefit from hearing. An example of <table> using a summary attribute follows.

<table width="50%" border="1" cellspacing="0" cellpadding="0" summary="Comparison of Enrollment between the University of Wisconsin-Stevens Point and the University of Wisconsin-Platteville. Enrollment numbers are presented vertically by the calendar years of 2000, 2001, and 2002 and horizontally as Freshman, Sophomore, Junior, Senior, Graduate, and Total. Stevens Point is presented first, Platteville second.">

The table summary can be manually coded into the HTML or in Dreamweaver MX entered through the accessible table prompt that appears when the table is inserted.

Caption

Caption is similar to summary. It isn't required by Section 508, but can be helpful to both sighted and non-sighted users. Caption is a tag nested within the <table> markup. Note its use in the example below.

<table width="50%" border="1" cellspacing="0" cellpadding="0">
<caption>
Enrollment Comparison
</caption>
<tr>
<td>

Use of Layout Tables

This topic is controversial. Web designers make use of tables to control the layout of their web pages. Web accessibility purists may remember the day when assistive technology didn't render tables correctly and thus, the use of tables for anything other than data was frowned upon. Today's assistive technology devices are able to handle tables that are used for layout. The fact is that layout tables have been and will continue to be used. Our focus is on understanding the accessibility concerns with layout tables.

Remember that all tables have a linear order that assistive technology recognizes. This linear order is the only concern with layout tables.

Examine the table used below. It employs a widely used layout to position several elements common to most web pages; page header, page navigation, main content area, and a page footer.

The linear order of this table is:

Page Header
Link #1
Link #2
Link #3
Main content for page
Page footer

The question that needs to be answered is, "Does the linear order of the table present the page content in an understandable manner?"

A successful argument can be raised that this linear presentation of content is the same order by which sighted individuals use the page. The layout table is accessible, as are many other simple layout types.

How do you know whether your layout table presents its contents in an accessible order? Testing devices will provide output for you to examine. Two testing tools that are encouraged for examining layout tables is the Wave 2.01/2.2 or the Delorie Lynx Simulator. Both are presented in this course's validation tool page.

Suggestions for the Use of Layout Tables

1. Use simple layout formats.
2. Try to limit the amount of nested tables used.
3. Test using validation tools.

back to top

Validation Technique(s)

The testing measures that follow can be used to evaluate compliancy of your web page(s) with the concepts presented for Standard (g) and Standard (h).

• view the page in a text based browser such as Lynx
• listen to the page using a screen reader or speech synthesizer
• view the page using the WAVE accessibility validation tool

back to top

complete a self-assessment about the use of tables