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 text larger helps guide the user’s attention. Using headings is particularly helpful for users with cognitive disabilities.
Screen reader users sometimes navigate a page by hopping from heading to heading or hearing an inventory of all headings and skipping to a desired heading. Screen reader users can also use headings to skip the repeated blocks of content like headers, menus, and sidebars.
- 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, so you should not add additional <h1> headings to your content.
- 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.