HTML/Usage/Headings/Missing

From W3C Wiki
< HTML‎ | Usage/Headings
Revision as of 09:01, 25 May 2014 by Sfaulkne (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

General guidance

As a general rule, include a heading (h1-h6) as a child of each section and article element.

Screen readers expose the heading hierarchy of document to users by announcing the heading level (1 to 6) of each heading they find. During calculation of a document's outline, sections and articles with missing headings result in an outline with a malformed heading hierarchy in which some heading levels are skipped—as the heading level of each heading reflects its outline depth.

Example code: simple document with an section that has a missing heading

<body>
 <h1>top level heading</h1>
  <section> <!-- empty section -> 
   <section><h3>(intended) 2nd level heading is calculated as a level 3 heading 
   due to being nested in an empty section </h3>  
   </section>
  </section>

Expected document outline exposed by browsers and assistive technology for the above example

→ level 1 heading
→ → → level 3 heading

A user's perspective on missing headings

The heading hierarchy is the best way to understand the relationship between different sections of content. 
If the hierarchy is logical (cascades without skipping levels), then those relationships are easy to determine.

Headings also assist with content location. Moving between headings that have a logical hierarchy enables you to 
drill down into the page content, narrowing down the part of the page you need to examine in detail to find the content 
you're looking for.

If the page doesn't have a logical heading hierarchy, then neither of these things is possible. This significantly reduces 
the UX from the point of view of a blind person.

Léonie Watson

Web Content Accessibility Guidelines advice

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested 
(e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

Organizing a page using headings

Guidance from the HTML specification

section element advice

Each section should be identified, typically by including a heading (h1-h6 element)as a child of the section element.

W3C HTML 5.1 specification 

article element advice

Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.

W3C HTML 5.1 specification