Web checklist

Table cells and relationships between cells can be programmatically determined.

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 encounters 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.

Using layout tables to make your pages more visually appealing may create difficulties for someone using assistive technologies, as they will not be able to immediately discern that the table is used only for layout. This checkpoint will show you how to mark up data tables and layout tables.

Back to top

Compliance with this checkpoint requires all of the following techniques be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.3.1 (link resides outside of ibm.com). These techniques are consistent with the Section 508 guideline for accessible tables.

1. Table markup: Use table markup to present tabular information.
2. Id and headers in tables: Use id and headers attributes to associate data cells with header cells in data tables.

Examples for HTML developers

1. Table markup: Using table markup to present tabular information.

Compliance with this technique requires all of the following examples be met.

Example 1

Create accessible data tables.

A simple data table contains one row of column headings and/or one row of row headings. This is the most basic type of data table. Use the th element to identify table heading cells of rows and/or columns in a simple data table.

The table below shows the number of boys and the number of girls in each class of an elementary school. Without proper HTML markup to identify row and column headers, someone using a screen reader might have trouble understanding, for example, that there are 11 girls in the 3rd grade class. They would navigate to row 4, column 3 and hear "11". With proper markup of headings using the th element, you hear "Third grade. # of Girls. 11"

The code for the above example is:

<table border="1" summary="A example simple data table showing the number of boys and girls in each grade of an elementary school">
<caption>Boys and Girls in Elementary School Classes</caption>
<tr>
<th scope="col">Class</th>
<th scope="col"># of Boys</th>
<th scope="col"># of Girls</th>
</tr>
<tr>
<th scope="row">1st Grade</th>
<td>11</td>
<td>10</td>
</tr>
<tr>
<th scope="row">2nd Grade</th>
<td>7</td>
<td>12</td>
</tr>
...
</table>

Back to top

2. Id and headers in tables: Use id and headers attributes to associate data cells with header cells in data tables.

Example 2

Associate data cells with header cells in 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, via the id attribute on the th element, is associated with a specific data cell.

The complex data table below shows the number of boys and girls in each class of an elementary school, and also shows the breakdown of students that are assigned to each teacher. This is considered a complex data table because there are multiple row headers (1st Grade includes both Mr. Henry and Mrs. Smith). In the example, column and row headers are identified with th elements and cells are associated with the column and row headers using the headers attribute. But in a complex row, such as the one beginning with 1st Grade, identifying only the row header is not enough to convey the relationships between the cells. In this example, it is important to understand that both Mr. Henry and Mrs. Smith are 1st grade teachers. Each has their own class of 1st grade boys and girls.

The code below shows the correct markup of the 1st Grade portion of the above 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, notice that 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>

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, and a screen reader user will be able to better understand the relationships between the cells.

Back to top

Examples for Domino developers

1. Table markup: Using table markup to present tabular information.

Compliance with this technique requires all of the following examples be met.

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 Elementary School Classes" table.

Example 3

Define row and column headers in Domino (Notes 7).

Notes 7 includes new table options to define simple row and column headers in data tables. In the example, Class, Number of Boys and Number of Girls are the column headers. To define the column headers in Notes 7, open the Table Properties box. Check the Column Header option. To define the specific grades as row headers, check the Row Header checkbox. The th element will be rendered automatically by Domino when the application is displayed in a browser.

Example 4

Defining row and column headers in Domino (All other Notes versions).

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 code sample below shows the correct way to code 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.

1. Open the page or form in Designer and select the table you want to convert to HTML.
2. Choose Edit - Convert to HTML. The table is converted into HTML source code.
3. Place the cursor within the HTML source code 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.
4. Edit the HTML source code to change the td element to the th element on the header rows and columns.
5. 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.
6. 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.

2. Id and headers in tables: Use id and headers attributes to associate data cells with header cells in data tables

Compliance with this technique requires all of the following examples be met.

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 "Boys and Girls in Elementary School Classes" 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. If id attributes are coded as per the examples below, it will be 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 be able to better understand the relationships between the cells.

Example 5

Use pass-thru HTML code to implement accessible tables in Domino.

The pass-thru HTML code 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>
...

Back to top

The techniques above are required; the following techniques are recommended to enhance accessibility:

1. Define a layout table using WAI-ARIA presentation (link resides outside of ibm.com) role.

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Occasionally screen readers mistake layout tables for data tables and announce the presence of table cells as a user navigates through the information in the layout table. This problem may be overcome by assigning a WAI-ARIA presentation role to layout tables. For example, the following table has a presentation role which will force screen readers to ignore the table structure and read only the data within the table, effectively hiding the table structure from users.

<table role="presentation">
...
</table>

Note that other elements such as images used for white space may be "hidden" from screen readers by adding a presentation role.

2. Use the title attribute on headers that can be sorted.

Adding the title attribute to each heading link allows you to explain that the user can sort on a particular column.

3. Avoid background attributes on the tbody and td tags.

Background images are ignored by text-only browsers, and may cause text to be displayed over an image which can make the text harder to read. In addition, the background attribute is not standard HTML.

4. Use the abbr attribute for very long tables.

The abbr attribute is used to shorten the way that the assistive technology reads row and column headers. When reading very long tables, a user may tire of hearing the long row and column headers for every single cell. In this case, you may define an abbr attribute to shorten the headers. For example, you may shorten "# of Boys" to "boys". Using this technique, the code for the above complex table would look like this:

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

5. Reorganize a complex table into several smaller data tables.

These types of tables are generally easier to make accessible, and may be easier to understand for a user with assistive technology. For example, you could split the example complex table into five smaller tables, one for each grade. This would eliminate the need for the Class row header, and would leave only one header column and one header row, thus eliminating the need for the headers and id attributes.

6. Avoid the summary attribute on layout tables.

Sometimes summary="" is used to indicate layout tables. However, the preferred method is to omit the summary attribute for layout tables. This is not a compliance failure, but the technique is no longer recommended.

7. Set the table and cell width to a percentage, rather than an absolute size.

Layout tables can make the page confusing if they are not coded correctly. Set table and cell width to a percentage, rather than an absolute size, by using the width attribute. Using a percentage allows the table to adjust to fit any screen size, so that users with different screen sizes or screen magnifiers can more easily see the table. See the example below:

<table width="90%" summary="This example table shows the use of the width attribute for both tables and cells.">
<tr>
<td width="45%"> This cell takes up 45% of the table width </td>
<td width="55%"> This cell takes up 55% of the table width </td>
</tr>
<tr>
<td width="45%"> This cell takes up 45% of the table width </td>
<td width="55%"> This cell takes up 55% of the table width </td>
</tr>
</table>

8. Use Cascading Style Sheets instead of HTML layout tables.

Some assistive technology must linearize tables in order to present them to the user. This means that the user will hear the table cell by cell, from left to right and top to bottom. HTML layout tables may not always linearize correctly, and therefore it is usually better to use CSS to position information on a web page.

9. Avoid the th element and id and headers attributes in layout tables.

Do not use any additional attributes or elements in layout tables.

The following test tools and techniques are required to test this checkpoint.

1. Test tools
2. Required accessibility verification test techniques

Back to top