Why Headings Matter

Headings are one of the most important tools for creating accessible and well-organized webpages. They help users —including those relying on screen readers — quickly understand the structure and content of a page. Proper use of headings ensures that your content is logical, easy to navigate and compliant with accessibility standards.


Using Headings to Define Page Structure

Headings aren’t just a way to make text larger or bolder — they define the structure of your content. Think of headings as an outline for your page:

  • Heading 1 (H1): The page title (automatically applied by the CMS)
  • Heading 2 (H2): Main sections of the page
  • Heading 3 (H3): Subsections under an H2
  • Heading 4-6 (H4–H6): Additional levels of detail, if necessary

Proper use of headings provides a clear hierarchy, making it easier for all users to follow your content.


An Example of Proper Page Structure with Headings

Here’s an example of how headings define a page structure:

Page Title (H1, Automatically Applied)

(Introduction copy)

H2: Why Accessibility is Important

(Copy related to “why accessibility is important”)

H3: Legal Requirements

(Copy related to “legal requirements”)

H3: Ethical Considerations

(Copy related to “ethical considerations”)

H2: Key Principles of Accessibility

(Copy related to “key principles of accessibility”)

H3: Perceivable

(Copy related to “perceivable”)

H4: Text Alternatives for Images

(Copy related to “text alternatives for images”)

H4: Captions for Videos

(Copy related to “captions for videos”)

H3: Operable

(Copy related to “operable”)

H4: Keyboard Navigation

(Copy related to “keyboard navigation”)

H4: Avoiding Time-Based Interactions

(Copy related to “avoiding time-based interactions”)

 

This hierarchy ensures the page is organized and easy to navigate. Users of assistive technologies can skip to the desired section quickly, rather than having to read through all the content linearly.


General Rules for Applying Headings

When adding headings to your page, follow these best practices:

  • Avoid Skipping Levels: Headings should follow a logical order. For example, an H3 should never directly follow an H1. Always nest headings hierarchically.
  • Do Not Use Headings for Styling: Headings are not a design tool. Avoid using headings to make text larger or bold; use proper formatting options in the rich text editor instead.
  • The H1 Is Reserved for the Page Title: In Elon University’s CMS, the H1 heading is automatically applied to the page title. Content editors cannot add an H1 elsewhere, ensuring consistency and accessibility.
  • Keep Headings Short and Descriptive: Use concise, meaningful headings that clearly describe the content of the section. Do not make an entire paragraph a heading to call attention to that content.
  • Use Headings Consistently: Ensure the same type of information always appears under the same heading level across pages to maintain predictability and usability.

Common Mistakes to Avoid

  • Skipping Heading Levels: Jumping from H2 to H4 can confuse users and assistive technologies, and is a violation of ADA compliance. Stick to a logical order.
  • Using Headings for Decoration: Headings should describe content, not be used for visual styling.
  • Overusing Heading Levels: Avoid unnecessary complexity. Most pages don’t require heading levels deeper than H3 or H4.

Final Tips

Using headings correctly not only improves accessibility but also enhances the usability of your pages for all users. When in doubt, think about how your headings would look in an outline. If the structure is clear and logical, you’re on the right track.