Element

body

Error Type

Potential

Guidelines

  • WCAG 2.0 (Level AAA)
    Guideline Group2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
    Guideline SubgroupSuccess 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>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API