Accessibility Basics – Headings

What are Headings?

Headings tell accessibility software how important a piece of text is and make it easy for people to find what they’re looking for using that software.

They’re a lot like the Table of Contents for a document

Put simply headings represent hierarchy just like sub-levels in a table of contents.  Only in the case of headings, you’re defining the importance and location (for the software) of that information rather than simply a page number.The level of heading defines its level of importance with H1 being the highest level of importance and H6 being the least important.

For example:

H1 – Most Important (Blog Title, Event Name, FAQ Title)
– H2
– – H3
– – – H4
– – – – H5
– – – – – H6 – Least Important (Many documents will never need an H6)

As you can see above, H1 is the most important Heading you can have and H6 is the least important.

How To Use Headings

Using headings is simple. Just click on the down arrow for the text size in the post editor (circled in red on the photo below), select the size heading you want to create and type your text. Just like that you’ve created a heading! (See, easy!)

The text size editor even shows you that as the heading number gets larger, the text gets smaller and so does the level of importance. Notice how the text shrinks?

When you are creating a blog post, calendar event or FAQ post you will always need to ensure it has a title. The title you enter in here will create the H1 for you automatically. The title of your post, event or FAQ is always your most important piece of information.

RULE: Never add any additional H1’s other than the Title!

Because we never want to use more than a single H1 in a post or event, you’ll always start off with H2 for defining your sections. Once you get there the document structure will help you begin to assign the appropriate headings to the sections of the document.

As you can see from this example of an Agenda below. The H1 is the title of the blog post and is the only one in the document. From there the top-most important sections of the document are labeled as H2 and include the larger overall sections such as Time & Date, Attendance, etc, and a section devoted to the Agenda itself. From there H3’s are all sub-sections noted to be less important than the H2’s. The H3’s include things like the RESIG board members and staff in attendance and the major sections of the Agenda. Finally, you’ll see the Agenda section also has H4’s for the content inside the Open Session. Using Headings is just as simple as being clear what the document skeleton looks like.

Important Rules

Never use more than one H1.

As said before (because it’s that important) never use more than a single H1 in an entire post, event or FAQ. Since the Title of your post, event or FAQ becomes your H1, you never need to create any H1 text at all.

Never skip Heading Levels.

This rule can confuse some people but it’s very simple. Never skip a heading level. Just as you count 1,2,3,4,5,6 you never want to see an H5 come before an H2. Because counting 1,5,3,4,2,6 would be weird… Also because this can confuse the software in understanding the document structure. This rule is also helpful because it requires you to consider the outline of your post which can be helpful in crafting it from the start. Notice in the Heading example above how the Agenda used Headings 1,2,3 and 4 but never jumped from 2 to 4 or 4 to 1.

Never, never, ever use Headings to make your text bigger or smaller.

WordPress (the software that created this site) doesn’t work like font sizes in Microsoft Word. Headings DO change the size of text but they should never be used just to make the text in a post, event or FAQ larger or smaller. Headings serve an important accessibility function and changing the size of text for design purposes should be done with additional code (HTML or CSS) and never done by using Headings. If you need the size of text or headings adjusted for visual/graphic design purposes please contact your web administrator/developer and request they make the change for you.

For additional information please visit WebAim’s section on headings for content or contact your web administrator/developer.