2.1 Headings

Headings act as the headlines within a web document. They provide the content structure and hierarchy.

Screen reader interaction

  • Users can quickly skim the contents of a webpage by listening to the page headings. This helps a user understand a page's content structure and hierarchy.

  • Headings also act as page navigation. A person using a screen reader, having listened to the page's headings, can then jump to any heading on a page.

  • Content is described in a linear fashion by the screen reader. As such, even three-column pages are described as a single column starting with the first column.

Solution: Use headings to give your content a logical hierarchy.

Use page headings to outline content— not unlike a bulleted page outline or table of contents. Use the headings in order and don't skip headings.

In LibGuides, Heading 1 <h1> is reserved for guide titles and Heading 2 <h2> is held for box titles. For content within the boxes, use headings 3 to 6. Here's an example of how to use headings to keep content in order.

  • H1 Guide Title

    • H2 Box Title

      • H3 Section inside a box

        • H4 Sub-section inside a box

        • H4 Sub-section

      • H3 Section

    • H2 Box Title

      • H3 Section

      • H3 Section

        • H4 sub-section

        • H4 sub-section

How to use headings in LibGuides

  1. Click in the paragraph you want to be a header

  2. Select the level of heading from the paragraph format menu (pictured above).

Additional best practices

  • Don't use a font-size change alone to signify headings. This heading would be missed by a screen reader.

  • Similarly, don't change the headings to simply make text larger or smaller. This can alter your page outline and make it difficult to understand.

  • If you need to change the heading's font size, do so after making it a heading.

  • Better than using the font size menu, customizing your CSS can re-size headings across your entire website.

Testing

Using Tota11y

  • When you click the Tota11y icon then select the headings button, a window will pop up explaining any errors. The most common errors are heading levels skipped and headings out of order.

  • This window also has a summary tab (above) which shows the sequential and nesting order of your headings. It is easy to see where errors occurred and if your nesting order makes sense.

  • On your page, you will also see small heading notations next to each header so you can see which elements on the page are headings.

Fix a mistagged heading

Just as you click in a paragraph and change it to a heading from the format menu, you can also repair headings in the same manner. Simply click the heading and select the proper level from the menu.

In rare instances, you'll find a heading accidentally tagged a subsequent paragraph. You can reset the non-heading to "normal" with the same menu.

Test your page on your cellphone

Another way to visualize the organization of your page is to view it with a phone browser. Your content will become linear in much the same way it does on a screen reader. If the page does not make sense on a phone, a re-ordering of content will be needed.

Last updated