scroll to top

Headings Make Content More Accessible

Good content organization makes information simple to find and easy to understand. Libraries shelve books in order so people can find the ones they need. Documents need to be just as organized so readers can find the information they need.

A good heading is short, meaningful, and located in the right place. 

Headings Help With Navigation

Headings and subheadings break up the text in a document into manageable sections. Readers use the headings to navigate between topics and focus on the information they need.

For example, the headings on this web page allow the reader to skip the section on language and move directly to this section on organization. 

Useful headings summarize the text's subject in just a few words.

GOOD EXAMPLE: PTSD Symptoms

BAD EXAMPLE:  Stress is Bad For You

Headings Can Create a Content Outline

Headings and subheadings show how sections of a document fit together. Proper subheadings make complicated texts easier to read.

Nesting headings correctly is important. 

Pay attention to heading levels to avoid confusion. If headings are not nested correctly, context and meaning will be lost.

GOOD EXAMPLE

  • Stress
    • Kinds of Stress
      • Physical
      • Emotional
      • Mental
    • Causes of Stress
      • PTSD
      • Family
      • Work

BAD EXAMPLE

  • Stress
  • Kinds
  • Physical
  • Emotional
  • Mental
  • Causes
  • PTSD
  • Family
  • Work

Heading Levels Clarify Content Structure

Hierarchy of ideas and page structure is best indicated by nested subheadings. Accessibility standards also requires that the subheadings be marked with the correct <h#> tags in HTML. The combination of visual hierarchy and coded heading tags ensure that the content is fully accessible. 

GOOD EXAMPLE

  • Page Title <h1>
    • Heading Level 2 <h2>
      • Heading Level 3 <h3>
        • Heading Level 4 <h4>
      • Heading Level 3 <h3>
    • Heading Level 2 <h2>
      • Heading Level 3 <h3>

BAD EXAMPLE

  • Page Title <h1>
    • Heading Level 2
      • Heading Level 3
      • Heading Level 4
      • Heading Level 3
    • Heading Level 2
      • Heading Level 3

Note: Indented levels and italics in examples above are just for illustration. Headings on a web page are not actually indented, nor are they italicized.

Updated: 12/30/2024 3:00:09 PM