Maria Kuhn: May 9, 2017

Why Use Headings?

heading tagsHeadings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.

Use headings for:

  1. The structure of page content
  2. Sections and sub-sections of an article
  3. Navigation menus
  4. Breadcrumbs
  5. Any other consistent sections that users may want to find or skip

Best practices

There are a few simple rules to follow when using headings:

Every page should have an h1 heading

Without an h1 the user has no simple way to learn what the page is about.

Headings must be properly nested

Heading levels must not be skipped. For example, do not jump directly from h1 to h3.

Headings are for structure, not formatting

Headings should be used to divide content into meaningful sections, not to format text. Your h2 styling may be italic and green, but that does not mean that anytime you want italic green text you should make the text an h2. Rather, the headings (no matter what their styling looks like) should be used to designate content structure.

Hiding headings

Sometimes the role of a feature is perfectly clear to people who can see the page design, but difficult or impossible to discern if you can't see the design. When this happens, you might want to add a heading to label that feature but make the heading invisible.

  • The accessible way to make a heading invisible is to use CSS: class="element-invisible". The heading will not appear in the displayed page, but screen readers and other forms of assistive technology will recognize the heading and make it available to their users.
  • Don't use display:none. Although this coding will make the heading invisible, it also makes the heading unavailable to assistive technology — so nobody will find it, regardless of how they try to access the content.