Skip to content
Colorado State University

Information Technology

IT Services

  • IT Services Overview
  • Purchasing & Surplus
  • Software
  • Computer & Device Support
  • Computer Replacement Program
  • Security
  • Guides

Web Services

  • Web Services Overview
  • Design Process
  • Site Managers
  • Site Manager Introduction
  • Web Governance
  • Guides
  • Forms

Remote Resources

Resources for remote teaching and working.

Remote Resources

Guides

Search our self-help guides.

Self-Help Guides

Support

Reach out to us to get support.

Request Support

A College of Liberal Arts Division

Accessibility: Headings

Home » Accessibility » Accessibility: Headings
Last UpdatedDecember 02, 2019
Table of Contents
  1. Summary
  2. Using Headings
    1. Use True Headings
    2. Use True Headings
      1. A Good Hierarchy
      2. A Bad Hierarchy

Summary

The goal of all web pages is to create a natural and logical hierarchy of information to help guide users to the content they need, and the primary means of accomplishing this is through the proper use of headings. A well structured page allows for sighted visitors to scan the page for the section they need while also allowing assistive technology to build an outline of the page.

Using Headings

Use True Headings

Assistive technology uses the markup (HTML) of the web page to build an outline (primarily using headings) and it can only do this if the proper markup is used. For this reason, when creating a web page, if there is text being used as a heading we must be sure that its a heading tag versus being text that is simply bold with an increased font size.

<h1>Example Heading Tag</h1> This is a proper use of a heading tag.

<span style="font-size:30px; font-weight:bold;>Example Fake Heading</span> This creates the illusion of a heading for visual users but isn't treated as a true heading by assistive technology and will not be included as part of the page hierarchy.

Within WordPress this simply means using the formatting dropdown (see Figure A).

A screenshot of where the WordPress editor text format dropdown is located.

Use True Headings

In order for assistive technology to build a proper page outline, and for its users to scan through it, headings must be used to create hierarchy.

A Good Hierarchy

  • Heading Level 1 (Page Title - The theme / subject of the page)
    • Heading Level 2 (Section Title)
      • Heading Level 3 (Sub Title)
    • Heading Level 2 (Section Title)
    • Heading Level 2 (Section Title)
      • Heading Level 3 (Sub Title)
        • Heading Level 4 (Sub Title)
        • Heading Level 4 (Sub Title)
          • Heading Level 5 (Sub Title)

As you can see the H1 isn't used more than once, and heading levels aren't skipped.

A Bad Hierarchy

  • Heading Level 1 (Page Title)
    • Heading Level 4 (Section Title)
    • Heading Level 1 (Section Title)
      • Heading Level 2 (Sub Title)
    • Heading Level 2 (Section Title)
      • Heading Level 4 (Sub Title)
    • Heading Level 3 (Section Title)
      • Heading Level 4 (Sub Title)

As you can see, there are multiple H1's used and heading levels are skipped (H2 to H4). If you ever run into a scenario where using a proper heading doesn't look right visually please submit a web support request and we will help to make adjustments.

Related Articles
  • Accessibility
  • Accessibility: Audio & Video
  • Accessibility: Checklist
  • Accessibility: Colors
  • Accessibility: Example Page
  • Accessibility: Headings
  • Accessibility: Images
  • Accessibility: Links
Categories
  • Accessibility8
  • Web20
Tags
  • Accessibility7
  • Headings2
  • Hierarchy1
Share on facebookShare on linkedin Post on x

Post Navigation

Previous

Accessibility: Example Page

Next

Accessibility: Images

  • Liberal Arts
  • FSAS Login
  • CLA Brand
  • CLAHub
  • CLA Help Desk
  • Apply to CSU
  • Careers
  • Equal Opportunity
  • Privacy Statement
  • Accessibility Statement
  • Disclaimer
  • Login
Colorado State University
© 2025 Colorado State University - College of Liberal Arts, Fort Collins, Colorado 80523 USA