Research Guides: Accessibility Best Practices for LibGuide Content Creators: Headers

Nesting Headers | When to Use Headers | Resources

One of the easiest and most important ways content can be organized to meet accessibility guidelines is by using proper heading formats.

Headings, and behind the scenes header tags (<h1>, <h2>, <h3> ,etc.), "communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation." ^[1]

Most text editors allow users to highlight text and change the font from "normal" or "paragraph", to some variation of Heading 2 through Heading 6. (Most text editors hide the Header 1 option because it is reserved for page titles. Some, like the one used in LibGuides, also hide Header 2 because they are used in page-wide navigation.)

Example:

For instance, when you choose to edit a LibGuide page, you may notice the warning at the bottom of the editor: <H1> and <H2> have been removed for WCAG2 compliance. So, what does that mean? If you open the Paragraph Format drop-down box at the top of the editor (generally labeled Normal), you will see that your Heading options begin at 3. That's because Headings 1 & 2 are used by LibGuides as a page-wide navigation.

LibGuide Text Editor with Paragraph Format options highlighted.

Headings are nested by their rankings - Heading 1 (<h1>) is the highest rank and Heading 6 (<h6>) is the lowest. Heading 1 would be the title of the page, Heading 2 would be topics, Heading 3 would be subtopics, etc. This nested structuring assists screen readers navigating the page.

Excerpt from WebAim ©: Semantic Structure: Regions, Headings, and Lists

A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.

Headings create an outline for the page, similar to a term paper outline or table of contents. The <h1> describes the page as a whole (and should be similar to the page <title>). A page should typically have only one <h1>. Headings <h2> through <h6> represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from <h2> to <h4>, going down the page. Here is an example of content hierarchy with corresponding heading levels:

H1: My Favorite Recipes
- H2: Quick and Easy
  - H3: Spaghetti
  - H3: Hamburgers
  - H3: Tacos
    - H4: Beef Tacos
    - H4: Chicken Tacos
    - H4: Fish Tacos
- H2: Some Assembly Required
  - H3: Tuna Casserole
  - H3: Lasagna
    - H4: Vegetable Lasagna
    - H4: Beef Lasagna
- H2: All-In
  - H3: Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce
  - H3: Sun Dried Tomato and Pine Nut Stuffed Beef Tenderloin

^[2]

Excerpt from WebAim ©: Semantic Structure: Regions, Headings, and Lists

Headings must use heading tags.

Screen readers and assistive technologies rely on heading tags (<h1> - <h6>) to identify headings. Text that is merely large, bold, or emphasized is not interpreted as a heading unless the <h1> - <h6> markup is used.

Use headings only when they represent following content.

To highlight or emphasize text that is not a heading, use styles—not heading tags—to achieve visual results. ^[2]

Best Practice:

In the past, the Header options were often used to change the font size and style of text; however, this is a bad practice. The Header tag can be set to look identical to "normal" font. Its purpose is to provide navigational assistance rather than simple visual cues. The reverse of this is also true - it is bad practice to style "normal" font to look like a header.