An empty heading occurs.
The tag for the heading is present, but there is no text in the tag.
In the text editor, click the "Source" button. Press Ctrl+F (Windows) or Cmd+F (Mac) to open a search bar. Search for "<h". Go through each instance until you find a heading that contains no text (e.g. "<h3> </h3>"). Delete this.
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.
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.
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.
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:
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.
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:
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:
While this is a relatively simple page, this makes it much clearer how to find different parts of the content.
If you're having a hard time understanding headings, check out the video below for a walk-through of this topic.
