Page structure is critical to understanding documents and webpages. In most cases, content is organized into sections marked by headings and subheadings, and the content within those sections is comprised mostly of paragraphs and lists.
Sighted users understand all these relationships at a glance, based largely on visual characters such as the text size, style and position of content relative to other surrounding content.
Assistive technology, such as a screen reader, requires structure just like everyone else. This means all content - headings, paragraphs, lists, tables, banners, menus, and other features - must be identified using CMS page templates for new web pages and web elements that define the role of the object.
Properly coded heading serve two purposes:
They provide an outline of the page. This allows users to understand how the page is structured and how the sections relate to one another.
They provide targets so users can jump from heading to heading with a single keystroke such as the letter “H” in some screen readers.
The following are best practices for using HTML headings:
<h1>for the main heading of the page. For most pages, there will be only one
<h2>for subheadings beneath the main heading.
- Use additional levels of headings (
<h5>) as needed if there are additional levels of sub-headings within your web page content.
- Ensure headings form an outline of your page content; avoid skipping heading levels.
If the text editor is used to select bold and change the font size, it may look like a heading but it isn’t really a heading.
Issue: Headings Not Nested Properly
For instructions to resolve this issue on your webpages, follow the Quick Reference Guide - Nested Header