Section Headings
Success Criterion 2.4.10 (Level AAA)

Question

Are descriptive section headings provided for sections of lengthy content such as chapters and subchapters, topics and subtopics, etc.?

Why is this important

Many users have difficulty reading and comprehending lengthy content if it is not broken down into headings and subheadings. Headings can organize content by separating like content into sections and subsections. Additionally, some users will use headings to “skim-read” the content, so they can find information of interest quicker.

  • Note 1: “Heading” is used in its general sense and includes titles and other ways to add a heading to different types of content.
  • Note 2: This success criterion covers sections within writing, not user interface components. User Interface components are covered under Success Criterion 4.1.2.
  • Note 3: Section headings may be impractical for some documents such as historical or electronic file formats that have no built-in support for hierarchical structure (i.e. txt file).

Whom does it benefit?

Example 1:

As a keyboard-only user,
I want lengthy webpages to have section headings
so that I can tab from heading to heading in order to discover content of interest more quickly.

Example 2:

As a person with a learning disability,
I want to identify section headings in documents
so that I can visualize the content structure to aid in better reading comprehension.

What should you do?

Before assigning headings, review the overall structure of the webpage or document. Divide the page into main sections and begin each section with a descriptive heading. Then add subheadings where appropriate. A section may consist of one, two or more paragraphs; however, make sure you don’t add too many subheadings because this may make your content harder to read.

  • Do not use formatting styles (font size, bold etc.) to give the visual appearance of headings. Always use actual heading tags (e.g. <h1>) for content headings.
  • Similarly, do not use heading tags to achieve only visual effects within the text itself. For visual effects, use format styles (font size, bold etc.).

How do you do it?

  • Provide descriptive headings that organize the content into well-defined sections.
  • Apply proper semantic structure to the descriptive headings as appropriate. Use heading elements:
    • <h1> for title of page
    • <h2> for major sections of the page
    • <h3> - <h6> for subsections of each <h2> (when appropriate)

Note: Make sure you don’t skip heading levels. Headings should organize content hierarchically.

Need technical guidance?

Additional Resources to help you: