Tables

Use the TH element to mark up table heading cells on the Web. Use the headers attribute on cells of complex data tables on the Web.

There are two types of tables that are used in HTML. Data tables contain multiple rows and columns, and are used to present information to a user in a clean, concise manner. Layout tables are used to layout the images and text on a page. Layout tables do not contain tabular data and are only used for the visual layout.

When a user comes to a table, they must be able to understand the purpose of the table, and navigate the specific data that the table shows. Although it is fairly easy for a sighted user to navigate data tables, someone using assistive technology may have a difficult time navigating a data table and understanding its purpose or contents. The user may be unable to determine which data matches with which column or row header. Using the appropriate table markup techniques in this checkpoint will make your HTML tables easier for assistive technology users to understand and navigate.

The new features on Notes 7 support adding row and column headers to data tables on the Web or on the Notes client.

Back to top

The following techniques are the minimum required to meet Checkpoint 5.5 from the Lotus Notes Application Accessibility Checklist:

The techniques in this checkpoint are organized by table type, with each table type requiring specific techniques.

Simple data tables
Complex data tables

Simple data tables

To make simple data tables accessible, identify row and column headers. The technique will vary depending on the version of Notes used. The techniques use the "Boys and Girls in Tarpon Elementary School" table.

In versions prior to Notes 7, pass-thru HTML must be used to add the TH element to identify row or column headers instead of using the default TD element. The span sample below shows the correct way to span table headers.

...
<tr>
<th>Class</th>
<th># of Boys</th>
<th># of Girls</th>
</tr>
<tr>
<th>1st Grade</th>
<td>11</td>
<td>10</td>
</tr>
.....

The HTML editor can also be used to add table headers using the following steps.

• Open the page or form in Designer and select the table you want to convert to HTML.
• Choose Edit - Convert to HTML. The table is converted into HTML source span.
• Place the cursor within the HTML source span and choose View - HTML pane. The screen splits and the table is displayed in the top pane and the HTML source is displayed in the bottom pane.
• Edit the HTML source span to change the TD element to the TH element on the header rows and columns.
• Since the TH element does not modify the visual appearance of the table, the visual look of the table will not change press Refresh to see the modified table in the top pane.
• Press ESC to exit from the HTML editor.

The screen shot below shows the HTML editor with a data table in the top pane. The HTML source in the bottom pane has been modified to add the TH element.

Complex data tables

Complex data tables are defined as having two or more levels of row or column headings or headings that span multiple rows or columns. Complex data tables require additional markup to explicitly associate the heading with the data. In the data cells, the headers attribute is used on the TD element to specify which heading cell is associated with a specific data cell. The techniques in this section use the "Students in Tarpon Elementary by Teacher" table.

Adding id attributes to the first cell in each row and to other row cells that could be perceived as headers for subsequent cells in the row makes it explicitly clear which column and row headers apply to a particular cell. For example, it is now clear that both 1st Grade and Mr. Henry are row headers for the cell containing 5. This markup does not change the visual look of the table, but a screen reader user will able to better understand the relationships between the cells.

The pass-thru HTML span below shows the correct markup of the 1st Grade portion of the table. Notice that the column and row headers are marked with the id attribute, and the corresponding data cells contain the headers attribute. In addition, the cell containing Mr. Henry is a header cell as well as a data cell, and therefore it contains both the id and headers attributes.

...
<tr>
<th id="class">Class</th>
<th id="teacher">Teacher</th>
<th id="boys"># of Boys</th>
<th id="girls"># of Girls</th>
</tr>

<tr>
<th id="1stgrade" rowspan="2">1st Grade</th>
<th id="MrHenry" headers="1stgrade teacher">Mr. Henry</th>
<td headers="1stgrade MrHenry boys">5</td>
<td headers="1stgrade MrHenry girls">4</td>
</tr>

<tr>
<th id="MrsSmith" headers="1stgrade teacher">Mrs. Smith</th>
<td headers="1stgrade MrsSmith boys">7</td>
<td headers="1stgrade MrsSmith girls">9</td>
</tr>

Recommended techniques

The following techniques are recommended to enhance accessibility of data tables:

• Use the <caption> element and / or the summary attribute to provide a description of the table contents. The <caption> element displays on the Web page. The summary attribute isn't displayed, but screen readers will read the content aloud.
• Avoid the use of the title attribute with the <table> element. The <caption> element and summary attribute provide a more accessible alternative for describing the purpose of the table.
• Avoid using images as cell backgrounds. On the Table / Cell Background tab of the Table Properties box there are options to use images as the cell background. These background images may make it difficult for someone with low vision to see the table data.
• Don't overlook the importance of tab order within a table. If a table has multiple columns, by default the tab order will go from top to bottom and left to right. This may not make sense if the user should fill out the first column of information and then the second column of information.

This screen shot shows the Table Properties box with the summary attribute added in the Other field on the Table Programming tab.

Techniques