Create a Logical Outline of the Web Page with Headings
Headings are an effective way to organize content within a web page. Think about the structure and organization of the text, and use headings as way to convey that structure to readers. Look at the headings on the web page and ask yourself if you would get the main idea of the web page — or at least get a sense of the kinds of things you would read on the page — if all you could read were the headings. If the answer is no, then you should consider revising the heading structure — and possibly the text itself — to reflect what you want the web page to convey.
Visual users benefit from headings because heading text is big and bold, making the page structure more obvious and easier to scan quickly. Blind users also benefit from headings because they can navigate through just the headings, giving them the ability to scan a page quickly, or to go directly to the part of the page that interests them most.
If you were to create a web page about setting the exposure manually on a camera, you could simplify the steps into an outline as follows:
- Setting the Exposure Manually on a Camera
- Set the ISO
- Choose an aperture
- Set a shutter speed
You would need to fill in the details of each item in this list, but that's a pretty good overview of the main steps or parts of the process, so we can use these list items as the basis for our heading structure. In this example, the first item would be marked as
<h1> and the remaining items would be marked as
<h1>Setting the Exposure Manually on a Camera</h1> <p>Put text here...</p> <h2>Set the ISO</h2> <p>Put text here...</p> <h2>Choose an aperture</h2> <p>Put text here...</p> <h2>Choose a shutter speed</h2> <p>Put text here...</p>
Make Headings Brief, Clear, Informative, and Unique
Like page titles, headings should be brief, clear, informative, and unique. Duplicate headings can exist on separate web pages, but each heading should be unique within the same web page, if at all possible.
Use Real Headings... Not Just Big Bold Text!
Headings are about logical structure, not visual effects. Big bold text may look like a heading to visual users, but screen readers ignore the size and font-weight of the text, so blind users cannot know a phrase is a heading unless it is marked up in the HTML code as such, using
<h6>. Even though the example below includes the same text and is styled to look similar in the browser to the example above, only the first example creates real headings that screen readers can use.
Don't use styles to create fake headings. All of these sentences are marked up as regular paragraphs, so none of them will be treated as headings by screen readers.
<p style="font-weight: bold; font-size: 200%;">Setting the Exposure Manually on a Camera</p> <p>Put text here...</p> <p style="font-weight: bold; font-size: 150%;">Set the ISO</p> <p>Put text here...</p> <p style="font-weight: bold; font-size: 150%;">Choose an aperture</p> <p>Put text here...</p> <p style="font-weight: bold; font-size: 150%;">Choose a shutter speed</p> <p>Put text here...</p>
Best Practice: Start the Main Content with
Usually the best practice is to start the main content of a web page with a level 1 heading (
<h1>), with no other headings before this high level heading. The sub-sections of the page should each be marked as level 2 headings (
<h2>). If there are sub-sections within the level 2 sections, they should be marked as level 3 (
<h3>) and so on. Anything that comes before the main content of the page probably should not be marked up with any headings at all, though this is not an iron-clad rule. One of the main reasons that the
<h1> should appear at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first
<h1>, which, in principle, should allow them to jump directly to the main content of the web page. If there is no
<h1>, or if the
<h1> appears somewhere other than at the start of the main content, screen reader users will have to listen to more of the web page to understand its structure, wasting valuable time.
As with all best practice recommendations, there will be exceptions, in which it doesn't make sense to start the content with
<h1>, or when it may be best to put other headings before the content, but the exceptions do not apply to the vast majority of web pages.
Make the Title Match the Top Heading in the Main Content
As mentioned in the previous section about page titles, on most web pages the
<title> and the
<h1> heading at the beginning of the content should match, or should at least be very similar. From a structural and semantic perspective, both serve the function of giving the page a title.
Use Headings in Proper Hierarchical Order
Each level of heading,
<h6>, indicates the relationship from one part of the content to the other parts. The content under a heading relates logically to a heading above it. Similarly, the content within an
<h2> block of content would relate logically under the
<h1> that precedes it. In this way, the heading structure of a document can be used as a method to organize the document’s contents hierarchically much like an outline.
The following simplified outline of headings shows multiple levels of headings marked up in the appropriate order:
<h1>Setting the Exposure Manually on a Camera</h1> <h2>Set the ISO</h2> <h3>The effect of ISO on image quality</h3> <h3>High ISO cameras</h3> <h2>Choose an aperture</h2> <h3>The effect of aperture on depth of focus</h3> <h3>Vignetting</h3> <h3>Diffraction</h3> <h2>Choose a shutter speed</h2> <h3>Shutter speed limitations for hand-holding a camera</h3> <h3>Long exposures</h3>
In the example below, there are two problems.
- First, the outline starts with two
<h3>headings, rather than
<h1>, and neither of these headings is the main heading for the web page. They are part of the navigation structure around the heading, in the template.
- Second, once the content starts, the outline jumps from level 1 to level 3, without a heading level 2 in between.
<h3>Quick Links</h3> <h3>Photography Tutorials</h3> <h1>Setting the Exposure Manually on a Camera</h1> <h3>Set the ISO</h3> <h4>The effect of ISO on image quality</h4> <h4>High ISO cameras</h4> <h3>Choose an aperture</h3> <h4>The effect of aperture on depth of focus</h4> <h4>Vignetting</h4> <h4>Diffraction</h4> <h3>Choose a shutter speed</h3> <h4>Shutter speed limitations for hand-holding a camera</h4> <h4>Long exposures</h4>
There may be circumstances in which jumping heading levels makes sense, but these will be rare exceptions. You should strive to keep the order logical and sequential whenever possible.
Create the Structure First, Then Style the Headings as You See Fit
Always think about the structure first, because screen readers and other assistive technologies pay attention to the structure, not the look and feel. If the default size of the headings is too big for the look you have in mind, use styles to change the size, rather than jumping down to a lower heading level.
Navigating a Web Page by Its Headings
Keep in mind that blind users can't just look at a web page and immediately understand its layout the way that a visual user can. Visual users can take in a lot of information about the page layout without having to read all of the content. Blind users don't have that luxury. Screen readers read in a linear fashion, which means listening to the entire web page, unless there is some other convenient way to get a "glimpse" of the page's layout and structure. It turns out that headings are a way to do that.
Screen reader users can use keyboard shortcuts to navigate through the heading structure of a document. For example, in JAWS, the "H" key jumps from one heading to the next, reading them in sequential order, no matter what level the heading is (h1, h2, h3, etc). The "1" Key jumps through all of the level 1 headings (
<h1>). The "2" key jumps through all of the level 2 headings (
<h2>), and so on.
In the audio file below, the user presses the "H" key while using JAWS with Internet Explorer to navigate through all of the headings sequentially on the web page.
JAWS reads the text of the heading, followed by the level of the heading. In this example, JAWS says:
"Setting the exposure manually on a camera, heading level 1. Set the ISO, heading level 2. The effect of ISO on image quality, heading level 3. High ISO cameras, heading level 3. Choose an aperture, heading level 2. The effect of aperture on depth of focus, heading level 3. Vignetting, heading level 3. Diffraction, heading level 3. Choose a shutter speed, heading level 2. Shutter speed limitations for hand-holding a camera, heading level 3. Long exposures, heading level 3."
Another option is to use the Insert + F6 keyboard shortcut to pull up a list of all of the headings on the page.
The headings can be sorted sequentially, "In Tab Order," as JAWS says, or alphabetically. Users can also choose to view headings of only a certain level. Screen reader users can quickly go through the headings and understand the basic outline of the page, and then go back to the section that they're most interested in. But this way of navigating and quickly understanding a web page is possible only if the page uses real headings, and only if the headings create a good, logical outline of the content.
Avoid Using Heading Markup for Text which is not Actually a Heading
If you want to create big, bold text for non-heading text, use styles to achieve that effect. If you use heading markup (
<h2>, etc.) for non-heading text, you will confuse screen reader users by creating an inaccurate structural outline of the page contents.
Don't use headings to make promotional text stand out visually (unless the text really is part of a logical outline on the web page).
<h2>Special Rates good until July 31!</h2>
You may think this text is important enough to mark it as a heading, but headings aren't meant simply to convey importance. They are meant to convey the structure of the web page.
Headings Improve Search Engine Optimization
Headings improve search engine optimization (SEO) by highlighting the important parts of the web page and drawing attention to them. Be careful to not abuse the headings as a way to add search terms into the content though. If the headings contain more search terms than meaningful structural information about a page, the headings will not be useful to screen reader users, and will defeat the purpose of using them for accessibility reasons.