Content Headings & Titles

Organizing page content by headings helps users understand the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the attention round the page. Using headings and making them visually apparent is particularly helpful for users with cognitive disabilities.

Screen reader users can navigate a page consistent with its headings, hear an inventory of all headings, and skip to a desired heading to start reading at that time . Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for instance .

Using Headings

  • All pages should at least have a <h1> level heading giving the title of the page. This is set by default as the page title in WordPress.
  • Avoid skipping heading levels (for example, do not skip from <h2> to <h5>). You can however skip headings in the other direction if the outline of the page calls for it (for example, from <h5> to <h2>).
  • Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.
  • Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly, and screen reader users will not benefit.
  • Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank. Only for exceptionally long or complex pages would <h5> and <h6> be necessary.