Blogs

By Julianne Morgan

In all likelihood, the word "headings" doesn't mean that much to you. Maybe you've seen the phrase when selecting certain styles in Microsoft Word: 

Or perhaps when selecting a font option in PowerPoint:

If you have used headings in either of these programs, you know that selecting a heading changes the appearance of the text on the page. In Word, for example, selecting "Heading 1" will make your font slightly larger and blue. What is actually happening, though, is the software has now tagged the now blue text as <h1> in the programming language behind the scenes. This heading tag - and other tags throughout your content - is crucial for people who use screen readers to quickly understand and navigate to the main sections of the webpage.

This third article in our Accessibility Tip series is all about headings. In this article, you'll learn how to use headings as well as why they are important to use properly for all users. 

What actually are headings?

Well, that sentence directly above this is a heading. This heading is stylized differently than other text on this page - making it easy for sighted users to tell that this is a break or a different section of content. But it's also coded in the HTML of this webpage as an <h3> heading. For a person using screen reading software, any given webpage, online article, Word document, or really just about anything, the first thing the person will do is open up the page and listen to the 'outline' of the page -- but this only works if headings are being used. 

Here's a great example of what a website sounds like without headings:

If you didn't watch the video, you'll see that the person using screen reading software must navigate through the webpage line-by-line. Can you imagine trying to find that one key section you need on a Wikipedia page without really being able to scroll through and visually see the distinct sections? This is what the experience is like when header tags are not used. 

Now, here's an example of the same webpage, but this time proper header tags are being used:

Now, the user has the ability to "see" the different sections of content throughout the site. This small change in the design of the website has made navigation significantly easier for a person using screen reading software. 

How do you use headers?

Well, it depends. Let's start with a general overview of when each header type should be used. 

Header Types

The text above this sentence, "Header Types," is an <h4> header in this system, in case you were curious. 

To get started, let's just leave out the code and think of headers as Header 1, Header 2, Header 3, etc. It's also helpful to think of these headings as defining an outline or a table of contents.

For any given document or webpage, you should really only use the Header 1 ONCE. Header 1 is the equivalent of the title of the webpage or document. It describes the content of the whole page. Everything else on the webpage is some level of fragment of the whole Header 1 topic. If we were writing a paper on pizza, Header 1 would be "Pizza". 

All other levels of headers may be used multiple times, but think of them as further classifications of content. Header 2s, for instance, should perhaps be the main topics that will be covered on the webpage. To go along with the pizza analogy, some of Header 2s might be things like, "History of pizza", "Pizza types", and/or "Pizza toppings". 

Then, within the "Pizza types" Heading 2, you might write about the types of pizza and list those as Headings 3: "New York Style," "Deep Dish," and "Stuffed Crust". 

What you end up with is an outline of the content of the page with visual AND coded levels of generalized topics to more specific topics. 

A commonly made mistake with headers is that folks just use one heading level after the other without delineating the sub-classifications:

In this example, you'll see that "Types of Pizza" has now become a sub-topic, essentially, of "History of Pizza." That doesn't conceptually make sense for our content. And, if you continue down through the levels, you will actually run out! Header tags top out at Heading 6. 

So those are our header types - start by using ONE Header 1 tag, then use varying numbers of the other header levels to separate out the rest of your content. 

How to Tag Headers

Once you understand how they should work, headers are very easy to implement in any given webpage or document. That said, every software has slightly different ways of using headers! 

Isidore

Isidore has probably one of the simplest mechanisms for tagging headers. Simply select the text you would like to be a header, then navigate to the "Paragraph Format" button in the tool menu (it will say "Normal") and select the header you'd like to use from the dropdown menu. 

Microsoft Word

Word is slightly trickier. They've kindly provided Heading 1 and Heading 2 in the Quick Styles pane, but all headings after that are not immediately obvious. Word is thankfully pretty smart, though! Once you've used Heading 2, you'll see that Heading 3 becomes an option in the Quick Styles pane. Once you use Heading 3, Heading 4 then becomes available:

Other Commonly Used Software:

Below are links on how to use headings in other commonly used software. But, if you're ever unsure about how to find the headings option, Google is your friend. If Google can't help, don't hesitate to reach out to the Center for Online Learning - we will try to find an answer. 

• Google Docs
• PowerPoint

Why should you use headers?

As illustrated in the example videos above, understanding the content and semantic structure of a webpage for a person who uses screen reading software is basically impossible without the use of headings. 

But, there are good reasons to use headings for sighted users as well. Headers usually automatically style the text of the page slightly differently, giving your sighted readers a visual clue that there is a new section or different content whenever a different header is used. If you do not like the way the header is styled, you can always change the way the header appears - it will still function the same in terms of its code. Just make sure that if you switch the style of one Heading 2, you also switching the style of ALL Heading 2s so they are consistent throughout the content. 

How can you learn more?

One of my favorite websites for accessibility is called WebAIM. This is my go-to guide for all things related to creating accessible content and websites. This is their section on headings, but I recommend checking out some of their blog posts on occasion - they really get into the weeds and do deep dives on questions about accessibility.  

I also recommend reviewing the Center for Online Learning's self-paced training module on accessibility. This 35-minute module will guide you through all aspects of accessibility in a creative and engaging way. 

Make sure to check out the other posts in our Accessibility TIp series if you're interested in how to make your webpages and documents more accessible:

• The Importance of Meaningful Link Text
• Writing Good Alt Text

Finally, if you have any questions about accessibility or headings, don't hesitate to reach out to the Center for Online Learning at onlinelearning@udayton.edu!