Header nesting - header following h1-h5 is incorrect

Issue/Question

Under the Accessibility Final Checks I receive the Known Problem: Header nesting - header following h1-h5 is incorrect.

Environment

  • OU Campus

Cause

OU Campus Final Checks look over all the code on a page and detect accessibility issues that do not meet WCAG 2.0 (Level AA) standards. It has detected that 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. 

Note: Known problems have been verified as broken or creating an error and must be fixed to meet accessibility standards.

Resolution

Update the heading that follows the one 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 ok 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 OU Campus Best Practices.

  1. Check out the page if it is not already.
  2. Click the  Edit tab.
  3. Click the Edit Button on the content area where the heading is located.
    Note: Headi ngs may not be located on the page itself. Assets, _notification.pcf, and _footer.pcf may be the location of the heading that needs corrected.
  4. In the WYSIWYG toolbar use the Show Blocks Button - a dotted outline around a paragraph icon 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
  5. Find the heading that follows the one identified in the Page Check Source Code and change it to use the correct heading order using the blocks drop down.
    Example: If the heading identified in the Page Check Source Code was a Heading 2, the next heading should either be another Heading 2 for an equal section, or Heading 3 for a sub section.
  6. Save the page.
  7. Click the Publish button to run the accessibility final check again. Repeat the steps as necessary to order headings correctly. When the issue has been resolved it will no longer display in the accessibility check.

Details

Article ID: 3735
Created
Tue 2/9/21 1:51 PM
Modified
Thu 2/25/21 10:12 AM