Web Accessibility Checker : Check Details

Element

body

Error Type

Potential

Guidelines

WCAG 2.0 (Level AAA)
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
Success Criteria 2.4.10 Section Headings (AAA)

Requirement

Each section of content is marked with a header element.

Error

Sections may not be marked with headers.

Short Description

Using the heading elements, h and h1 - h6, to markup the beginning of each section in the content can assist in navigation.

How To Determine

Question	Are all sections of the content marked with `headers`?
PASS	All sections of the content are marked with `headers`.
FAIL	All sections of the content are not marked with `headers`.

Steps To Check

Procedure

1. View the document content and find the major sections.
2. Determine if there is a header prior to each section.

Expected Result

1. Each section of content is marked with a header element.

Failed Result

1. Add headers to each section of the content.

Examples

Pass Examples

Sections are marked with headers.

<?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 #261.2 - Negative</title>
</head>
<body>
<h1>H69: Providing Heading elements at the beginning of each section of content</h1>

<h2>Applicability</h2>
<p>HTML and XHTML </p>

<h2>This technique is referenced from:</h2>
<p>How to Meet Success Criterion 2.4.1 </p>

<h2>User Agent and Assistive Technology Support Notes</h2>
<p>Home Page Reader, JAWS, and WindowEyes all provide navigation via headings and provide information about the level of the heading. The Opera browser provides a mechanism to navigate by headings. Additional plugins support navigation by headings in other user agents.</p>

<h2>Description</h2>
<p>The objective of this technique is to demonstrate how using the heading elements, h and h1 - h6, to markup the beginning of each section in the content can assist in navigation. Most assistive technologies and many user agents provide a mechanism to navigate by heading elements by providing keyboard commands that allow users to jump from one heading to the next. Using heading elements to markup sections of a document allows users to easily navigate from section to section.</p>

<h2>Examples</h2>

<p>Example 1...</p>

</body>
</html>

Fail Examples

Sections are not marked with headers.

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

<p>
<strong>H69: Providing Heading elements at the beginning of each section of content</strong><br/>

<strong>Applicability</strong><br/>
HTML and XHTML <br/>

<strong>This technique is referenced from:</strong><br/>
How to Meet Success Criterion 2.4.1 <br/>

<strong>User Agent and Assistive Technology Support Notes</strong><br/>
Home Page Reader, JAWS, and WindowEyes all provide navigation via headings and provide information about the level of the heading. The Opera browser provides a mechanism to navigate by headings. Additional plugins support navigation by headings in other user agents.<br/>

<strong>Description</strong><br/>
The objective of this technique is to demonstrate how using the heading elements, h and h1 - h6, to markup the beginning of each section in the content can assist in navigation. Most assistive technologies and many user agents provide a mechanism to navigate by heading elements by providing keyboard commands that allow users to jump from one heading to the next. Using heading elements to markup sections of a document allows users to easily navigate from section to section.<br/>

<strong>Examples</strong><br/>
Example 1...
</p>

</body>
</html>