Using headings to improve accessibility

Last updated on
8 September 2016

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

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

Use headings for:

  • The structure of page content
  • Sections and sub-sections of an article
  • Navigation menus
  • Breadcrumbs
  • 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. In most Drupal themes, the page.tpl.php $title variable is wrapped in h1 tags. The $title variable outputs the main title for the page. For example, on this page the title is "Using headings to improve accessibility".

Some pages — for example, the default Drupal front page — do not have a title. On the front page it is an accepted practice to wrap the site name in the h1 tag.

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.

For more information, read Accessible Techniques for Hiding Content.

Further reading about headings

Help improve this page

Page status: No known problems

You can: