Heading Levels Should Only Increase By One

Issue/Question

Under the Accessibility Final Checks, I receive the Moderate Problem: 

Heading levels should only increase by one.

Environment

• Web CMS

Cause

Final Checks evaluate all code on a page and detect accessibility issues not meeting WCAG 2.0 (Level AA) standards. 

It detected the page contains a heading that does not follow the correct heading order. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Skipping headings can be confusing and cause issue navigating with assistive technology.

Resolution

Update the heading(s) identified in the source code to use the correct heading level. Make sure that a Heading 2 is not followed directly by a Heading 4, for example. Headings with an equal or higher level start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. It is okay to skip headings when closing subsections, for instance, a Heading 2 beginning a new section, can follow an Heading 4 as it closes the previous section. 

More information an examples on heading order are available from W3.org and Web CMS Best Practices.

1. Click  Yellow Light Bulb to check out page.
2. Click  Edit tab.
3. Click Edit button on the content area where the heading is located.
   Note: Headings may be located in any editable content area or the _notification.pcf & _footer.pcf includes.
   
   If you are unable to locate a heading, check the following areas in order, skipping any areas that are not enabled. Reference the Content Area Order section of Headings Best Practices for details about the order of sections and recommended heading levels for each area.

   1. _notification.pcf (Do not use headings in this area)
   2. Left Column Quick Links (Do not use headings in this area)
   3. Left Column Content Area (Do not use headings in this area)
   4. Main Content (h2 - h6)
   5. Right Column Quick Links (h2 - h6)
   6. Right Column Content Area (h2 - h6)
   7. Footer (h2 only)
4. In the WYSIWYG toolbar use the  Show Blocks button. This will add a thin border around every block in the section, labeling the corresponding block level in the top left. Headings are marked H1 - H6 and have a dark background with white text.
   • Note: Headings may be blank lines, using show blocks will highlight them. Change any blank lines being used for spacing to use the paragraph block level.
5. Locate the heading identified in the Page Check Source Code and click within that block.
6. Use the Blocks dropdown to change it to use the correct heading order (h2 - h6) or remove it.
   • For example, if the heading is a level 4, it likely needs to be a level 3 since the scanner has identified that it was skipped. This will depend on your page structure. Locate headings before and after to help determine which level to use.
   • Note: If the heading is located in a _notification.pcf or left column, ○ do not use a heading block. Some headings may not need reordered, but removed.
7. Save page.
8. Click Publish button to run the accessibility final check again. When the issue is resolved it will no longer display in the accessibility check.