Skip to Main Content
Go to Penn Libraries homepage   Go to Guides homepage

Accessible Guides Project

Starting with an example

This guide has a clear heading structure:

Here's a screenshot with the headings labelled:
Headers are shown a numbers pasted on the screenshot

What are headings in HTML?

Headings are also called H-tags or header tags because that's how they're written in HTML.
Back to 6th grade: You're outlining your page!

HTML provides 6 heading levels, but you should not use the top 2.

Why skip Heading 1 and Heading 2?

Because Guides is already using Heading 1 and Heading 2 to define the overall page structure

  • Your page title is a Heading 1.
  • Every box title is a Heading 2.

So, inside your box, the top tag should be an h3.

It's not about font size. Web Unit will fix you up with any font size you desire!

Your h3 tag can be enormous. Email the Web Unit for help.

For screen readers, the heading outline is the number 1 tool for efficiency

Think of heading levels as a hierarchy, not as a font size!

  • Sighted patrons unconsciously glance at the page layout for a quick outline.
  • Patrons with screen readers consciously start with a setting that presents the heading outline. 

The rules:

How to use the WYSIWYG to make headings

  1. Select your heading text.
  2. In the WYSIWYG, click Normal. You get a dropdown.
  3. The top Heading option is Heading 3. (Springshare took out 1 and 2 because Penn Libraries suggested it!)
  4. Select the level you want.
  5. Click "Save & Close."

Heading options in the 'normal' dropdown of the  WYSIWYG

Don't kill yourself. Keep it simple!

Chances are you'll never need Heading 5 or Heading 6 (unless you're writing a finding aid).

Coming soon in accessibility compliance!

ADA compliance is determined based on WCAG 2 guidelines.

Starting with WCAG 3, the guidelines will include a rating for heading structure. Using the chart below, a rating of 3.5 is required.

WCAG 3.0 ratings for headers

Rating 0: 25% or less of expected headings
Rating 1: 26-50% or less of expected headings
Rating 2: 51-80% or less of expected headings
Rating 3: 81-95% or less of expected headings
Rating 4: 96-100% or less of expected headings

>>>Advanced: Working outside the WYSIWYG<<<

How to check the heading hierarchy in the HTML

Open a tab with the underlying HTML:

  • MacOS – Command + U
  • Windows – Control + U

Open a search box.

  • MacOS – Command + Option + F
  • Windows – Control + Shift + F.

Paste in



  • in the finder box, keep clicking the down arrow till you get to the bottom of the page. Did the outline make sense?
  • In the underlying HTML, the actual page content starts near the bottom. About 7/8 of the code is taken up by the header and scripts. You can search for the page title if you want to locate the H1.
  • Don't let Springshare's early Heading 1 tags sidetrack you! The Springshare HTML includes 2 commented out H1 tags before you get to the proper page title.

Penn Libraries Home Franklin Home
(215) 898-7555