Headings and Accessibility

This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE) to help identify accessibility issues in other forms of digital content.

Error Types: Errors must be fixed. Alerts should be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content.

Best Practice: Use a hierarchical sequence of headings. Headings provide an outline of your content. It enables people to navigate to the information they seek by scanning a web page or digital document, or using assistive technology to extract headings or navigate by headings.

Missing Heading 1

The missing heading 1 is an alert. A Heading 1 helps identify the page topic for people and search engines. This alert should be fixed.

Notice: At the top of the web page, the breadcrumb does not include this page because this web page is missing the page title/heading 1. Adding a page title block does not solve the breadcrumb issue.

Error Type: Alert

Best Practice: Each web page or electronic document should have one heading level 1 that represents the main topic of the digital document.  

Missing Page Title

If the web page is missing the title tag, it is an error and must be fixed. A web page must have a meaningful page title.

WordPress: In WordPress, the page or post title (Add title) of a web page supplies the heading 1 and the document title for the web page. Leaving the page or post title/heading 1 empty, like this web page, or only adding a Heading block with an H1 to a page, does not populate the document title. A missing document title is an error and must be fixed.

Error Type: Error

Best Practice: Each web page or electronic document should have a document title that represents the main topic of the digital document.  

One Heading Level 1 Per Page

The heading above is a heading 1. If it were a heading 1, it would override the missing page title/heading 1 at the top of the page.

Pages should only have one heading 1. A Heading 1 should begin the main content of the web page. This allows assistive technology to easily jump to the beginning of the content (the heading 1) on the web page. This alert should be fixed.

Error Type: Alert

Best Practice: Use only one heading level 1.

Skipped Heading Level

A skipped heading level interrupts the hierarchy and outline of the page. This alert should be fixed.

Error Type: Alert

Best Practice: Do not skip down in heading levels.

There is an empty heading block between this sentence and the previous sentence. Missing headings are errors and must be fixed. Wave will identify the heading level and the missing heading. WAVE and Web Developer (Browser Add-on) will catch this issue. This error must be fixed.

Error Type: Error

Best Practice: Remove empty headings. People using assistive technology will be alerted to empty headings, which could be confusing.

Heading 2?

This heading above is intentionally styled to look like a heading. The application formatting tool, like WordPress’s Heading block, was not used to create this text. Not all automatic accessibility checkers will catch that this could be a heading. If this is a heading that identifies and describes the following content, then it is an alert that should be fixed.

Error Type: Alert

Best Practice: Use an application’s formatting tools or apply HTML tags to properly format headings.

Fake heading

Oftentimes, bold text is used to represent a heading. If the bold text is part of the content’s organization, then it should be fixed with the appropriate formatting tools. This is a manual check. An automatic accessibility checker will not catch that this should be a heading.

Error Type: None (usually), but it is an Alert

Best Practice: Avoid manually styling text with bold or italics to indicate a heading.

Headings should be front-loaded and concise to help people easily navigate to their intended content.

Headings should be concise and front-loaded with informative words. Assistive technology can list the headings for people, allowing them to easily navigate to the content. The heading for this section of content is long and disruptive to the flow of the heading list. Also, it isn’t front-leaded with important details.

Error Type: None. This is a best practice

Best Practice: Provide short descriptive headings. Descriptive headings provide people with the information used to scan and navigate to the information they seek.

Tools for Web Pages

• WordPress Outline: In the Documents toolbar (top toolbar of the page or post edit page), select the Document Overview icon (3 lines). In the Document Overview, the List view tab will be open. Select the next tab, Outline.  It will show heading structure except for the missing Heading 1.
  Note: In WordPress themes WDS 2 and WDS 3, this tool does not identify headings in accordions.
• WAVE (website) and browser extensions: This is a full-page accessibility automatic check. In the Summary pane is the Structure tab with the heading structure. It also contains the Accessibility Landmarks.
  • Wave: Heading result documentation: These are the WAVE results associated with headings.
• Web Developer (Browser Add-on): This browser extension features an Information tab with a View Document Outline option. The Document Outline opens in a new tab with the heading structure of the website.
• HeadingsMap (Browser Add-on: Chrome, Edge, Firefox): This browser extension does not check empty headings by default. You must check to include it as an option. Select the 3 dots in the top bar, then settings. In the Configuration dialog box settings, select the Headers structure tab, check the box for Consider empty headings.
  Note: This tool will display the headings within a WordPress Accordion block when the accordion is open.

Want to check non-web page based digital content? See the Digital Accessibility Testing/Scanning Tools web page for additional resources.