Using headings to create accessible web content & documents

Headings and sub-headings organize a page’s structure in a logical flow. When headings are correctly defined, web browsers, plug-ins, and assistive technologies (screen readers) can use them to provide in-page navigation by moving from heading to heading.

When headings are incorrect, using only character formatting (e.g., size, bold or all caps), or non-logical hierarchy, there is no automated way for the screen reader to know where the headings are in the document. The document can be read out of order or as one long paragraph. When this happens, the user has no way to stop or move the screen reader to the section of information they are looking for.

Headings should be short, specific, and clear. Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>).

  • Heading 1 is the main content heading, the title at the top of the page.
  • Heading 2 is a major document section/header section on a web page (Subtitles and secondary headings).
  • Heading 3 is for supporting information (for headings nested inside of the secondary headings).
  • Heading 4 is for supporting sections on a page (for headings nested inside of the tertiary heading sections).
  • Most documents/web pages have 2-4 heading levels.
  • Do not skip heading levels, they assist in making the flow logical.

Note:

Microsoft Word supports Headings 1-9, but web pages and PDF files only support to 6 levels. For this reason, we recommend limiting Headings to 6 levels.

To create an accessible document, all formatting must be applied using the options in a customized Styles pane. Do not use the options in the Font pane (MS Word).

Screenshot of the toolbar in a Word document showing how to create accessible styles to format your documents.

The following are examples of how headers are used to structure a web page and a word document.

The headers organize the page of information with the most important at the top as an H1 header. As the reader scans down the page, the headers H2 through H4 help to organize the information into a logical reading order.

Example of headers on a webpage

Screenshot of a Brock website page showing examples of headers H1, H2, and H3.

Example of headers in a Word document

Screenshot of a Word document showing examples of headers H1, H2, H3, and normal text.