Web Accessibility Checker : Check Details

Element

table

Error Type

Known

Guidelines

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

Data tables that contain more than one row/column of headers use the id and headers attributes to identify cells.

Error

Data table with more than one row/column of headers does not use id and headers attributes to identify cells.

Short Description

id and headers attributes allow screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute.

How To Repair

Add id and headers attributes to table cells so they identify the cells that relate to the headers.

Steps To Check

Procedure

1. Check each data table in the document.
2. Check if the table contains more than one row or either row or column headers.
3. Check if the table cells contain id and header attributes.

Expected Result

1. Data tables that contain more than one row/column of headers use the id and headers attributes to identify cells.

Failed Result

1. Add id and headers attributes to table cells so they identify the cells that relate to the header.

Examples

Pass Examples

Data table with multiple rows of column headers contains id and headers attributes.

<?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 #245.2 - Negative</title>
</head>
<body>

<table border="1" >
<tr>
	<th id="class">Class</th>
	<th id="teacher">Teacher</th>
	<th id="males">Males</th>
	<th id="females">Females</th>
</tr>
<tr>
	<th id="firstyear" rowspan="2">First Year</th>
	<th id="Bolter" headers="firstyear teacher">D. Bolter</th>
	<td headers="firstyear Bolter males">5</td>
	<td headers="firstyear Bolter females">4</td>
</tr>
<tr>
	<th id="Cheetham" headers="firstyear teacher">A. Cheetham</th>
	<td headers="firstyear Cheetham males">7</td>
	<td headers="firstyear Cheetham females">9</td>
</tr>
<tr>
	<th id="secondyear" rowspan="3">Second Year</th>
	<th id="Lam" headers="secondyear teacher">M. Lam</th>
	<td headers="secondyear Lam males">3</td>
	<td headers="secondyear Lam females">9</td>
</tr>
<tr>
	<th id="Crossy" headers="secondyear teacher">S. Crossy</th>
	<td headers="secondyear Crossy males">4</td>
	<td headers="secondyear Crossy females">3</td>
</tr>
<tr>
	<th id="Forsyth" headers="secondyear teacher">A. Forsyth</th>
	<td headers="secondyear Forsyth males">6</td>
	<td headers="secondyear Forsyth females">9</td>
</tr>
</table>

</body>
</html>

Fail Examples

Data table with multiple rows of column headers does not contain id or headers attributes.

<?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 #245.1 - Positive</title>
</head>
<body>

<table border="1" >
<tr>
	<th>Class</th>
	<th>Teacher</th>
	<th>Males</th>
	<th>Females</th>
</tr>
<tr>
	<th rowspan="2">First Year</th>
	<th>D. Bolter</th>
	<td>5</td>
	<td>4</td>
</tr>
<tr>
	<th>A. Cheetham</th>
	<td>7</td>
	<td>9</td>
</tr>
<tr>
	<th rowspan="3">Second Year</th>
	<th>M. Lam</th>
	<td>3</td>
	<td>9</td>
</tr>
<tr>
	<th>S. Crossy</th>
	<td>4</td>
	<td>3</td>
</tr>
<tr>
	<th>A. Forsyth</th>
	<td>6</td>
	<td>9</td>
</tr>
</table>

</body>
</html>