Accessible Headings

​​​​What Are Headings?

Headings are a special type of text formatting. You may already use bold, color and/or a larger font to distinguish the section titles in your content, but that type of formatting alone won't allow a screen reader to recognize the text as a heading. You also need to format the text using the heading style settings in your word processor, website content editor, the text editor on eCampus, etc.

Example Heading in Microsoft Word

In the example below, a Heading 1 style has been applied to the section title.

Screenshot of the heading buttons in the Word ribbon bar. 

Why Use Headings?

People using screen readers need to have text formatted in certain ways in order to easily navigate content. Think of headings as an outline or table of contents that will help screen reader users understand the structure of the document and quickly find information. Heading structure allows screen reader users to easily search for sections and jump directly to specific content without having to listen to the entire document each time.

You should add headings to indicate all main topics and subtopics, especially in longer documents.

Video Overview: Improve accessibility with heading styles

Heading Hierarchies

You should use headings in a hierarchical (nested) order to indicate main topics and subtopics.

  • Heading 1 is usually a page title or the main content heading. It's the most important heading, and there is generally just one Heading 1.
  • Heading 2 is usually a major section heading.

  • Heading 3 is usually a sub-section of a Heading 2, and so on (ending with Heading 6).

Never skip a heading level. For example, don't jump directly from a Heading 1 to a Heading 3.

Example Heading Structure

Below is an example of one possible heading hierarchy for a course syllabus.

Note that the document title ("ENGL 1301 Course Syllabus") is the only Heading 1.

The main topics of the document are all Heading 2, and any subtopic for one of those main topics is a Heading 3.

Also, please note that the following example is coded as a list to illustrate the organizational structure of header elements and is not coded with the matching header tags.

  • Heading 1: ENGL 1301 Course Syllabus
    • Heading 2: Instructor Information
    • Heading 2: Basic Course Information
      • Heading 3: Course Prerequisites
      • Heading 3: Course Description
      • Heading 3: Student Learning Outcomes
    • Heading 2: Required Course Materials
    • Heading 2: Course Activities
    • Heading 2: Grading
    • Heading 2: Course and Institutional Policies
      • Heading 3: Attendance Policy
      • Heading 3: Late Policy
      • Heading 3: Institutional Policies
    • Heading 2: Course Schedule

Video: Frame Titles and Headings

  

Accessibility Checklist: G​

"Frames shall be titled with text that facilitates frame identification and navigation.”

What does this mean to you?

The guideline focuses on using frames within websites to define content areas as well as assist in navigation.

But since frames are most commonly utilized by web designers, we’ll focus on good document design which is beneficial to all course instructors.

For those who deal with HTML and web design – we suggest you visit the faculty center accessibility website and utilize the guideline handouts to learn more about proper use of frames in web design and HTML coding best practices.

Instructors, this tutorial will only cover a small piece of content, so you should also check out the faculty center website for plenty of helpful tutorials, links to Lynda.com videos, and other helpful items.

In this video, I’ll quickly demonstrate the benefits behind creating styles and using consistent content design.

As shown here in my Guideline G tutorial, I have used styles to create my sections – they each have their own distinct font, font color, size and also contribute to my table of contents located on the left side of the screen.

There are multiple ways to setup your styles, but I'll show 2 of the methods that I use to create custom styles for my documents.

The first way- Format your text to look like you want, then assign the style to an existing option/choice given above.

So I have my style looking exactly how I want for my title.

And I want to use this as an ongoing title for all of my new documents that I ever make.

So what I'm going to do is to highlight my text, right click where I see "Page Title" above.

You can use any of the styles that they give you above here in your styles bar but I went ahead and used the "Page Title" option because it exists already.

I like the title - I'm just going to remake it to be my style.

So I right click on the option and I click “Update Page Title to Match Selection.”

This removes the formatting was attached to that style shortcut originally and replaces it with my own as the new default.

So anytime I ever click Page Title, it's automatically going to make my content look exactly how I want.

The other way to build your style shortcuts is to modify the existing options themselves.

So instead of designing it here, I’ll going to design it inside of the styles menu options listed above.

Right click on the style you want to edit, click Modify.

Customize your style to look the way you’d like using the options given.

So choose your font, choose your font size, give it a color, formatting.

Some options you may want to modify after getting your font looking the way you'd like:

Style Name (Make that something you'll recognize)

Styling for following paragraph - Any time I choose "Page Title" what do I want to follow my paragraph.

I'll choose normal.

So after I use my Page Title, when I hit enter, it'll automatically switch over to normal text as being the next line of text that's going to follow it.

Every time.

Something else you should pay attention to is this option here:

New documents based on this template.

Do you want to use this only in this document or do you want all new documents to be based on this template?

So do you want this style to be consistently available anytime you ever make a

new document (I do this personally) and then click "OK."

Now you just need to highlight the text you want to edit, and let's say I want to do this for instance. And I'll choose "Page Title" and it makes it look exactly like my page title listed above.

Creating and modifying these styles will give your documents you create a standardized, professional look as well as improve your content’s accessibility for all users.

Additional Resources