Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Creating Accessible LibGuides

Why do I need to use headings in my LibGuide?

Headings are an important part of navigating pages for internet users who use screen readers. Screen readers will typically read out all of the headings in a page and then allow the reader to select the sections they wish to read. This way, the screen-readers avoid reading out the entire page when they are only interested in one section of it. Without heading markup, users of assistive technologies are not able to skip through irrelevant content and navigate the page effectively. Some users will have to wade line-by-line through a web page with missing or improper section headings.

Headings are ranked <h1> through <h6>. Content creators sometimes use these ranks arbitrarily according to their visual appeal or simply use bold on Normal (<p>) text to demarcate headings. In order to make pages navigable by low-vision and blind internet users, both of these common mistakes must be avoided. Simply using bolding on paragraph text makes it impossible for screen-readers to break the page up into sections, while choosing heading ranks arbitrarily confuses the structure of those sections.

In LibGuides, the title of the page uses the <h1> heading rank while the section/box headings use <h2>. Any headings within these sections/boxes should use <h3> through <h6>. These ranks are always consecutive: for example, you should never go from a <h3> rank to a <h5> rank. See the section below for an example of proper heading format.

How do I arrange my headings?

Use headings as indicators for sections and sub-sections in your guide. This not only provides hierarchical organization and formatting, but also makes it easy for screen readers to scan and jump to different content areas.

  • Your Libguide's title automatically uses Heading 1.
  • Your LibGuide's box titles automatically use Heading 2, so start with Heading 3 (<h3> tag in HTML) and then Heading 4 in the text editor.
  • Higher-level Headings should be placed above lower level ones, otherwise your hierarchy gets confused. 

A helpful way to approach is to do so as if these headings make up a detailed table of contents for your page. While most users won't interact with it, this virtual 'table of contents' will help screen-reader users navigate your page far more easily.

Good Examples

Let's use the library's alt-text guideline page as an example.

On this page, "Writing Effective Alternate Text" is the <h1>, "Why?", "How?" and "Examples" are <h2>s, and Examples 1 through 6 are the <h3>s. If we were to make a table of contents based on these, it would look like this:

  • "Writing Effective Alternate Text" (Heading 1)
    • "Why?" (Heading 2)
    • "How?" (Heading 2)
    • "Examples" (Heading 2)
      • "Example 1: Standard images" (Heading 3)
      • "Example 2: Standard images" (Heading 3)
      • "Example 3: Accent images" (Heading 3)
      • "Example 4: Photos with only text" (Heading 3)
      • "Example 5: Photos with some text" (Heading 3)
      • "Example 6: Icons" (Heading 3)

This is a helpful summary of what the contents of the page are. Sections are clearly separated, their functions are clear, and there is no chunk that is excessively long. As a result, a user who is read off these headings first knows where they need to go for what.

Counter-Examples

In contrast, let's take a look at the "What Type of Source Do I Need?" page in the Research guide.

On this page, "Research: From selecting a topic to writing the bibliography  -  What Type of Source Do I Need?" is the <h1> and "General types of sources", "Video on Selecting Sources", and "The information cycle" are <h2>s. If we were to make a table of contents based on these, it would look like this:

  • "Research: From selecting a topic to writing the bibliography  -  What Type of Source Do I Need?" (Heading 1)
    • "General types of sources" (Heading 2)
    • "Video on Selecting Sources (Heading 2)
    • The information cycle" (Heading 2)

While this is an okay basic structure, "General types of sources" has a number of sub-headings within it that are simply bolded text. Since it's such a large amount of content under one heading, making "Primary vs. Secondary Sources", "Scholarly vs. Popular Sources", and "Peer Review" into headings would make it easier to navigate. This is what the outline would then look like:

  • "Research: From selecting a topic to writing the bibliography  -  What Type of Source Do I Need?" (Heading 1)
    • "General types of sources" (Heading 2)
      •  "Primary vs. Secondary Sources" (Heading 3)
      • "Scholarly vs. Popular Sources" (Heading 3)
      • "Peer Review" (Heading 3)
    • "Video on Selecting Sources (Heading 2)
    • The information cycle" (Heading 2)

While this is a relatively simple page, this makes it much clearer how to find different parts of the content.

Video Walk-through

If you're having a hard time understanding headings, check out the video below for a walk-through of this topic.

 

GW Libraries • 2130 H Street NW • Washington DC 20052202.994.6558AskUs@gwu.edu