Heading Structure Fundamentals | Accessibility at Arizona

Why headings matter

Headings (H1-H6) are one of the most important accessibility features. They provide:

Navigation: Screen reader users can jump between headings (H key in NVDA/JAWS)
Structure: Headings create a document outline that shows relationships
Scannability: All users benefit from clear section organization
SEO: Search engines use headings to understand page content

Research findings

WebAIM's screen reader user surveys consistently show that navigating by headings is the primary way users explore web pages. 67.5% of users report navigating by headings "always" or "often" (WebAIM Survey #10, 2024).

Core rules for headings

1. Use only one H1 per page

The H1 should be the main page title. It tells users what the page is about.

✓ Correct

<h1>Course Registration</h1>
<h2>Spring 2026 Schedule</h2>
<h2>How to Register</h2>

✗ Incorrect

<h1>University of Arizona</h1>
<h1>Course Registration</h1>
<h1>Spring 2026</h1>

2. Don't skip heading levels

Go from H1 → H2 → H3 in order. Never jump from H1 to H3 or H2 to H5.

✓ Correct hierarchy

H1: Page Title
  H2: Major Section
    H3: Subsection
    H3: Subsection
  H2: Another Section
    H3: Subsection

✗ Skipped levels

H1: Page Title
  H3: Section (skipped H2!)
    H5: Topic (skipped H4!)
  H2: Another Section

3. Headings must describe content

Each heading should clearly describe the section that follows it.

Good: "How to Submit Your Assignment"
Poor: "More Information" or "Section 3"

4. Use headings for structure, not styling

Don't choose heading levels based on how they look. Use CSS for visual styling.

✓ Correct approach

<h2>Contact Information</h2>
/* Style with CSS */
h2 { font-size: 1.5rem; }

✗ Incorrect approach

<!-- H4 used because it's smaller -->
<h4>Contact Information</h4>
<!-- But this breaks hierarchy -->

Headings in HTML

Basic HTML heading elements

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor section</h5>
<h6>Smallest heading</h6>

Common mistakes

Using bold instead of headings: <p><strong>Section Title</strong></p> looks like a heading but isn't
Using heading classes on non-headings: <p class="h2">Title</p> has no semantic meaning
Empty headings: <h2></h2> or headings with only images and no text

ARIA and headings

You can add heading roles with ARIA, but native HTML is preferred:

<!-- Native (preferred) -->
<h2>Section Title</h2>

<!-- ARIA (use only when necessary) -->
<div role="heading" aria-level="2">Section Title</div>

Headings in content management systems

WordPress / Drupal / CMS Rich Text

Select your heading text
Look for a "Paragraph" or "Format" dropdown
Choose "Heading 2", "Heading 3", etc.
Note: H1 is usually the page title, so start content with H2

Brightspace (D2L)

In the HTML Editor, select your text
Click the Format dropdown
Choose the appropriate heading level

Microsoft Word (for web content authors)

Use Word's Styles gallery (Home tab) to apply Heading 1, Heading 2, etc. These will transfer when copying to web editors.

Headings in documents

Microsoft Word

Home tab → Styles gallery
Keyboard: Ctrl+Alt+1 through Ctrl+Alt+3
Use Navigation Pane (View → Navigation Pane) to see structure

Google Docs

Click Normal text dropdown → Choose heading level
Keyboard: Ctrl+Alt+1 through Ctrl+Alt+6
View → Show document outline to verify structure

PowerPoint / Google Slides

Slide titles function as H1 for each slide
Use text hierarchy within slides consistently
Every slide needs a unique title

Testing heading structure

Browser extensions

WAVE: Shows heading outline with errors highlighted
HeadingsMap: Creates visual outline of page headings
Web Developer: Outline → Show Element Tag Names

Screen reader testing

NVDA/JAWS: Press H to jump between headings
VoiceOver: Use rotor (VO+U) to list all headings
Can you understand page structure from headings alone?

Document testing

Word: View → Navigation Pane shows heading outline
Acrobat: View → Navigation Panels → Tags
Google Docs: View → Show document outline

Real-world examples

Good example: Course syllabus page

H1: ENGL 101: Introduction to Academic Writing
  H2: Course Description
  H2: Learning Outcomes
  H2: Required Materials
    H3: Textbooks
    H3: Software
  H2: Grading
    H3: Assignments
    H3: Participation
  H2: Schedule
    H3: Week 1
    H3: Week 2
  H2: Policies
    H3: Attendance
    H3: Academic Integrity

Good example: Department home page

H1: Department of Chemistry
  H2: About Us
  H2: Academic Programs
    H3: Undergraduate
    H3: Graduate
    H3: Research
  H2: People
    H3: Faculty
    H3: Staff
    H3: Graduate Students
  H2: News & Events
  H2: Contact

Quick checklist

☐ Only one H1 per page (the main title)
☐ Headings follow sequential order (no skipping)
☐ All headings are descriptive
☐ Headings used for structure, not styling
☐ No empty headings
☐ Heading levels match content hierarchy
☐ Tested with heading outline tool