Accessible Guides Project

This guide has a clear heading structure:
https://guides.library.upenn.edu/FRUS

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.

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:

• Do create a clean hierarchy of h-tags.
• Do write headings that can be understood in a list of headings, without context.
• Do not code in additional heading1 tags because you like the way they look. In fact, don't throw in any headings that disrupt the hierarchy.
• Do not leave holes in your outline. When a section needs no heading for sighted users, screen readers still require one. The Web Unit can help you add a heading that's screen-reader only
• Do ask the Web Unit for help making any heading any size you want!

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."

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

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.

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

<h

Hints

• 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.