Table cells and relationships between cells can be programmatically determined.


Rationale

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 lay out 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 match data with a specific 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.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques. These techniques are defined in WCAG 2.0 Level A Success Criterion 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.

In order for tables to fully comply with WCAG 2.0 you must complete the HTML example 4 in Web Checkpoint 1.3a (Information and Relationships) which includes another table-related required development technique.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

At this time WAI-ARIA examples are only fully supported in Firefox version 3.6 or later and version JAWS 12 or later. If your product needs to be accessible in Internet Explorer and mobile Safari/VoiceOver, one or more of the required HTML/CSS specific techniques must be implemented, as well as a WAI-ARIA technique. When WAI-ARIA becomes an approved W3C recommendation and Internet Explorer and mobile Safari/VoiceOver fully support it, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint.

Applications that provide WAI-ARIA must add the following statement to the checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver.

HTML examples

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

    To comply with this technique, you must implement the following example.

    HTML example 1

    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 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. Number of Girls. 11."

    Note: Specifying a caption on a data table is optional. However, if a caption is specified, the <caption> element must be used to programmatically associate data table captions with data tables.


    Boys and Girls in Elementary School Classes
    Class # of Boys # of Girls
    1st Grade 11 10
    2nd Grade 7 12
    3rd Grade 9 11
    4th Grade 13 12
    5th Grade 12 12

    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>

    Required unit tests for HTML development technique 1

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

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

    To comply with this technique, you must implement the following example.

    HTML example 2

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


    Boys and Girls in Elementary School Classes, by Teacher
    Class Teacher # of Boys # of Girls
    1st Grade Mr. Henry 5 4
    Mrs. Smith 7 9
    2nd Grade Mr. Jones 3 9
    Mrs. Smith 4 3
    Mrs. Kelly 6 9

    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, so it contains 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.

    Required unit tests for HTML development technique 2

    Perform the following unit test using a Web syntax analysis tool or a screen reader.


IBM® Lotus® Domino® examples

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

    To comply with this technique, you must implement all of the following examples.

    To make simple data tables accessible, identify row and column headers. The technique will vary, depending on the version of IBM Lotus® Notes® you are using. The techniques in this section refer to the "Boys and Girls in Elementary School Classes" example table below.


    Boys and Girls in Elementary School Classes
    Class # of Boys # of Girls
    1st Grade 11 10
    2nd Grade 7 12
    3rd Grade 9 11
    4th Grade 13 12
    5th Grade 12 12

    Domino example 1

    Lotus Notes 7 includes new table options that allow you to define simple row and column headers in data tables. In the example table above, 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 Lotus Domino when the application is displayed in a browser.

    table properties dialog

    Domino example 2

    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 as follows:

    1. Open the page or form in Designer and select the table you want to convert to HTML.
    2. Select Edit > Convert to HTML. The table is converted into HTML source code.
    3. Place the cursor within the HTML source code and select 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. Since the <th> element does not modify the visual appearance of the table, the visual look of the table will not change.
    5. 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.

    HTML editor containing a data table

    Required unit tests for Domino development technique 1

    Refer to the required unit tests for HTML development technique 1 to test this technique.

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

    To comply with this technique, you must implement the following example.

    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 examples in this section refer to the "Boys and Girls in Elementary School Classes" table below.


    Boys and Girls in Elementary School Classes, by Teacher
    Class Teacher # of Boys # of Girls
    1st Grade Mr. Henry 5 4
    Mrs. Smith 7 9
    2nd Grade Mr. Jones 3 9
    Mrs. Smith 4 3
    Mrs. Kelly 6 9

    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 shown in the following example, 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.

    Domino example 3

    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, so it contains 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>
    ...

    Required unit tests for Domino development technique 2

    Refer to the required unit tests for HTML development technique 2 to test this technique.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

The recommended development techniques for this checkpoint are as follows:

  1. Define a layout table using WAI-ARIA presentation (link resides outside ibm.com) role.
  2. Use the title attribute on headers that can be sorted.
  3. Avoid background attributes on the <tbody> and <td> elements.
  4. Use the abbr attribute for very long tables.
  5. Reorganize complex table into several smaller data tables.
  6. Avoid the summary attribute on layout tables.
  7. Set the table and cell width to a percentage, rather than an absolute size.
  8. Use Cascading Style Sheets instead of HTML layout tables.
  9. Avoid the <th> element and id and headers attributes in layout tables.

Recommended development technique example 1

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 that will force screen readers to ignore the table structure and read only the data within the table. This effectively hides 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.

Recommended development technique example 2

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

Recommended development technique example 3

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.

Recommended development technique example 4

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 "Number 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>

Recommended development technique example 5

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.

Recommended development technique example 6

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.

Recommended development technique example 7

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. As shown in the example code below, 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.

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

Recommended development technique example 8

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.

Recommended development technique example 9

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

See WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 1.3.1 (link resides outside of ibm.com) for a list of techniques and examples.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.