Accessibility Recipes/Headings

From DPWiki
Jump to navigation Jump to search

What to do and how?

Nothing terribly amazing—just use headings, correctly!

Remember, a heading is the title for a section of content that follows it. Also, you can use <br /> inside headings, as well as styling with CSS commands and HTML tags. So definitely don't use two heading tags when what's wanted is really just one. For example

<h2>Chapter I<br />
<small>A Walk in the Woods</small></h2>

would be correct if "A Walk in the Woods" is the title of Chapter I. But if, instead, "A Walk in the Woods" was one of several sections within Chapter I, the right markup would be

<h2>Chapter I</h2>
<h3>A Walk in the Woods</h3>

It may help to think about the "outline" or "table of contents" that would be generated from your heading tags. It works just like the table of contents on this wiki page, and there are programs that can show you it mentioned in the Testing section below.

Level 1 headings are the most important, and for us these are usually reserved for the book's title only. Some believe there should only be one <h1> on a page, others might re-use it when the book's title occurs again, which is quite common.

Many consider it good practice to avoid skipping levels (e.g. by using <h2> for chapters, but <h4> for sections within the chapters, with no <h3>s in between). Put precisely, this means that the number of the following header must be equal, one higher or any amount lower. The Testing tools will alert you if you skip levels.

Run-In Headings

Some books have headings that look just like a bold or italic phrase at the start of a paragraph.

... danger in the case of such children is not over-pressure, but under-pressure.
   Intelligence tests as a basis for grading. Not only in the case of retarded or exceptionally bright children, but with ...

The good news is that there is a CSS property to make headings that look like that: display:run-in. The bad news is that that browser support is a bit weird. Chrome, Opera, Safari and IE8 handle it perfectly, while Firefox and older IE versions treat it just like any other heading [1]. So:

  • If all the run-in headings are actual separate phrases that will look ok if stuck on their own, centred or whatever as usual, then after considering the advantages of heading markup (below) you might decide to go ahead with this.
    • Here is how you use it:
      ... danger in the case of such children is not over-pressure, but under-pressure.</p>
      <h3 style="display:run-in;">Intelligence tests as a basis for grading.</h3>
      <p>Not only in the case of retarded or exceptionally bright children, but with ...
  • If some of the headings are part of the sentence that follows them—e.g. if the above example was more like

    ... danger in the case of such children is not over-pressure, but under-pressure.
       Intelligence tests as a basis for grading have been considered by ...

    —then you've really no choice, because that would look silly with the heading centred, and then the first paragraph starting mid-sentence.
    • Probably your best bet in this case is to use strong emphasis
      ... danger in the case of such children is not over-pressure, but under-pressure.</p>
      <p><strong>Intelligence tests as a basis for grading</strong> have been considered by ...


Ads are hard. Just keep in mind that a heading introduces a section of content, that it's generally best not to skip levels, and that you can use all sorts of linebreaks and styling inside headings. If you have a whole bunch of one-page ads, it makes sense to make the title of each one the same level of heading, even if you style some of them much bigger than others to imitate the book.

Ads often have some small introductory text before they get to the main "headline":

"From the author of Squash for Squirrels and The Building of Bowers

This new book, richly illustrated and cloth bound....

This is a pain. I like to make the main part be the largest heading, and any stuff before it I just make into a <p>. But it's not clear. Don't worry over it.

There's a separate page dealing with Title Pages.



  • WCAG 1, Checkpoint 3.5 Use header elements to convey document structure and use them according to specification. For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects. (Priority 2)
  • WCAG 1, Checkpoint 13.6 Provide a way to bypass groups of links. (Priority 3)
  • Draft WCAG 2, Success criterion 1.3.1 Information and relationships conveyed through presentation can be programmatically determined or are available in text (Level A).
    In the Techniques document:
    • H42 Using h1-h6 to identify headings
    • H69 Providing heading elements at the beginning of each section of content

Who benefits?

A lot of people! The Techniques for WCAG 2 document explains

Home Page Reader, JAWS, and WindowEyes all provide navigation via headings and provide information about the level of the heading. The Opera browser provides a mechanism to navigate by headings. Additional plugins support navigation by headings in other user agents.

Users of screenreaders (blind or low-vision users, dyslexics) will hear the level of each heading announced as they reach it. E.g. Heading Level 3: References. This is a good thing, because it helps the user understand that it's a heading and how it fits into the rest of the document.

These users may also call up a list of all the headings on the page, and from there jump to the part they want, because unlike visual users they can't skim down pages to spot what they're looking for. If some headings haven't been marked using heading elements they won't appear in the list, and if the heading levels are illogical it may be confusing.

Here's how the list of headings looks in FireVox:

Firevox outline.png

People with motor problems who cannot use a mouse may also use the list of headings to jump around the document, or they may press a key to jump from heading to heading. If you just use bold or strong markup for sections instead of a heading element, then these readers can only jump between, say, chapters not sections, and will have to stick with page-up and page-down to move around within the chapter.

(Search engines also benefit, because they use headings to work out what a document is about. Likewise, anyone attempting to autoconvert your book to another format will be helped by logical use of headings. In particular, Project Gutenberg now converts HTML to EPUB format, and the headings are used to create the table of contents.)


None, unless you decide to use run-in headings, in which case the drawback is that in some browsers it will not be styled the same way as the book (although it will still be styled nicely).


Here's how the outlines look in the Validator and in Opera:

Validator outline.png
Opera outline.png

  • In Opera, jump from heading to heading using the keys W and S. In Firefox, you can do something similar if you install the Heading Navigation Greasemonkey script.

Further Reading