Last updated December 10, 2012. Created by bowersox on August 28, 2009.
Edited by Cliff, LeeHunter, leenwebb, Tor Arne Thune. Log in to edit this page.
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 "Headings."
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.
This web-based tool will help you Check if every page has an 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.