Web Accessibility Checker : Check Details

Element

table

Error Type

Potential

Guidelines

BITV 1.0 (Level 2)
Level 2
5.5 Provide summaries for tables.
WCAG 1.0 (Level AAA)
Priority 3
5.5 Provide summaries for tables.
WCAG 2.0 (Level A)
1.3 Ensure that information and structure can be separated from presentation
Success Criteria 1.3.1 Info and Relationships (A)
WCAG 2.0 (Level AA)
1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Success Criteria 1.3.1 Info and Relationships (A)
WCAG 2.0 (Level AAA)
1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
Success Criteria 1.3.1 Info and Relationships (A)

Requirement

All complex data tables have a summary.

Error

Table may require a summary.

Short Description

The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data.

How To Determine

Question	Is this data table complex enouqh that it requires a summary?
PASS	Table does not require a summary.
FAIL	Table requires a summary.

Steps To Check

Procedure

1. Check all data tables in the document.
2. Determine if the table is complex enough to require a summary.
3. Note: A table is complex if it has several sets of row or column headers, or if it has multiple groups of columns or rows.
4. Check if the table has a summary attribute.

Expected Result

1. All complex data tables have a summary.

Failed Result

1. Add a valid summary attribute to the table element.

Examples

Pass Examples

Complex data table with a summary.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #111-2 - Negative</title>
</head>
<body>

<table border="1" summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
</tr>
<td>5:00</td>
<td>5:05</td>
<td>5:11</td>
<td>5:19</td>
</tr>
</tr>
<td>6:00</td>
<td>6:05</td>
<td>6:11</td>
<td>6:19</td>
</tr>
</table>

</body>
</html>

Fail Examples

Complex data table without a summary.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #111.1 - Positive</title>
</head>
<body>

<table border="1">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
</tr>
<td>5:00</td>
<td>5:05</td>
<td>5:11</td>
<td>5:19</td>
</tr>
</tr>
<td>6:00</td>
<td>6:05</td>
<td>6:11</td>
<td>6:19</td>
</tr>
</table>

</body>
</html>