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 both row and column headers use the scope attribute to identify cells.

Error

Data table with both row and column headers does not use scope to identify cells.

Short Description

The scope attribute may be used to clarify the scope of any cell used as a header.

How To Repair

Add scope attributes to header cells so they identify the cells that relate to the header.

Steps To Check

Procedure

1. Check each data table in the document.
2. Check if the table contains both row and column headers.
3. Check if the header cells contain a scope attribute that identifies the cells that relate to the header.

Expected Result

1. Data tables that contain both row and column headers use the scope attribute to identify cells.

Failed Result

1. Add scope attributes to header cells so they identify the cells that relate to the header.

Examples

Pass Examples

Data table with both row and column headers contains scope 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 #244.2 - Negative</title>
</head>
<body>

<table border="1">
<tr><th scope="col">Name</th><th scope="col">Birth</th><th scope="col">Gender</th></tr>
<tr><th scope="row">Clayton</th><td>2005-10-10</td><td>male</td></tr>
<tr><th scope="row">Carol</th><td>2005-10-11</td><td>female</td></tr>
<tr><th scope="row">Susan</th><td>2005-10-12</td><td>female</td></tr>
<tr><th scope="row">Oleg</th><td>2005-10-13</td><td>male</td></tr>
<tr><th scope="row">Belnar</th><td>2005-10-14</td><td>male</td></tr>
</table>

</body>
</html>

Fail Examples

Data table with both row and column headers does not contain scope 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 #244.1 - Positive</title>
</head>
<body>

<table border="1">
<tr><th>Name</th><th>Birth</th><th>Gender</th></tr>
<tr><th>Clayton</th><td>2005-10-10</td><td>male</td></tr>
<tr><th>Carol</th><td>2005-10-11</td><td>female</td></tr>
<tr><th>Susan</th><td>2005-10-12</td><td>female</td></tr>
<tr><th>Oleg</th><td>2005-10-13</td><td>male</td></tr>
<tr><th>Belnar</th><td>2005-10-14</td><td>male</td></tr>
<tr></tr>
</table>

</body>
</html>