2.7 Use header elements to convey structure

Rationale

Many people navigate or skim through documents by reading the headings to get a feel for the structure and an overview of the content and scope of a document.

HTML allows you to specify a hierarchy of heading levels by using different header tags - H1, H2, H3, etc. The tag not only defines the hierarchical order of a heading, it also affects visual presentation, so that an H1 heading looks bigger and bolder than an H2 heading. Using the header tags to make non-heading text bigger and bolder can confuse users by making content which is not a header look like one. This makes it very difficult to gain an understanding of the structure of a document or page. Also, some screen readers will read content assigned as a header in a different tone of voice to other content on the page, providing users with important clues about document structure. Misusing heading attributes will therefore misinform and confuse screen reader users.

Directions and Techniques

Order Heading elements correctly

Heading elements should always follow a logical hierarchical order. See the WAI recommended techniques for using header elements

How you could check for this:

There are no specific test methods recommended for this guideline.

- View WAI checkpoint 3.5